From ecc303a289736fd6c569ce441502aec27c2dee64 Mon Sep 17 00:00:00 2001
From: Stefan Koelle <stefan.koelle@gmail.com>
Date: Sat, 15 Aug 2026 00:30:44 +0200
Subject: [PATCH] code.moonweb.org styling

---
 code/_data/repos.json | 2 +-
 code/index.njk        | 9 +++++----
 shared/base.css       | 4 +++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/code/_data/repos.json b/code/_data/repos.json
index fdbfab6..88e1e9f 100644
--- a/code/_data/repos.json
+++ b/code/_data/repos.json
@@ -131,7 +131,7 @@
     "summary": "These demos often showcased advanced graphics, sound, and programming techniques using Turbo Pascal and assembler."
   },
   {
-    "title": "Turbo Pascal X-LIB UNiT V0.3",
+    "title": "TurboPascal X-LIB UNiT",
     "emoji": "🎮",
     "category": "code",
     "subcategory": "Retro",
diff --git a/code/index.njk b/code/index.njk
index fd96091..e00fa7e 100644
--- a/code/index.njk
+++ b/code/index.njk
@@ -4,12 +4,12 @@ section: "code"
 description: "Curated catalog of my public GitHub projects — automation, dev tools, web apps, and firmware."
 layout: base.njk
 subcategories:
-  - "Web Projects"
   - "Smart Home Apps"
-  - "Infra Tools"
-  - "Dev Tools"
-  - "Retro"
   - "Maker Firmware"
+  - "Dev Tools"
+  - "Infra Tools"
+  - "Retro"
+  - "Web Projects"
 ---
 <p>A curated, sorted catalog of my public GitHub projects. Each card links
 directly to its repository.</p>
@@ -24,6 +24,7 @@ directly to its repository.</p>
         {% if repo.emoji %}<span class="card-emoji">{{ repo.emoji }}</span>{% endif %}
         <h3>{{ repo.title }}</h3>
         <p>{{ repo.summary }}</p>
+        {% if repo.stack %}<span class="card-stack">{{ repo.stack | join(", ") }}</span>{% endif %}
       </a>
       {% endif %}
     {% endfor %}
diff --git a/shared/base.css b/shared/base.css
index 168e425..9c48a82 100644
--- a/shared/base.css
+++ b/shared/base.css
@@ -66,11 +66,13 @@ main { max-width: 1100px; margin: 0 auto; padding: 2rem; }
   text-decoration: none;
   color: var(--text);
   transition: box-shadow 0.15s ease, transform 0.15s ease;
+  position: relative;
 }
 .card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); transform: translateY(-1px); }
-.card-emoji { font-size: 1.3rem; margin-right: 0.3rem; vertical-align: middle; }
+.card-emoji { position: absolute; top: 0.75rem; right: 0.85rem; font-size: 1.3rem; }
 .card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--accent); }
 .card p { margin: 0; font-size: 0.9rem; color: #555; }
+.card-stack { display: block; margin-top: 0.6rem; font-size: 0.75rem; color: #888; }
 
 .wip-badge {
   display: inline-block;