m038/intotheeast-com-content
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign site header — accent bar, DM Serif title, sticky, active nav

Browse Source
This commit is contained in:
Mischa
2026-06-18 14:19:58 +02:00
parent 49f60a873a
commit c33dc2ca56
2 changed files with 59 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/style.css
+54
View File
@@ -19,6 +19,60 @@ body {
.site-main { padding: var(--space-10) var(--space-6); } .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 ──────────────────────────────────────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 2rem; } .feed { display: flex; flex-direction: column; gap: 2rem; }
themes/intotheeast/templates/partials/base.html.twig
+5 -5
View File
@@ -12,11 +12,11 @@
</head> </head>
<body class="{% if page.template == 'map' %}map-page{% endif %}"> <body class="{% if page.template == 'map' %}map-page{% endif %}">
<header class="site-header"> <header class="site-header">
<a class="site-title" href="{{ base_url_absolute }}">{{ site.title }}</a> <a class="site-title" href="{{ base_url_absolute }}">into the east</a>
<nav class="site-nav"> <nav class="site-nav" aria-label="Main navigation">
<a href="{{ base_url_absolute }}/tracker">Journal</a> <a href="{{ base_url_absolute }}/tracker"{% if page.url starts with '/tracker' or page.template == 'entry' %} aria-current="page"{% endif %}>Journal</a>
<a href="{{ base_url_absolute }}/map">Map</a> <a href="{{ base_url_absolute }}/map"{% if page.url starts with '/map' %} aria-current="page"{% endif %}>Map</a>
<a href="{{ base_url_absolute }}/stats">Stats</a> <a href="{{ base_url_absolute }}/stats"{% if page.url starts with '/stats' %} aria-current="page"{% endif %}>Stats</a>
</nav> </nav>
</header> </header>
<main class="site-main"> <main class="site-main">