From e732b9d96e54976fe85490cfc97e8e600215927f Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Fri, 3 Apr 2026 13:53:27 +0300
Subject: [PATCH] fix: nav menu, language dropdown, sidebar TOC + recent
 articles

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 layouts/_default/baseof.html            |  36 +++---
 layouts/_default/single.html            | 149 +++++++++++++++---------
 layouts/partials/language-switcher.html |  26 ++++-
 3 files changed, 134 insertions(+), 77 deletions(-)
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b687b4e..76003c5 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -13,42 +13,46 @@
   {{/* Main stylesheet with Newsreader + custom colors */}}
   <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
 </head>
-<body class="bg-ifk-bg text-ifk-text">
-  <header class="border-b bg-white sticky top-0 z-40">
-    <nav class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
-      <a href="{{ "/" | relLangURL }}" class="font-newsreader text-xl font-semibold text-ifk-text hover:text-ifk-accent">
+<body style="background-color:var(--ifk-bg);color:var(--ifk-text)">
+  <header style="border-bottom:1px solid #e5e7eb;background:white;position:sticky;top:0;z-index:40">
+    <nav style="max-width:64rem;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center">
+      <a href="{{ "/" | relLangURL }}" style="font-family:var(--ifk-font);font-size:1.35rem;font-weight:600;color:var(--ifk-text);text-decoration:none">
         {{ .Site.Title }}
       </a>
-      {{ partial "language-switcher.html" . }}
+      <div style="display:flex;align-items:center;gap:1.5rem;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem">
+        {{ range .Site.Menus.main }}
+          {{ if ne .Identifier "locale" }}
+          <a href="{{ .URL | relLangURL }}" style="color:#4b5563;text-decoration:none">{{ .Name }}</a>
+          {{ end }}
+        {{ end }}
+        {{ partial "language-switcher.html" . }}
+      </div>
     </nav>
   </header>
 
-  <main class="flex-1">
+  <main style="flex:1">
     {{ block "main" . }}{{ end }}
   </main>
 
-  <footer class="border-t bg-white mt-20">
-    <div class="max-w-4xl mx-auto px-4 py-12">
-      <div class="grid grid-cols-2 md:grid-cols-3 gap-8 mb-12">
+  <footer style="border-top:1px solid #e5e7eb;background:white;margin-top:5rem">
+    <div style="max-width:64rem;margin:0 auto;padding:3rem 1rem">
+      <div style="display:flex;gap:2rem;flex-wrap:wrap;margin-bottom:2rem">
         {{ range .Site.Menus.footer }}
-        <a href="{{ .URL | relLangURL }}" class="text-gray-600 hover:text-ifk-accent">
+        <a href="{{ .URL | relLangURL }}" style="color:#6b7280;text-decoration:none;font-family:system-ui,sans-serif;font-size:0.875rem">
           {{ .Name }}
         </a>
         {{ end }}
       </div>
-      <div class="border-t pt-8 text-center text-sm text-gray-600">
-        <p class="mb-2">
-          © {{ now.Year }} {{ .Site.Title }}. A publication by <a href="https://www.agiliton.eu" class="text-ifk-accent hover:text-ifk-accent-hover">Agiliton</a>.
+      <div style="border-top:1px solid #e5e7eb;padding-top:2rem;text-align:center;font-size:0.85rem;color:#6b7280;font-family:system-ui,sans-serif">
+        <p>
+          &copy; {{ now.Year }} {{ .Site.Title }}. A publication by <a href="https://www.agiliton.eu" style="color:var(--ifk-accent);text-decoration:none">Agiliton</a>.
         </p>
         {{ partial "extend-footer.html" . }}
       </div>
     </div>
   </footer>
 
-  {{/* Analytics */}}
   {{ partial "rybbit.html" . }}
-
-  {{/* SEO */}}
   {{ partial "structured-data.html" . }}
 </body>
 </html>
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 5b763d5..228379b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,63 +1,102 @@
 {{ define "main" }}
-<article class="prose-lg max-w-2xl mx-auto py-12 px-4">
-  <header class="mb-8">
-    <h1 class="text-4xl font-newsreader font-semibold mb-4 leading-tight">
-      {{ .Title }}
-    </h1>
-    <div class="text-gray-600 flex gap-4 flex-wrap">
-      {{ if .Date }}
-      <time datetime="{{ .Date.Format "2006-01-02" }}">
-        {{ .Date.Format "January 2, 2006" }}
-      </time>
-      {{ end }}
-      {{ with .Params.author }}
-      <span>{{ . }}</span>
-      {{ end }}
-      {{ if .ReadingTime }}
-      <span>{{ .ReadingTime }} min read</span>
+<div style="max-width:64rem;margin:0 auto;padding:3rem 1rem;display:grid;grid-template-columns:1fr 240px;gap:3rem">
+
+  {{/* Main article column */}}
+  <article>
+    <header style="margin-bottom:2rem">
+      <h1 style="font-family:var(--ifk-font);font-size:2.75rem;font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin-bottom:1rem">
+        {{ .Title }}
+      </h1>
+      <div style="color:#6b7280;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center">
+        {{ if .Date }}
+        <time datetime="{{ .Date.Format "2006-01-02" }}">
+          {{ .Date.Format "January 2, 2006" }}
+        </time>
+        {{ end }}
+        {{ with .Params.author }}
+        <span>{{ . }}</span>
+        {{ end }}
+        {{ if .ReadingTime }}
+        <span>{{ .ReadingTime }} min read</span>
+        {{ end }}
+      </div>
+
+      {{ with .Params.tags }}
+      <div style="margin-top:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap">
+        {{ range . }}
+        <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" style="font-family:system-ui,sans-serif;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ifk-accent);text-decoration:none;border:1px solid #e5e7eb;padding:0.2rem 0.6rem;border-radius:4px">
+          {{ . }}
+        </a>
+        {{ end }}
+      </div>
       {{ end }}
+    </header>
+
+    <div class="article-body" style="font-family:var(--ifk-font);font-size:1.375rem;line-height:1.65">
+      {{ .Content }}
     </div>
-  </header>
 
-  {{ if .Params.toc | default true }}
-  <aside class="mb-8 p-4 bg-gray-50 rounded">
-    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3">{{ i18n "table_of_contents" | default "Table of Contents" }}</h2>
-    {{ .TableOfContents }}
-  </aside>
-  {{ end }}
-
-  <div class="font-newsreader text-lg leading-relaxed prose prose-newsreader">
-    {{ .Content }}
-  </div>
-
-  {{ with .Params.tags }}
-  <footer class="mt-12 pt-8 border-t">
-    <div class="text-sm">
-      <span class="font-semibold">{{ i18n "tags" | default "Tags" }}:</span>
-      {{ range . }}
-      <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="inline-block mr-2 text-ifk-accent hover:text-ifk-accent-hover">
-        #{{ . }}
+    {{ if or .NextInSection .PrevInSection }}
+    <nav style="margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:1rem">
+      {{ with .PrevInSection }}
+      <a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text)">
+        <div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">&larr; {{ i18n "previous" | default "Previous" }}</div>
+        <div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
       </a>
       {{ end }}
-    </div>
-  </footer>
-  {{ end }}
-</article>
+      {{ with .NextInSection }}
+      <a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text);text-align:right">
+        <div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">{{ i18n "next" | default "Next" }} &rarr;</div>
+        <div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
+      </a>
+      {{ end }}
+    </nav>
+    {{ end }}
+  </article>
 
-{{ if or .NextInSection .PrevInSection }}
-<nav class="max-w-2xl mx-auto px-4 py-12 flex justify-between gap-4">
-  {{ with .PrevInSection }}
-  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-left">
-    <div class="text-xs font-semibold uppercase text-gray-600">← {{ i18n "previous" | default "Previous" }}</div>
-    <div class="font-newsreader text-lg">{{ .Title }}</div>
-  </a>
-  {{ end }}
-  {{ with .NextInSection }}
-  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-right">
-    <div class="text-xs font-semibold uppercase text-gray-600">{{ i18n "next" | default "Next" }} →</div>
-    <div class="font-newsreader text-lg">{{ .Title }}</div>
-  </a>
-  {{ end }}
-</nav>
-{{ end }}
+  {{/* Sidebar */}}
+  <aside style="font-family:system-ui,-apple-system,sans-serif">
+    {{/* Table of Contents */}}
+    {{ if .TableOfContents }}
+    <div style="position:sticky;top:5rem">
+      <h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.75rem">
+        {{ i18n "table_of_contents" | default "Contents" }}
+      </h3>
+      <div style="font-size:0.85rem;line-height:1.7;border-left:2px solid #e5e7eb;padding-left:0.75rem">
+        {{ .TableOfContents }}
+      </div>
+
+      {{/* Recent articles */}}
+      {{ $pages := where .Site.RegularPages "Section" .Section }}
+      {{ $recent := first 5 $pages }}
+      {{ if gt (len $recent) 1 }}
+      <h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-top:2rem;margin-bottom:0.75rem">
+        {{ i18n "recent_articles" | default "Recent" }}
+      </h3>
+      <div style="font-size:0.85rem;line-height:1.6">
+        {{ range $recent }}
+        {{ if ne .Permalink $.Permalink }}
+        <a href="{{ .Permalink }}" style="display:block;color:var(--ifk-text);text-decoration:none;padding:0.4rem 0;border-bottom:1px solid #f3f4f6">
+          {{ .Title }}
+        </a>
+        {{ end }}
+        {{ end }}
+      </div>
+      {{ end }}
+    </div>
+    {{ end }}
+  </aside>
+
+</div>
+
+<style>
+@media (max-width: 768px) {
+  div[style*="grid-template-columns:1fr 240px"] {
+    display: block !important;
+  }
+  div[style*="grid-template-columns:1fr 240px"] > aside {
+    display: none;
+  }
+}
+</style>
 {{ end }}
diff --git a/layouts/partials/language-switcher.html b/layouts/partials/language-switcher.html
index 180e36c..85b5856 100644
--- a/layouts/partials/language-switcher.html
+++ b/layouts/partials/language-switcher.html
@@ -1,9 +1,23 @@
 {{ if .IsTranslated }}
-<nav class="language-switcher" aria-label="Language">
-  {{ range .Translations }}
-  <a href="{{ .Permalink }}" lang="{{ .Language.Lang }}" hreflang="{{ .Language.Lang }}">
+<div class="lang-switch" style="position:relative">
+  <button onclick="this.parentElement.classList.toggle('open')" style="background:none;border:1px solid #e5e7eb;border-radius:6px;padding:0.35rem 0.75rem;cursor:pointer;font-family:system-ui,-apple-system,sans-serif;font-size:0.875rem;color:#4b5563;display:flex;align-items:center;gap:0.4rem">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" style="opacity:0.6"><path d="M4.545 6.714L4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/><path d="M0 2a2 2 0 012-2h7a2 2 0 012 2v3h3a2 2 0 012 2v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-3H2A2 2 0 010 9V2zm2-1A1 1 0 001 2v7a1 1 0 001 1h7a1 1 0 001-1V2A1 1 0 009 1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066 0 01-.415-.492 1.988 1.988 0 01-.94.31z"/></svg>
     {{ .Language.LanguageName }}
-  </a>
-  {{ end }}
-</nav>
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" style="opacity:0.5"><path d="M2 3.5L5 7l3-3.5H2z"/></svg>
+  </button>
+  <div class="lang-dropdown" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:white;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);overflow:hidden;min-width:140px;z-index:50">
+    <a href="{{ .Permalink }}" style="display:block;padding:0.5rem 1rem;font-size:0.875rem;font-family:system-ui,sans-serif;color:#4d7c0f;background:#f0fdf4;text-decoration:none;font-weight:500">
+      {{ .Language.LanguageName }} ✓
+    </a>
+    {{ range .Translations }}
+    <a href="{{ .Permalink }}" lang="{{ .Language.Lang }}" hreflang="{{ .Language.Lang }}" style="display:block;padding:0.5rem 1rem;font-size:0.875rem;font-family:system-ui,sans-serif;color:#374151;text-decoration:none">
+      {{ .Language.LanguageName }}
+    </a>
+    {{ end }}
+  </div>
+</div>
+<style>
+.lang-switch.open .lang-dropdown { display:block !important; }
+.lang-dropdown a:hover { background:#f9fafb; }
+</style>
 {{ end }}
