Brendan Chen
b61cb986f1
Foundation + chrome for the bchen.dev static sites: design tokens, Spectral / Helvetica / IBM Plex Mono type, base + .prose typography, data-driven nav + footer, and prefers-color-scheme + [data-theme] dark mode with a pre-paint init. Colors are overridable CSS custom properties (defaults = newerror's palette); each site sets only its own colors.css. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01C96hwEU9cM7mJpqATiv7R5
40 lines
2.0 KiB
HTML
40 lines
2.0 KiB
HTML
{%- comment -%}
|
|
static-design-system — head.html
|
|
Shared contents of <head>. The consuming site wraps it:
|
|
<head>{% include ds/head.html %} ...site-specific tags... </head>
|
|
Expects site.title, site.description, site.author, site.url.
|
|
Loads the fonts, the shared CSS (/assets/ds.css), then the site's color
|
|
overrides (/assets/colors.css) — order matters — and inlines the pre-paint
|
|
theme script to avoid a flash.
|
|
{%- endcomment -%}
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<title>{{ page.title | default: site.title }}</title>
|
|
<meta name="description" content="{{ page.description | default: site.description }}" />
|
|
<meta name="author" content="{{ site.author }}" />
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="{{ page.title | default: site.title }}" />
|
|
<meta property="og:description" content="{{ page.description | default: site.description }}" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="{{ site.url }}{{ page.url | default: '/' }}" />
|
|
<meta property="og:site_name" content="{{ site.title }}" />
|
|
<meta property="og:locale" content="en_US" />
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="{{ page.title | default: site.title }}" />
|
|
<meta name="twitter:description" content="{{ page.description | default: site.description }}" />
|
|
|
|
<!-- Fonts: Spectral (serif) + IBM Plex Mono. Helvetica sans is a system font. -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Shared design system, then site color overrides (order matters). -->
|
|
<link rel="stylesheet" href="/assets/ds.css" />
|
|
<link rel="stylesheet" href="/assets/colors.css" />
|
|
|
|
<!-- Pre-paint theme (avoids flash-of-wrong-theme) -->
|
|
<script>{% include ds/theme-init.js %}</script>
|