-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
103 lines (101 loc) · 6.78 KB
/
Copy pathindex.html
File metadata and controls
103 lines (101 loc) · 6.78 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Explainer examples</title>
<meta name="description" content="Webpages and slide decks built with the html-explainer skill — self-contained, source-grounded, interactive explainers.">
<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=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
--paper:#f7f5ef; --card:#fffdf9; --ink:#1a1916; --ink-soft:#56514a; --ink-faint:#8a8478;
--line:#e0dbd0; --line-strong:#c8c1b3; --accent:#9a5b2a;
--display:"Newsreader",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
--mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:0 28px}
header{padding:80px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;display:flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--accent)}
h1{font-family:var(--display);font-weight:500;font-size:clamp(38px,6vw,62px);letter-spacing:-.02em;line-height:1.05;margin:0 0 1rem}
.lede{font-size:clamp(18px,2vw,21px);color:var(--ink-soft);max-width:60ch;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:18px 0 12px}
a.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line-strong);border-radius:14px;padding:26px 28px;transition:transform .15s,box-shadow .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.07);border-color:var(--accent)}
a.card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){a.card{transition:none}a.card:hover{transform:none}}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:14px}
.card h2{font-family:var(--display);font-weight:500;font-size:25px;margin:0 0 .4rem;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--ink-soft);margin:0 0 16px;flex:1}
.card .go{font-size:13.5px;font-weight:600;color:var(--accent)}
footer{border-top:1px solid var(--line);padding:30px 0 60px;color:var(--ink-faint);font-size:13.5px}
footer a{color:var(--accent)}
</style>
</head>
<body>
<header><div class="wrap">
<p class="eyebrow">Examples</p>
<h1>Interactive explainers</h1>
<p class="lede">Webpages and slide decks built with the <a href="https://github.com/ds-vibe/html-explainer" style="color:var(--accent)">html-explainer</a> skill. Each is self-contained, source-grounded and interactive. Use the “<strong>Review & edit</strong>” button to add changes and comments.</p>
</div></header>
<main class="wrap">
<div class="grid" style="padding-top:40px">
<a class="card" href="./examples/auroras.html">
<span class="tag">Atmospheric physics</span>
<h2>Auroras: The Northern Lights</h2>
<p>Charged particles from the Sun, steered down the magnetic field, make the air glow. With a storm dial that widens the auroral oval, an altitude cross-section that shows why height decides the colour, and a four-question quiz.</p>
<span class="go">Open the explainer →</span>
</a>
<a class="card" href="./examples/gutenberg.html">
<span class="tag">History · slide deck</span>
<h2>Gutenberg’s printing press</h2>
<p>How Gutenberg's press worked — movable type, the hand mold, the ink, the press — and why it broke the Church's monopoly on knowledge.</p>
<span class="go">Open the deck →</span>
</a>
<a class="card" href="./examples/doppler.html">
<span class="tag">Physics</span>
<h2>The Doppler effect</h2>
<p>Why a siren rises then drops as it passes — pitch is an arrival rate, and a moving source bunches the waves ahead and stretches them behind. With a live wavefront sim and a speed-to-pitch slider.</p>
<span class="go">Open the explainer →</span>
</a>
<a class="card" href="./examples/film-noir.html">
<span class="tag">Film · slide deck</span>
<h2>Film noir: the grammar of shadow</h2>
<p>How to read a film-noir frame: low-key light, venetian-blind bars, the canted angle, and the doomed voiceover. With a light-lab that splits a face into shadow, a tilt-and-bars composer, and an annotated frame to decode.</p>
<span class="go">Open the deck →</span>
</a>
<a class="card" href="./examples/ai-act.html">
<span class="tag">Policy</span>
<h2>The EU AI Act</h2>
<p>How Europe's AI law works — the four risk tiers, the fines, and the post-Omnibus 2026 timeline. With a risk pyramid, an eight-system classifier, a worked high-risk compliance example, and a live fines calculator.</p>
<span class="go">Open the explainer →</span>
</a>
<a class="card" href="./examples/fair-use.html">
<span class="tag">Law · slide deck</span>
<h2>What "fair use" actually means</h2>
<p>A four-factor balancing test decided case by case, with no word count or 10% rule. The landmark cases, the Warhol recalibration, and a scenario tool that scores your read against the courts.</p>
<span class="go">Open the deck →</span>
</a>
<a class="card" href="./examples/fractional-reserve.html">
<span class="tag">Economics</span>
<h2>How fractional reserve banking works</h2>
<p>Banks keep a sliver of your deposit and lend the rest, and that lending creates most of the broad money in the economy. With a live ledger, the money multiplier, and where the textbook model breaks down.</p>
<span class="go">Open the explainer →</span>
</a>
<a class="card" href="./examples/iso-vs-nso.html">
<span class="tag">Equity comp · slide deck</span>
<h2>ISO vs. NSO stock options</h2>
<p>Both give a startup employee the same right — buy shares at a fixed strike. The difference is when the IRS taxes the spread, and at what rate. With a four-slider exercise-and-sale calculator, a two-clock holding-period demo, and the 2026 AMT numbers.</p>
<span class="go">Open the deck →</span>
</a>
</div>
</main>
<footer><div class="wrap">
Built with the <a href="https://github.com/ds-vibe/html-explainer">html-explainer</a> skill · <a href="./LICENSE">MIT</a>
</div></footer>
</body>
</html>