From 867f67e904444d41f86a8681ad59811c145110b7 Mon Sep 17 00:00:00 2001
From: Elias Kohout <elias@kohout.de>
Date: Wed, 18 Feb 2026 04:21:17 +0100
Subject: [PATCH] style: redesign article page layout and typography

---
 hugo/eliaskohout.de/assets/css/style.css      | 219 ++++++++++++++++--
 .../layouts/_default/single.html              |  33 +--
 2 files changed, 221 insertions(+), 31 deletions(-)

diff --git a/hugo/eliaskohout.de/assets/css/style.css b/hugo/eliaskohout.de/assets/css/style.css
index 7a06cd6..bd78563 100644
--- a/hugo/eliaskohout.de/assets/css/style.css
+++ b/hugo/eliaskohout.de/assets/css/style.css
@@ -100,7 +100,7 @@ svg {
 .page-content {
   position: relative;
   z-index: 1;
-  max-width: 800px;
+  max-width: 720px;
   margin: 4rem auto;
   padding: 0 2rem;
 }
@@ -111,6 +111,53 @@ svg {
   margin-bottom: 2rem;
 }
 
+/* ── Article Header ── */
+.article-header {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.article-header h1 {
+  font-size: 2.2rem;
+  letter-spacing: 1px;
+  line-height: 1.3;
+  margin: 0.5rem 0 1rem;
+}
+
+.article-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.85rem;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.meta-sep {
+  color: #444;
+}
+
+/* ── Article Footer ── */
+.article-footer {
+  margin-top: 4rem;
+  padding-top: 2rem;
+  padding-bottom: 4rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.article-footer a {
+  color: #888;
+  text-decoration: none;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+.article-footer a:hover {
+  color: #ff3c3c;
+}
+
 /* ── Project Grid ── */
 .project-grid {
   display: grid;
@@ -229,48 +276,186 @@ svg {
 
 /* ── Project Detail ── */
 .project-links {
-  margin: 1rem 0 2rem;
+  margin: 1rem 0 0;
+  display: flex;
+  gap: 1.5rem;
 }
 
 .project-links a {
   color: #ff3c3c;
   text-decoration: none;
-  margin-right: 1rem;
+  font-size: 0.9rem;
+  letter-spacing: 0.5px;
+  transition: opacity 0.2s;
 }
 
 .project-links a:hover {
-  text-decoration: underline;
+  opacity: 0.7;
 }
 
 .project-body {
-  line-height: 1.8;
-  color: #ddd;
+  line-height: 1.9;
+  color: #ccc;
+  font-size: 1.05rem;
 }
 
 .project-body h2 {
   color: #fff;
-  margin-top: 2rem;
-  font-size: 1.4rem;
-}
-
-/* ── Back Link ── */
-.back-link {
   margin-top: 3rem;
+  margin-bottom: 1rem;
+  font-size: 1.5rem;
+  letter-spacing: 0.5px;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-.back-link a {
-  color: #888;
+.project-body h3 {
+  color: #eee;
+  margin-top: 2.5rem;
+  margin-bottom: 0.8rem;
+  font-size: 1.2rem;
+}
+
+.project-body h4 {
+  color: #ddd;
+  margin-top: 2rem;
+  margin-bottom: 0.6rem;
+  font-size: 1.05rem;
+  letter-spacing: 0.5px;
+}
+
+.project-body p {
+  margin-bottom: 1.2rem;
+}
+
+.project-body a {
+  color: #ff3c3c;
   text-decoration: none;
+  border-bottom: 1px solid rgba(255, 60, 60, 0.3);
+  transition: border-color 0.2s;
+}
+
+.project-body a:hover {
+  border-color: #ff3c3c;
+}
+
+.project-body strong {
+  color: #fff;
+  font-weight: 600;
+}
+
+.project-body em {
+  color: #e0e0e0;
+}
+
+/* ── Code Blocks ── */
+.project-body code {
+  font-family: 'Geist Mono', monospace;
+  font-size: 0.88em;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  color: #e8e8e8;
+}
+
+.project-body pre {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 1.2rem 1.5rem;
+  overflow-x: auto;
+  margin: 1.5rem 0;
+  line-height: 1.6;
+}
+
+.project-body pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+  font-size: 0.85em;
+  color: #ccc;
+}
+
+/* ── Blockquotes ── */
+.project-body blockquote {
+  margin: 1.5rem 0;
+  padding: 0.8rem 1.5rem;
+  border-left: 3px solid #ff3c3c;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 0 8px 8px 0;
+  color: #aaa;
+  font-size: 0.95rem;
+}
+
+.project-body blockquote p {
+  margin: 0;
+}
+
+/* ── Tables ── */
+.project-body table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
   font-size: 0.9rem;
 }
 
-.back-link a:hover {
-  color: #ff3c3c;
+.project-body thead th {
+  text-align: left;
+  padding: 0.6rem 0.8rem;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
+  color: #fff;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.project-body tbody td {
+  padding: 0.5rem 0.8rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #bbb;
+}
+
+.project-body tbody tr:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+/* ── Horizontal Rules ── */
+.project-body hr {
+  border: none;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.08);
+  margin: 3rem 0;
+}
+
+/* ── Lists ── */
+.project-body ul, .project-body ol {
+  padding-left: 1.5rem;
+  margin-bottom: 1.2rem;
+}
+
+.project-body li {
+  margin-bottom: 0.4rem;
+}
+
+/* ── Grafana Embeds ── */
+.grafana-embed {
+  margin: 2rem 0;
+}
+
+.grafana-embed iframe {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
 }
 
 /* ── Responsive ── */
 @media (max-width: 600px) {
   .centered h1 { font-size: 2rem; }
-  .page-content { margin: 2rem auto; }
+  .page-content { margin: 2rem auto; padding: 0 1.2rem; }
   .project-grid { grid-template-columns: 1fr; }
+  .article-header h1 { font-size: 1.6rem; }
+  .project-body { font-size: 0.95rem; }
+  .project-body pre { padding: 1rem; }
+  .project-body table { font-size: 0.8rem; }
 }
diff --git a/hugo/eliaskohout.de/layouts/_default/single.html b/hugo/eliaskohout.de/layouts/_default/single.html
index e37b3a7..4911351 100644
--- a/hugo/eliaskohout.de/layouts/_default/single.html
+++ b/hugo/eliaskohout.de/layouts/_default/single.html
@@ -2,25 +2,30 @@
   {{- partial "background.html" . -}}
 
   <main class="page-content">
-    <h1>{{ .Title }}</h1>
-
-    <p class="tags">
-      {{ range .Params.tags }}
-        <span class="tag">{{ . }}</span>
-      {{ end }}
-    </p>
-
-    <div class="project-links">
-      {{ with .Params.code }}<a href="{{ . }}">[Code]</a>{{ end }}
-      {{ with .Params.demo }}<a href="{{ . }}">[Live Demo]</a>{{ end }}
-    </div>
+    <header class="article-header">
+      <div class="article-meta">
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
+        <span class="meta-sep">·</span>
+        <span>{{ math.Round (div (countwords .Content) 200.0) }} min read</span>
+      </div>
+      <h1>{{ .Title }}</h1>
+      <p class="tags">
+        {{ range .Params.tags }}
+          <span class="tag">{{ . }}</span>
+        {{ end }}
+      </p>
+      <div class="project-links">
+        {{ with .Params.code }}<a href="{{ . }}">Code ↗</a>{{ end }}
+        {{ with .Params.demo }}<a href="{{ . }}">Live Demo ↗</a>{{ end }}
+      </div>
+    </header>
 
     <article class="project-body">
       {{ .Content }}
     </article>
 
-    <div class="back-link">
+    <footer class="article-footer">
       <a href="/projects/">← all projects</a>
-    </div>
+    </footer>
   </main>
 {{ end }}