code.moonweb.org styling

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",

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 %}

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;