From c33dc2ca565c9c94a0c4ba3ed88dd0930ee0fc3a Mon Sep 17 00:00:00 2001 From: Mischa Date: Thu, 18 Jun 2026 14:19:58 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20redesign=20site=20header=20=E2=80=94=20?= =?UTF-8?q?accent=20bar,=20DM=20Serif=20title,=20sticky,=20active=20nav?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- themes/intotheeast/css/style.css | 54 +++++++++++++++++++ .../templates/partials/base.html.twig | 10 ++-- 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index ace9840..87dd0bc 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -19,6 +19,60 @@ body { .site-main { padding: var(--space-10) var(--space-6); } } +/* ── Header ──────────────────────────────────────────────────────────────────── */ + +.site-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--space-5); + height: var(--site-header-height); + background: var(--color-canvas); + border-top: 3px solid var(--color-accent); + border-bottom: 1px solid var(--color-border); + position: sticky; + top: 0; + z-index: 100; +} + +.site-title { + font-family: var(--font-display); + font-size: var(--text-lg); + font-weight: 400; + letter-spacing: -0.01em; + text-decoration: none; + color: var(--color-ink); + line-height: 1; +} + +.site-nav { + display: flex; + align-items: center; + gap: var(--space-1); +} + +.site-nav a { + font-family: var(--font-ui); + font-size: var(--text-sm); + font-weight: 500; + color: var(--color-ink-2); + text-decoration: none; + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-sm); + min-height: 44px; + display: inline-flex; + align-items: center; + transition: color 0.15s, background 0.15s; +} + +.site-nav a:hover { color: var(--color-ink); background: var(--color-paper); } +.site-nav a[aria-current="page"] { color: var(--color-accent); font-weight: 600; } + +@media (max-width: 380px) { + .site-title { font-size: var(--text-md); } + .site-nav a { padding: var(--space-2); font-size: 0.8rem; } +} + /* ── Feed ──────────────────────────────────────────────────────────────────── */ .feed { display: flex; flex-direction: column; gap: 2rem; } diff --git a/themes/intotheeast/templates/partials/base.html.twig b/themes/intotheeast/templates/partials/base.html.twig index 25c5b92..539be3d 100644 --- a/themes/intotheeast/templates/partials/base.html.twig +++ b/themes/intotheeast/templates/partials/base.html.twig @@ -12,11 +12,11 @@
- {{ site.title }} -