m038andClaude Opus 4.8
d7a772ae02
- 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
38 lines
1.8 KiB
Twig
38 lines
1.8 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
|
|
{% do assets.addCss('theme://css/tokens.css') %}
|
|
{% do assets.addCss('theme://css/style.css') %}
|
|
{% do assets.addCss('theme://css-compiled/main.css') %}
|
|
{% do assets.addJs('theme://js/main.js', {group: 'bottom'}) %}
|
|
{% do assets.addJs('theme://js/nav.js', {group: 'bottom'}) %}
|
|
{% block map_assets %}{% endblock %}
|
|
{{ assets.css()|raw }}
|
|
{{ assets.js()|raw }}
|
|
</head>
|
|
<body class="{% if page.template == 'map' %}map-page{% endif %}{% if page.template == 'home' or page.template == 'trip' %} home-page{% endif %}{% if page.template == 'story' %} template-story{% endif %}">
|
|
<a class="skip-link" href="#main-content">Skip to main content</a>
|
|
<header class="site-header">
|
|
<a class="site-title" href="{{ base_url_absolute }}">into the east</a>
|
|
{% block nav %}
|
|
<button class="nav-toggle" type="button" aria-label="Open menu" aria-controls="site-nav" aria-expanded="false">
|
|
<span class="nav-toggle__bar"></span>
|
|
<span class="nav-toggle__bar"></span>
|
|
<span class="nav-toggle__bar"></span>
|
|
</button>
|
|
<nav class="site-nav" id="site-nav" aria-label="Main navigation">
|
|
<a href="{{ base_url_absolute }}"{% if page.template == 'home' %} aria-current="page"{% endif %}>Home</a>
|
|
<a href="{{ base_url_absolute }}/trips"{% if page.template == 'trips' %} aria-current="page"{% endif %}>Past Trips</a>
|
|
</nav>
|
|
{% endblock %}
|
|
</header>
|
|
<main class="site-main" id="main-content">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
{{ assets.js('bottom')|raw }}
|
|
</body>
|
|
</html>
|