1346f7a40c
Third theme template scoped to :root[data-template="cosmos"], joining editorial and swiss. Set "theme.template": "cosmos" in links.json to activate. Background — full-viewport WebGL fragment shader running a 5-octave warped fBm nebula in indigo/violet/magenta/cyan, with a two-layer procedural starfield (small dense + sparse blue-white halo) twinkling on independent phases. Pointer-tracking gravity well subtly perturbs sampling around the cursor. Pixel ratio capped at 1.5x for fill-rate; loop pauses on visibility change. UI — Orbitron display + Geist body, glassmorphic cards with backdrop-filter, conic-gradient holographic borders driven by @property --cosmos-hue rotating on hover, gradient-clip section numbers and project titles, chromatic-split hero last name on hover (::before + ::after pseudos with mix-blend-mode screen using a data-text attr), glowing drift-orb in place of the editorial asterism, animated section-head accent line. Fallbacks — prefers-reduced-motion or WebGL-unavailable triggers the .cosmos-static class with a CSS-only radial-gradient nebula and all heavy animations disabled. Always-dark regardless of theme toggle. README documents the new template; links.example.json unchanged.
56 lines
2.7 KiB
HTML
56 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="auto" data-template="editorial">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="color-scheme" content="light dark">
|
|
<meta name="description" content="Joel Brock — consulting technologist in Portland, OR. Links to my work in cooperative technology, projects, and video.">
|
|
|
|
<title>Links — index</title>
|
|
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<link rel="alternate icon" type="image/png" href="data:image/png;base64,">
|
|
|
|
<!-- Preconnect to font + favicon services for snappy first paint -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link rel="preconnect" href="https://www.google.com">
|
|
<link rel="preconnect" href="https://i.ytimg.com">
|
|
|
|
<!-- Editorial: Fraunces (variable serif) + Geist (refined sans) + Geist Mono
|
|
Swiss: Archivo (variable grotesque, near-Akzidenz/Univers) -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;900&family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..600,30..100,0..1&family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&family=Orbitron:wght@400;500;700;900&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
// Apply saved theme + template before paint to avoid flash
|
|
try {
|
|
var t = localStorage.getItem("dlstack-theme");
|
|
if (t === "light" || t === "dark") document.documentElement.dataset.theme = t;
|
|
var tpl = localStorage.getItem("dlstack-template");
|
|
if (tpl === "swiss" || tpl === "editorial" || tpl === "cosmos") document.documentElement.dataset.template = tpl;
|
|
} catch (e) {}
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
<link rel="stylesheet" href="assets/css/swiss.css">
|
|
<link rel="stylesheet" href="assets/css/cosmos.css">
|
|
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="Joel Brock — links">
|
|
<meta property="og:description" content="Consulting technologist in Portland, OR. Cooperative technology, projects, and video.">
|
|
<meta name="twitter:card" content="summary">
|
|
</head>
|
|
<body>
|
|
<a class="sr-only" href="#app">Skip to content</a>
|
|
<div class="shell" id="app">
|
|
<noscript>
|
|
<p style="color:var(--accent);font-family:var(--mono);padding:2rem;max-width:48ch">
|
|
JavaScript is required to render this page — it reads the link list from <code>data/links.json</code>.
|
|
Enable JavaScript and reload, or browse <a href="data/links.json">the raw data file</a>.
|
|
</p>
|
|
</noscript>
|
|
</div>
|
|
<script src="assets/js/app.js" defer></script>
|
|
</body>
|
|
</html>
|