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

feat(header): mobile hamburger menu + alignment & typography pass

Browse Source 
- Header: offset the 4px green ::before bar so content centres in the
  visible dark area, not the geometric box (fixes wordmark/nav/icon
  sitting ~2px high — the root cause behind the whole alignment saga)
- Mobile (≤768px): collapse nav into a slide-down hamburger panel
  (standalone js/nav.js); inline nav retained on desktop
- Nav: use the display serif in sentence case so it shares the
  wordmark's anatomy and aligns naturally (no optical nudge needed)
- Typography tokens: three-tier display tracking (--tracking-display,
  --tracking-display-sm), --tracking-caps, --color-error, paper-glass
  overlays, --text-story/--leading-story; applied across components
- trip-dates: move inline styles to a class

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BftDn9vu9SonFAY4vxu4uk
This commit is contained in:
m038
2026-06-27 18:54:56 +02:00
co-authored by Claude Opus 4.8
parent ac38ae2a54
commit d7a772ae02
5 changed files with 207 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/intotheeast/css/tokens.css
+22 -8
View File
@@ -13,25 +13,39 @@
--color-accent-on: #FFFFFF; /* text on accent surfaces */
--color-surface-raised: #2A2720; /* elevated surfaces: tooltips, hover */
--color-ink-inverse: #17171A; /* text on accent-coloured buttons */
--color-error: #c0392b; /* validation errors, form error status */
/* ── Glass overlays (paper colour at opacity, for story components) ── */
--color-paper-glass-low: color-mix(in srgb, var(--color-paper) 8%, transparent);
--color-paper-glass-mid: color-mix(in srgb, var(--color-paper) 25%, transparent);
--color-paper-glass-high: color-mix(in srgb, var(--color-paper) 55%, transparent);
--color-paper-glass-hover: color-mix(in srgb, var(--color-paper) 80%, transparent);
/* ── Fonts ───────────────────────────────────────────────── */
--font-display: 'DM Serif Display', Georgia, serif;
--font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
/* ── Type scale ──────────────────────────────────────────── */
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.375rem;
--text-xl: 1.75rem;
--text-2xl: 2.25rem;
--text-3xl: 3rem;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-md: 1.125rem;
--text-lg: 1.375rem;
--text-xl: 1.75rem;
--text-2xl: 2.25rem;
--text-3xl: 3rem;
--text-story: 1.0625rem; /* long-form reading size: story body + scrolly steps */
/* ── Leading ─────────────────────────────────────────────── */
--leading-tight: 1.2;
--leading-snug: 1.35;
--leading-normal: 1.65;
--leading-story: 1.85; /* relaxed reading rhythm for story long-form */
/* ── Tracking ────────────────────────────────────────────── */
--tracking-caps: 0.07em; /* uppercase UI labels: dates, badges, sidebar headings */
--tracking-display: -0.015em; /* display headings: text-xl and text-2xl */
--tracking-display-sm: -0.01em; /* display headings: text-lg and smaller; site logotype */
/* ── Spacing (4px grid) ──────────────────────────────────── */
--space-1: 0.25rem;