New project card layout

static/assets/GitHub FliegendeWurst.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="142" height="20" role="img" aria-label="GitHub: FliegendeWurst"><title>GitHub: FliegendeWurst</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="142" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="47" height="20" fill="#555"/><rect x="47" width="95" height="20" fill="white"/><rect width="142" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="245" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="370">GitHub</text><text x="245" y="140" transform="scale(.1)" fill="#fff" textLength="370">GitHub</text><text aria-hidden="true" x="935" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="850">FliegendeWurst</text><text x="935" y="140" transform="scale(.1)" fill="#333" textLength="850">FliegendeWurst</text></g></svg>

static/assets/GitLab arnekeller.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="110" height="20" role="img" aria-label="GitLab: arnekeller"><title>GitLab: arnekeller</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="110" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="45" height="20" fill="#555"/><rect x="45" width="65" height="20" fill="white"/><rect width="110" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="235" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="350">GitLab</text><text x="235" y="140" transform="scale(.1)" fill="#fff" textLength="350">GitLab</text><text aria-hidden="true" x="765" y="150" fill="#ccc" fill-opacity=".3" transform="scale(.1)" textLength="550">arnekeller</text><text x="765" y="140" transform="scale(.1)" fill="#333" textLength="550">arnekeller</text></g></svg>

static/assets/Gitea.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="39" height="20" role="img" aria-label="Gitea"><title>Gitea</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="39" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="0" height="20" fill="#555"/><rect x="0" width="39" height="20" fill="#555"/><rect width="39" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="195" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">Gitea</text><text x="195" y="140" transform="scale(.1)" fill="#fff" textLength="290">Gitea</text></g></svg>

static/assets/gitea.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
+<g>
+	<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
+	<g>
+		<g>
+			<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
+			<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z"/>
+		</g>
+	</g>
+</g>
+</svg>

static/assets/github.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="#24292E"/>
+</svg>

static/assets/gitlab.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg1608"
+   width="32"
+   height="32"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1597">
+    <style
+       id="style1595">.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style>
+  </defs>
+  <g
+     id="LOGO"
+     transform="matrix(0.16662022,0,0,0.16662022,-15.657843,-15.659503)">
+    <path
+       class="cls-1"
+       d="m 282.83,170.73 -0.27,-0.69 -26.14,-68.22 a 6.81,6.81 0 0 0 -2.69,-3.24 7,7 0 0 0 -8,0.43 7,7 0 0 0 -2.32,3.52 l -17.65,54 h -71.47 l -17.65,-54 a 6.86,6.86 0 0 0 -2.32,-3.53 7,7 0 0 0 -8,-0.43 6.87,6.87 0 0 0 -2.69,3.24 L 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.08,-56.04 z"
+       id="path1599" />
+    <path
+       class="cls-2"
+       d="m 282.83,170.73 -0.27,-0.69 a 88.3,88.3 0 0 0 -35.15,15.8 L 190,229.25 c 19.55,14.79 36.57,27.64 36.57,27.64 l 40.06,-30 0.1,-0.08 a 48.56,48.56 0 0 0 16.1,-56.08 z"
+       id="path1601" />
+    <path
+       class="cls-3"
+       d="m 153.43,256.89 19.7,14.91 12,9.06 a 8.07,8.07 0 0 0 9.76,0 l 12,-9.06 19.7,-14.91 c 0,0 -17.04,-12.89 -36.59,-27.64 -19.55,14.75 -36.57,27.64 -36.57,27.64 z"
+       id="path1603" />
+    <path
+       class="cls-2"
+       d="M 132.58,185.84 A 88.19,88.19 0 0 0 97.44,170 l -0.26,0.69 a 48.54,48.54 0 0 0 16.1,56.1 l 0.09,0.07 0.24,0.17 39.82,29.82 c 0,0 17,-12.85 36.57,-27.64 z"
+       id="path1605" />
+  </g>
+</svg>

static/main.css

@@ -40,19 +40,58 @@ main {
 	padding-top: 0.5em;
 }
 
-img.activity-favicon {
+img.activity-favicon, img.activity-favicon-transparent {
 	width: 1em;
 }
 
-ul.hide-decoration {
+ul.hide-decoration, ul.nopad {
 	padding-left: 0px;
 }
 
+ul.nopad {
+	margin-bottom: 0px;
+}
+
 li.hide-decoration {
 	list-style-type: none;
 	padding-bottom: .4em;
 }
 
+#card-container {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	row-gap: 1em;
+	justify-items: center;
+}
+
+.card {
+	background-color: #eeebe4;
+	border: 2px solid #dcb900;
+	border-radius: 5px;
+	width: 300px;
+	padding: 0.5em;
+}
+
+.card-image {
+	width: 300px;
+	max-height: 150px;
+}
+
+@media screen and (min-width: 1010px)  {
+	.card, .card-image {
+		width: 450px;
+	}
+	.card-image {
+		max-height: 225px;
+	}
+}
+
+@media screen and (max-width: 710px)  {
+	#card-container {
+		grid-template-columns: repeat(1, 1fr);
+	}
+}
+
 @media print {
 	body {
 		background-color: white;
@@ -64,16 +103,21 @@ li.hide-decoration {
 		color: #fff;
 		background-color: #000;
 	}
+	main {
+		background-color: #222;
+		--background-color: #222;
+	}
+	.card {
+		background-color: #333;
+		--background-color: #333;
+		border: 2px solid rebeccapurple;
+	}
 	a {
 		color: #aaf;
 	}
 	a:visited {
 		color: #faf;
 	}
-	main {
-		background-color: #222;
-		--background-color: #222;
-	}
 	.white-svg, .activity-favicon {
 		filter: invert();
 	}

templates/base.html

@@ -19,7 +19,7 @@
 	<a href="https://git.fliegendewurst.eu/explore/repos"><img src="/assets/Gitea.svg"></a>
 	<br>
   <small>
-    © FliegendeWurst, 2022-2023.
+    © FliegendeWurst, 2022-2023 (excluding evident exceptions).
     Source: <a href="https://github.com/FliegendeWurst/fliegendewurst.eu">github.com/FliegendeWurst/fliegendewurst.eu</a>.
     <br>
     This work is licensed under a

templates/index.html

@@ -15,14 +15,49 @@
 	<li><a href="https://gist.github.com/FliegendeWurst/6548c71a0f21a60183dbdd2bb7be16db">Repairing the filesystem on my TV's hard disk</a></li>
 </ul>
 
-Projects
+<p>Projects</p>
+
+<div id="card-container">
+	<div class="card">
+		<img class="card-image" src="/assets/header_qwörtle.png" alt="screenshot of Qwörtle game">
+		<h2>Qwörtle</h2>
+		German version of <a href="https://www.quordle.com/">Quordle</a>.
+		<ul class="nopad">
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/gitea.svg"> <small><a href="https://git.fliegendewurst.eu/arnekeller/qw%C3%B6rtle">Repository</a></small></li>
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/Exquisite-opera.png"> <small><a href="/qwörtle/">Web</a></small></li>
+		</ul>
+	</div>
+	<div class="card">
+		<img class="card-image" src="/assets/header_YT.jpg" alt="screenshot of YT with less distractions">
+		<h2>Youtube Addiction Control</h2>
+		Firefox extension to hide various UI elements on Youtube.
+		<ul class="nopad">
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/gitlab.svg"> <small><a href="https://gitlab.com/arnekeller/yt-addiction-control">Repository</a></small></li>
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/Exquisite-opera.png"> <small><a href="https://addons.mozilla.org/en-US/firefox/addon/youtube-addiction-control/">Mozilla Addons</a></small></li>
+		</ul>
+	</div>
+	<div class="card">
+		<img class="card-image" src="/assets/header_KV.jpg" alt="example KV diagram">
+		<h2>kv</h2>
+		CLI/web tool to generate DMF/KMF based on a <a href="https://en.wikipedia.org/wiki/Karnaugh_map">KV diagram</a>.
+		<ul class="nopad">
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/gitlab.svg"> <small><a href="https://gitlab.kit.edu/uskyk/kv">Repository</a></small></li>
+		<li class="hide-decoration"><img alt="" class="activity-favicon-transparent pure-img" src="/assets/Exquisite-opera.png"> <small><a href="/kv/">Web</a></small></li>
+		</ul>
+	</div>
+	<div class="card">
+		<img class="card-image" src="/assets/header_ILIAS.jpg" alt="ILIAS logo next to donkey">
+		<h2>KIT-ILIAS-downloader</h2>
+		CLI tool to download files from <a href="https://www.kit.edu/">KIT</a>'s e-learning site.
+		<p>Definitely not a horse.</p>
+		<ul class="nopad">
+		<li class="hide-decoration"><img alt="" class="activity-favicon pure-img" src="/assets/github.svg"> <small><a href="https://github.com/FliegendeWurst/KIT-ILIAS-downloader">Repository</a></small></li>
+		</ul>
+	</div>
+</div>
+
 <ul>
-<li> <a href="https://fliegendewurst.eu/qw%C3%B6rtle/">Qwörtle</a>, a German version of Quordle</li>
-<li> <a href="https://github.com/FliegendeWurst/KIT-ILIAS-downloader">KIT-ILIAS-downloader</a>, a tool to download files from the KIT's e-learning site </li>
-<li> <a href="https://gitlab.com/arnekeller/yt-addiction-control">YT addiction control</a> (<a href="https://addons.mozilla.org/en-US/firefox/addon/youtube-addiction-control/">download</a>), Firefox extension to reduce Youtube's addiction potential by hiding video suggestions </li>
 <li> <a href="{{ get_url(path='@/blog/raspberry-pi-temperature-monitoring.md') }}">raspi-oled</a>, a clock/calendar/temperature display built using a Raspberry Pi </li>
-<li> <a href="https://gitlab.kit.edu/uskyk/kv">kv</a>, a small CLI tool / web app to create <a href="https://en.wikipedia.org/wiki/Karnaugh_map">KV diagrams</a> (<a href="https://fliegendewurst.eu/kv/">try it online!</a>) </li>
-<li> <a href="https://github.com/FliegendeWurst/telegram_notes_bot">telegram_notes_bot</a>, a Telegram bot to interact with a <a href="https://github.com/zadam/trilium">Trilium Notes</a> database (reminders, todos, etc.) </li>
 <li> <a href="https://github.com/FliegendeWurst/ripgrep-all/tree/mail-adapter">mail adapter</a> for ripgrep-all, really convenient to search mails <i>and</i> their attachments </li>
 <li> <a href="https://github.com/FliegendeWurst/naviki-gpx-download">Naviki GPX downloader</a>, to download all recorded tracks </li>
 <li> <a href="https://github.com/FliegendeWurst/borg-homedir-excludes">borg-homedir-excludes</a>, a list of cache/trash directories that are not worth backing up </li>
@@ -33,6 +68,7 @@ Projects
 <li> <a href="https://gitlab.com/arnekeller/symlink-dupes">symlink-dupes</a>, creates symbolic links for equal files in a directory </li>
 <li> <a href="https://gitlab.com/arnekeller/kwin-toggle-window">kwin-toggle-window</a>, toggle visibility of a specific window with a hotkey </li>
 <li> <a href="https://gitlab.com/arnekeller/microsoft-ergonomic-keyboard">microsoft-ergonomic-keyboard</a>, a small kernel module to re-interpret one of the keys on my keyboard </li>
+<li> <a href="https://github.com/FliegendeWurst/telegram_notes_bot">telegram_notes_bot</a>, a Telegram bot to interact with a <a href="https://github.com/zadam/trilium">Trilium Notes</a> database (reminders, todos, etc.) </li>
 <li> <a href="https://github.com/FliegendeWurst/bwinf.35.1">bwinf.35.1</a>, my solutions to a computer science contest </li>
 <li> Minecraft mods: <ul>
 <li> <a href="https://github.com/FliegendeWurst/ServerTPS">ServerTPS</a>, displays server TPS estimate and client threads status </li>
@@ -40,7 +76,7 @@ Projects
 </ul>
 </ul>
 
-Recent activity:
+Recent activity
 <ul class="hide-decoration">
 {% set data = load_data(path="activity.json") %}
 {% set printed = 0 %}