brendan/static-design-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial shared design system extracted from newerror

Browse Source 
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
This commit is contained in:
Brendan Chen
2026-06-30 21:20:21 -04:00
commit b61cb986f1
7 changed files with 584 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
nav.html Normal file
View File

@@ -0,0 +1,60 @@
{%- comment -%}
static-design-system — nav.html
Data-driven top navigation + mobile menu (chrome). Place inside a .shell.
Links come from site.data.nav (a list of { title, url }). An RSS link is
shown only if site.rss_url is set. The theme toggle and hamburger are always
present; behavior is wired by /assets/ds.js (ds/theme-toggle.js).
{%- endcomment -%}
<nav class="nav">
<a class="mast" href="/">{{ site.title }}</a>
<div class="nav-tools">
<div class="nav-links">
{%- for item in site.data.nav %}
<a href="{{ item.url }}"{% if page.url == item.url %} class="active"{% endif %}>{{ item.title }}</a>
{%- endfor %}
{%- if site.rss_url %}
<a class="iconbtn" href="{{ site.rss_url }}" title="RSS feed" aria-label="RSS feed"><svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="3.4" cy="12.6" r="1.55" fill="currentColor" />
<path d="M2.2 7.1a6.7 6.7 0 0 1 6.7 6.7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
<path d="M2.2 3.2a10.6 10.6 0 0 1 10.6 10.6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
</svg></a>
{%- endif %}
</div>
<button class="iconbtn theme-toggle" type="button" aria-label="Toggle color theme" title="Toggle theme">
<svg class="ico-moon" width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<path d="M13 9.4A5.4 5.4 0 0 1 6.6 3 5.6 5.6 0 1 0 13 9.4Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round" />
</svg>
<svg class="ico-sun" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="8" cy="8" r="3.1" stroke="currentColor" stroke-width="1.3" />
<line x1="8" y1="0.6" x2="8" y2="2.4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="8" y1="13.6" x2="8" y2="15.4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="0.6" y1="8" x2="2.4" y2="8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="13.6" y1="8" x2="15.4" y2="8" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="2.7" y1="2.7" x2="4" y2="4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="12" y1="12" x2="13.3" y2="13.3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="13.3" y1="2.7" x2="12" y2="4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
<line x1="4" y1="12" x2="2.7" y2="13.3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
</svg>
</button>
<button class="iconbtn hamburger" type="button" aria-label="Menu" aria-expanded="false">
<svg class="ico-bars" width="16" height="16" viewBox="0 0 16 16"><path d="M2 4.5h12M2 8h12M2 11.5h12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
<svg class="ico-close" width="16" height="16" viewBox="0 0 16 16"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
</button>
</div>
</nav>
<div class="mobile-menu">
{%- for item in site.data.nav %}
<a href="{{ item.url }}">{{ item.title }}</a>
{%- endfor %}
{%- if site.rss_url %}
<a class="row" href="{{ site.rss_url }}"><svg width="15" height="15" viewBox="0 0 16 16" fill="none" aria-hidden="true">
<circle cx="3.4" cy="12.6" r="1.55" fill="currentColor" />
<path d="M2.2 7.1a6.7 6.7 0 0 1 6.7 6.7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
<path d="M2.2 3.2a10.6 10.6 0 0 1 10.6 10.6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
</svg> <span>RSS feed</span></a>
{%- endif %}
</div>