@agentic-design-kits/verdigris 0.0.0-stage → 2026.1113.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/COMPONENTS.md +997 -0
- package/DESIGN.md +225 -0
- package/LICENSE +21 -0
- package/README.md +73 -2
- package/fonts/Cormorant-LICENSE.txt +93 -0
- package/fonts/Cormorant-Light.woff2 +0 -0
- package/fonts/Cormorant-LightItalic.woff2 +0 -0
- package/fonts/Cormorant-Medium.woff2 +0 -0
- package/fonts/Cormorant-MediumItalic.woff2 +0 -0
- package/fonts/Cormorant-SemiBold.woff2 +0 -0
- package/fonts/Cormorant-SemiBoldItalic.woff2 +0 -0
- package/kit/astro/BaseLayout.astro +31 -0
- package/kit/astro/Mark.astro +25 -0
- package/kit/astro/Rosette.astro +31 -0
- package/kit/astro/font.ts +2 -0
- package/kit/example.html +186 -0
- package/kit/fonts.css +50 -0
- package/kit/shared/astro/BottomBar.ts +2 -0
- package/kit/shared/astro/CardGrid.ts +2 -0
- package/kit/shared/astro/Cta.ts +2 -0
- package/kit/shared/astro/Dialog.ts +2 -0
- package/kit/shared/astro/Drawer.ts +2 -0
- package/kit/shared/astro/DrawerButton.ts +2 -0
- package/kit/shared/astro/Ellipse.ts +2 -0
- package/kit/shared/astro/FavoriteButton.ts +2 -0
- package/kit/shared/astro/FeaturesList.ts +2 -0
- package/kit/shared/astro/FilePicker.ts +2 -0
- package/kit/shared/astro/Footer.ts +2 -0
- package/kit/shared/astro/Hero.ts +2 -0
- package/kit/shared/astro/IconTemplates.ts +2 -0
- package/kit/shared/astro/MenuButton.ts +2 -0
- package/kit/shared/astro/MenuItems.ts +2 -0
- package/kit/shared/astro/MenuPanel.ts +2 -0
- package/kit/shared/astro/NumCircle.ts +2 -0
- package/kit/shared/astro/OutputPanel.ts +2 -0
- package/kit/shared/astro/PageTitle.ts +2 -0
- package/kit/shared/astro/Pager.ts +2 -0
- package/kit/shared/astro/PostFeature.ts +2 -0
- package/kit/shared/astro/PostHeader.ts +2 -0
- package/kit/shared/astro/PostList.ts +2 -0
- package/kit/shared/astro/PostNav.ts +2 -0
- package/kit/shared/astro/SummaryList.ts +2 -0
- package/kit/shared/astro/ThemeToggle.ts +2 -0
- package/kit/shared/dialog.ts +2 -0
- package/kit/shared/drawer.ts +2 -0
- package/kit/shared/favorites.ts +2 -0
- package/kit/shared/file-pick.ts +2 -0
- package/kit/shared/icon-controls.ts +2 -0
- package/kit/shared/jump.ts +2 -0
- package/kit/shared/marquee.ts +2 -0
- package/kit/shared/new-dot.ts +2 -0
- package/kit/shared/output.ts +2 -0
- package/kit/shared/panel.ts +2 -0
- package/kit/tailwind.css +24 -0
- package/kit/types.ts +3 -0
- package/kit/verdigris.css +177 -0
- package/package.json +62 -4
- package/tokens.json +618 -0
package/kit/example.html
ADDED
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Swiss Minimal example</title>
|
|
7
|
+
<!-- Swiss Minimal's files are read from its kit/, at the root of the repository. -->
|
|
8
|
+
<link rel="stylesheet" href="../../kit/theme.css">
|
|
9
|
+
<link rel="stylesheet" href="fonts.css">
|
|
10
|
+
<link rel="stylesheet" href="verdigris.css">
|
|
11
|
+
<script>
|
|
12
|
+
try { var t = localStorage.getItem('theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; } catch (e) {}
|
|
13
|
+
</script>
|
|
14
|
+
<style>
|
|
15
|
+
:root { --bar-h: 0rem; } /* this page has no fixed bottom bar */
|
|
16
|
+
/* Page-specific layout only. Everything else comes from theme.css. */
|
|
17
|
+
.bar { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid currentColor; padding: 0.75rem 0; }
|
|
18
|
+
.hero { padding: 3rem 0 4rem 0; }
|
|
19
|
+
.hero p { max-width: 28rem; margin: 2rem 0 0 0; }
|
|
20
|
+
.section { border-top: 2px solid var(--ink); padding-top: 0.75rem; margin-bottom: 4rem; }
|
|
21
|
+
.section-head { display: grid; grid-template-columns: 3rem 1fr; column-gap: 0.5rem; align-items: baseline; padding-bottom: 1.5rem; }
|
|
22
|
+
.section-head .num { padding-left: 0.5rem; }
|
|
23
|
+
.row { display: grid; grid-template-columns: 3rem 1fr 1.75rem; column-gap: 0.5rem; align-items: start; padding: 1rem 0; }
|
|
24
|
+
.row .num { padding-left: 1rem; } /* clear of the active row's 6px edge */
|
|
25
|
+
@media (min-width: 768px) { .row .num { padding-left: 1.25rem; } }
|
|
26
|
+
.page-acc { margin-bottom: 2.5rem; }
|
|
27
|
+
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin: 1rem 0 3rem 0; }
|
|
28
|
+
.sw { padding: 1rem; border: 1px solid var(--rule); font-size: 0.875rem; }
|
|
29
|
+
.sw b { display: block; height: 2.5rem; margin-bottom: 0.5rem; border: 1px solid var(--rule); }
|
|
30
|
+
form { max-width: 28rem; background: var(--bar); color: var(--bar-ink); padding: 1.5rem; margin-bottom: 4rem; }
|
|
31
|
+
form .btn { margin-top: 1.5rem; }
|
|
32
|
+
</style>
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<a class="skip-link" href="#main">Skip to main content</a>
|
|
36
|
+
<div class="topbar">
|
|
37
|
+
<div class="page">
|
|
38
|
+
<div class="bar">
|
|
39
|
+
<span class="small" style="font-weight:500">Swiss Minimal example</span>
|
|
40
|
+
<span style="display:flex;gap:0.5rem">
|
|
41
|
+
<button type="button" class="topbar-btn burger" data-panel-button aria-label="Menu" aria-expanded="false" aria-controls="panel"><i></i><i></i><i></i></button>
|
|
42
|
+
<button class="topbar-btn topbar-btn--text" id="toggle">
|
|
43
|
+
<span class="label-stack"><span id="toggle-label">Dark</span><span aria-hidden="true">Dark</span><span aria-hidden="true">Light</span></span>
|
|
44
|
+
</button>
|
|
45
|
+
</span>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div id="panel" class="panel" data-panel role="dialog" aria-modal="true" aria-label="Menu" aria-hidden="true" inert>
|
|
51
|
+
<div class="panel-inner">
|
|
52
|
+
<nav aria-label="Menu">
|
|
53
|
+
<ul class="menu-list">
|
|
54
|
+
<li><a class="menu-link" href="#" aria-current="page" data-panel-close>Home</a></li>
|
|
55
|
+
<li>
|
|
56
|
+
<details class="acc" name="menu">
|
|
57
|
+
<summary>Work <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
|
|
58
|
+
<div class="acc-body">
|
|
59
|
+
<ul class="submenu">
|
|
60
|
+
<li><a href="#europe" data-panel-close>Writing</a></li>
|
|
61
|
+
<li>
|
|
62
|
+
<details class="acc" name="menu-1">
|
|
63
|
+
<summary>Projects <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
|
|
64
|
+
<div class="acc-body">
|
|
65
|
+
<ul class="submenu">
|
|
66
|
+
<li><a href="#japan" data-panel-close>Current</a></li>
|
|
67
|
+
<li><a href="#korea" data-panel-close>Archive</a></li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</details>
|
|
71
|
+
</li>
|
|
72
|
+
<li><a href="#americas" data-panel-close>Talks</a></li>
|
|
73
|
+
</ul>
|
|
74
|
+
</div>
|
|
75
|
+
</details>
|
|
76
|
+
</li>
|
|
77
|
+
<li>
|
|
78
|
+
<details class="acc" name="menu">
|
|
79
|
+
<summary>About <span class="acc-icon" aria-hidden="true"><i></i><i></i></span></summary>
|
|
80
|
+
<div class="acc-body">
|
|
81
|
+
<ul class="submenu">
|
|
82
|
+
<li><a href="#story" data-panel-close>The story</a></li>
|
|
83
|
+
<li><a href="#credits" data-panel-close>Credits</a></li>
|
|
84
|
+
</ul>
|
|
85
|
+
</div>
|
|
86
|
+
</details>
|
|
87
|
+
</li>
|
|
88
|
+
<li><a class="menu-link" href="#contact" data-panel-close>Contact</a></li>
|
|
89
|
+
</ul>
|
|
90
|
+
</nav>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
|
|
94
|
+
<div data-panel-page>
|
|
95
|
+
<div class="page">
|
|
96
|
+
<main id="main" tabindex="-1">
|
|
97
|
+
<header class="hero">
|
|
98
|
+
<h1 class="display">Swiss<br>Minimal</h1>
|
|
99
|
+
<p class="lead">Flat color, thick rules, one typeface. Everything here is theme.css and nothing else.</p>
|
|
100
|
+
</header>
|
|
101
|
+
|
|
102
|
+
<div class="swatches" id="swatches"></div>
|
|
103
|
+
|
|
104
|
+
<details class="page-acc">
|
|
105
|
+
<summary>
|
|
106
|
+
<span><span class="page-acc-title">Filter by category</span><span class="page-acc-status" id="chip-status">All items</span></span>
|
|
107
|
+
<span class="acc-icon" aria-hidden="true"><i></i><i></i></span>
|
|
108
|
+
</summary>
|
|
109
|
+
<div class="page-acc-body chip-group" role="group" aria-label="Category">
|
|
110
|
+
<button type="button" class="chip" aria-pressed="true">All <span class="chip-count">3</span></button>
|
|
111
|
+
<button type="button" class="chip" aria-pressed="false">Writing <span class="chip-count">1</span></button>
|
|
112
|
+
<button type="button" class="chip" aria-pressed="false">Design & code <span class="chip-count">2</span></button>
|
|
113
|
+
</div>
|
|
114
|
+
</details>
|
|
115
|
+
|
|
116
|
+
<section class="section">
|
|
117
|
+
<div class="section-head">
|
|
118
|
+
<p class="num small muted" style="margin:0;font-weight:500">01–03</p>
|
|
119
|
+
<h2 class="h2">Selected work</h2>
|
|
120
|
+
</div>
|
|
121
|
+
<ul style="list-style:none;margin:0;padding:0">
|
|
122
|
+
<li class="row" data-active="true">
|
|
123
|
+
<span class="num small muted" style="font-weight:500">01</span>
|
|
124
|
+
<span><span class="title" style="display:block">Field notes</span><span class="small muted">Essay, 2026</span></span>
|
|
125
|
+
<span class="eq" aria-hidden="true"><i></i><i></i><i></i></span>
|
|
126
|
+
</li>
|
|
127
|
+
<li class="row">
|
|
128
|
+
<span class="num small muted" style="font-weight:500">02</span>
|
|
129
|
+
<span><span class="title" style="display:block">A type specimen</span><span class="small muted">Design, 2025</span></span>
|
|
130
|
+
<span></span>
|
|
131
|
+
</li>
|
|
132
|
+
<li class="row">
|
|
133
|
+
<span class="num small muted" style="font-weight:500">03</span>
|
|
134
|
+
<span><span class="title" style="display:block">Small tools</span><span class="small muted">Code, 2025</span></span>
|
|
135
|
+
<span></span>
|
|
136
|
+
</li>
|
|
137
|
+
</ul>
|
|
138
|
+
</section>
|
|
139
|
+
|
|
140
|
+
<form onsubmit="return false">
|
|
141
|
+
<label class="field-label" for="n">Your name</label>
|
|
142
|
+
<input class="field" id="n" placeholder="Jane">
|
|
143
|
+
<button class="btn" type="submit">Send</button>
|
|
144
|
+
</form>
|
|
145
|
+
</main>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<script src="../../kit/panel.js"></script>
|
|
150
|
+
<script>
|
|
151
|
+
var root = document.documentElement, btn = document.getElementById('toggle');
|
|
152
|
+
function cur() { return root.dataset.theme || (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); }
|
|
153
|
+
function sync() { document.getElementById('toggle-label').textContent = cur() === 'dark' ? 'Light' : 'Dark'; swatches(); }
|
|
154
|
+
btn.onclick = function () {
|
|
155
|
+
var n = cur() === 'dark' ? 'light' : 'dark'; root.dataset.theme = n;
|
|
156
|
+
try { localStorage.setItem('theme', n); } catch (e) {} sync();
|
|
157
|
+
};
|
|
158
|
+
function swatches() {
|
|
159
|
+
var names = ['paper', 'ink', 'muted', 'rule', 'accent', 'accent-text', 'accent-bright', 'bar',
|
|
160
|
+
'row-hover-bg', 'row-active-bg', 'row-fg', 'row-edge'];
|
|
161
|
+
// Resolve through a probe element: some tokens are declared as var(--other), which
|
|
162
|
+
// getPropertyValue would return unresolved.
|
|
163
|
+
var probe = document.body.appendChild(document.createElement('i'));
|
|
164
|
+
document.getElementById('swatches').innerHTML = names.map(function (n) {
|
|
165
|
+
probe.style.color = 'var(--' + n + ')';
|
|
166
|
+
var v = '#' + getComputedStyle(probe).color.match(/\d+/g).slice(0, 3).map(function (c) {
|
|
167
|
+
return ('0' + (+c).toString(16)).slice(-2);
|
|
168
|
+
}).join('');
|
|
169
|
+
return '<div class="sw"><b style="background:' + v + '"></b>--' + n + '<br><span class="muted">' + v + '</span></div>';
|
|
170
|
+
}).join('');
|
|
171
|
+
probe.remove();
|
|
172
|
+
}
|
|
173
|
+
sync();
|
|
174
|
+
|
|
175
|
+
// Filter buttons: only one is pressed, and the accordion's summary says which.
|
|
176
|
+
var chips = document.querySelectorAll('.chip');
|
|
177
|
+
chips.forEach(function (chip) {
|
|
178
|
+
chip.onclick = function () {
|
|
179
|
+
chips.forEach(function (c) { c.setAttribute('aria-pressed', String(c === chip)); });
|
|
180
|
+
document.getElementById('chip-status').textContent =
|
|
181
|
+
chip === chips[0] ? 'All items' : chip.firstChild.textContent.trim();
|
|
182
|
+
};
|
|
183
|
+
});
|
|
184
|
+
</script>
|
|
185
|
+
</body>
|
|
186
|
+
</html>
|
package/kit/fonts.css
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/* Verdigris's typeface. tailwind.css loads this after Swiss Minimal's theme.css, so its
|
|
2
|
+
--font-sans wins. The fonts live in ../fonts (SIL OFL 1.1, keep Cormorant-LICENSE.txt beside
|
|
3
|
+
them). Source Code Pro, for code, comes with Swiss Minimal. */
|
|
4
|
+
|
|
5
|
+
@font-face {
|
|
6
|
+
font-family: "Cormorant";
|
|
7
|
+
src: url("../fonts/Cormorant-Light.woff2") format("woff2");
|
|
8
|
+
font-weight: 300;
|
|
9
|
+
font-style: normal;
|
|
10
|
+
font-display: swap;
|
|
11
|
+
}
|
|
12
|
+
@font-face {
|
|
13
|
+
font-family: "Cormorant";
|
|
14
|
+
src: url("../fonts/Cormorant-LightItalic.woff2") format("woff2");
|
|
15
|
+
font-weight: 300;
|
|
16
|
+
font-style: italic;
|
|
17
|
+
font-display: swap;
|
|
18
|
+
}
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: "Cormorant";
|
|
21
|
+
src: url("../fonts/Cormorant-Medium.woff2") format("woff2");
|
|
22
|
+
font-weight: 500;
|
|
23
|
+
font-style: normal;
|
|
24
|
+
font-display: swap;
|
|
25
|
+
}
|
|
26
|
+
@font-face {
|
|
27
|
+
font-family: "Cormorant";
|
|
28
|
+
src: url("../fonts/Cormorant-MediumItalic.woff2") format("woff2");
|
|
29
|
+
font-weight: 500;
|
|
30
|
+
font-style: italic;
|
|
31
|
+
font-display: swap;
|
|
32
|
+
}
|
|
33
|
+
@font-face {
|
|
34
|
+
font-family: "Cormorant";
|
|
35
|
+
src: url("../fonts/Cormorant-SemiBold.woff2") format("woff2");
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
font-style: normal;
|
|
38
|
+
font-display: swap;
|
|
39
|
+
}
|
|
40
|
+
@font-face {
|
|
41
|
+
font-family: "Cormorant";
|
|
42
|
+
src: url("../fonts/Cormorant-SemiBoldItalic.woff2") format("woff2");
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
font-style: italic;
|
|
45
|
+
font-display: swap;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:root {
|
|
49
|
+
--font-sans: "Cormorant", Garamond, "Iowan Old Style", Georgia, serif;
|
|
50
|
+
}
|
package/kit/tailwind.css
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* Verdigris for Tailwind v4. Import this once, from your site's global stylesheet:
|
|
2
|
+
|
|
3
|
+
@import "@agentic-design-kits/verdigris/tailwind.css";
|
|
4
|
+
|
|
5
|
+
It loads Swiss Minimal's Tailwind entry (Tailwind itself, the shared theme.css in Tailwind's
|
|
6
|
+
`components` layer, and the token utilities: bg-paper, text-ink, text-muted, border-rule,
|
|
7
|
+
bg-bar and so on), then puts Verdigris's typefaces and theme on top, in the same layer. A
|
|
8
|
+
utility in your markup (`pt-0`, `max-w-none`) still beats a kit class it sits beside. */
|
|
9
|
+
@import "@agentic-design-kits/swiss-minimal/tailwind.css";
|
|
10
|
+
@import "./fonts.css" layer(components);
|
|
11
|
+
@import "./verdigris.css" layer(components);
|
|
12
|
+
@source not inline("uppercase"); /* no capitals in Verdigris: the utility is never generated */
|
|
13
|
+
|
|
14
|
+
/* Verdigris's own components. Tailwind does not look inside node_modules by itself. */
|
|
15
|
+
@source "./astro";
|
|
16
|
+
|
|
17
|
+
/* Copper, which Swiss Minimal does not have: text-copper and bg-copper (large shapes only),
|
|
18
|
+
text-copper-text (labels and small ornament on paper), text-copper-bright (on bar). Like
|
|
19
|
+
Swiss Minimal's, they point at the variables, so they follow light and dark. */
|
|
20
|
+
@theme inline {
|
|
21
|
+
--color-copper: var(--copper);
|
|
22
|
+
--color-copper-text: var(--copper-text);
|
|
23
|
+
--color-copper-bright: var(--copper-bright);
|
|
24
|
+
}
|
package/kit/types.ts
ADDED
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
/* Verdigris: the theme on top of Swiss Minimal's theme.css. tailwind.css loads it right after
|
|
2
|
+
theme.css; a plain page links it after theme.css. Everything that makes this kit Verdigris and
|
|
3
|
+
not Swiss Minimal is here or in fonts.css, so theme.css can keep merging from upstream
|
|
4
|
+
untouched. Read DESIGN.md for the rules. tokens.json wins if the two drift. */
|
|
5
|
+
|
|
6
|
+
/* ---------- Tokens ---------- */
|
|
7
|
+
/* The [data-accent] selectors let these beat theme.css's accent blocks. Verdigris has one
|
|
8
|
+
palette, so the attribute changes nothing. */
|
|
9
|
+
:root, :root[data-accent] {
|
|
10
|
+
--paper: #f2ede1; /* page background */
|
|
11
|
+
--ink: #10201f; /* text and rules, a green-black (14.4:1) */
|
|
12
|
+
--muted: #566460; /* secondary text (5.3:1) */
|
|
13
|
+
--rule: #c9c5b4; /* thin row dividers, decorative */
|
|
14
|
+
--accent: #0f8f8c; /* verdigris: large shapes and the focus ring only (3.4:1) */
|
|
15
|
+
--accent-ink: #ffffff; /* text on a verdigris fill (6.3:1) */
|
|
16
|
+
--accent-text: #0b6b69; /* small verdigris text (5.4:1) */
|
|
17
|
+
--accent-bright: #5fd4cc;/* small verdigris text on bar (8.5:1) */
|
|
18
|
+
--copper: #b0612f; /* large ornament only (3.9:1) */
|
|
19
|
+
--copper-text: #8f4a22; /* small ornament and labels (5.7:1) */
|
|
20
|
+
--copper-bright: #e39a68;/* ornament and labels on bar (6.6:1) */
|
|
21
|
+
--bar: #0e2a29; /* dark surfaces stay dark in both themes */
|
|
22
|
+
--bar-ink: #f2ede1; /* text on bar (13:1) */
|
|
23
|
+
--rosette-line: 0.9; /* dark lines on paper read thinner than light lines on dark */
|
|
24
|
+
--row-hover-bg: var(--bar);
|
|
25
|
+
--row-active-bg: var(--bar);
|
|
26
|
+
--row-fg: var(--bar-ink);
|
|
27
|
+
--row-edge: var(--copper-bright);
|
|
28
|
+
|
|
29
|
+
--size-100: 1.125rem; /* the floor is 18px: Cormorant's small x-height reads like 14px in a grotesque */
|
|
30
|
+
--size-200: 1.25rem;
|
|
31
|
+
--size-300: 1.375rem;
|
|
32
|
+
--size-400: 1.625rem;
|
|
33
|
+
--size-500: 1.75rem;
|
|
34
|
+
--size-600: 1.875rem;
|
|
35
|
+
--size-700: 2.125rem;
|
|
36
|
+
--size-800: 2.5rem;
|
|
37
|
+
--size-900: 2.75rem;
|
|
38
|
+
--size-1000: 3.75rem;
|
|
39
|
+
--size-display: clamp(4.75rem, 12.4vw, 11rem);
|
|
40
|
+
--size-display-split: clamp(4rem, 9.5vw, 9.5rem);
|
|
41
|
+
--size-page-title: clamp(3.5rem, 9vw, 8rem);
|
|
42
|
+
--size-post-feature: clamp(2.75rem, 5.5vw, 5.25rem);
|
|
43
|
+
--size-post-title: clamp(3rem, 6vw, 5.5rem);
|
|
44
|
+
--code-sample-size: var(--size-200); /* code on the Beautiful Code page: 20px, as --size-300 runs large here */
|
|
45
|
+
--weight-body: 500;
|
|
46
|
+
--weight-medium: 600;
|
|
47
|
+
--weight-strong: 600;
|
|
48
|
+
--weight-display: 300;
|
|
49
|
+
--leading-body: 1.55;
|
|
50
|
+
--label-case: none; /* no capitals anywhere: see DESIGN.md */
|
|
51
|
+
--label-tracking: 0;
|
|
52
|
+
--label-tracking-wide: 0;
|
|
53
|
+
--badge-tracking: 0;
|
|
54
|
+
}
|
|
55
|
+
@media (prefers-color-scheme: dark) {
|
|
56
|
+
:root:not([data-theme="light"]), :root[data-accent]:not([data-theme="light"]) {
|
|
57
|
+
--paper: #0b1716;
|
|
58
|
+
--ink: #ece6d8;
|
|
59
|
+
--muted: #a6b5b0;
|
|
60
|
+
--rule: #3a4a47;
|
|
61
|
+
--accent: #5fd4cc;
|
|
62
|
+
--accent-ink: #0b1716;
|
|
63
|
+
--accent-text: #5fd4cc;
|
|
64
|
+
--accent-bright: #5fd4cc;
|
|
65
|
+
--copper: #e39a68;
|
|
66
|
+
--copper-text: #e39a68;
|
|
67
|
+
--bar: #132c2a;
|
|
68
|
+
--bar-ink: #ece6d8;
|
|
69
|
+
--rosette-line: 0.6;
|
|
70
|
+
--row-hover-bg: #132c2a;
|
|
71
|
+
--row-active-bg: var(--bar);
|
|
72
|
+
--row-fg: var(--ink);
|
|
73
|
+
--row-edge: var(--copper);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
:root[data-theme="dark"], :root[data-accent][data-theme="dark"] {
|
|
77
|
+
--paper: #0b1716;
|
|
78
|
+
--ink: #ece6d8;
|
|
79
|
+
--muted: #a6b5b0;
|
|
80
|
+
--rule: #3a4a47;
|
|
81
|
+
--accent: #5fd4cc;
|
|
82
|
+
--accent-ink: #0b1716;
|
|
83
|
+
--accent-text: #5fd4cc;
|
|
84
|
+
--accent-bright: #5fd4cc;
|
|
85
|
+
--copper: #e39a68;
|
|
86
|
+
--copper-text: #e39a68;
|
|
87
|
+
--bar: #132c2a;
|
|
88
|
+
--bar-ink: #ece6d8;
|
|
89
|
+
--rosette-line: 0.6;
|
|
90
|
+
--row-hover-bg: #132c2a;
|
|
91
|
+
--row-active-bg: var(--bar);
|
|
92
|
+
--row-fg: var(--ink);
|
|
93
|
+
--row-edge: var(--copper);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* ---------- Type ---------- */
|
|
97
|
+
body {
|
|
98
|
+
font-feature-settings: "kern", "liga", "ss02"; /* Garamond forms: bigger counters for reading */
|
|
99
|
+
font-variant-numeric: oldstyle-nums proportional-nums;
|
|
100
|
+
}
|
|
101
|
+
.display, .h2, .page-title-text, .post-feature-title, .post-header-title {
|
|
102
|
+
font-feature-settings: "kern", "liga", "dlig";
|
|
103
|
+
}
|
|
104
|
+
.lead { font-style: italic; font-weight: 300; line-height: 1.22; }
|
|
105
|
+
.figure > figcaption, .post-body figcaption { font-style: italic; }
|
|
106
|
+
/* Source Code Pro is far larger on its body than Cormorant, so code steps down to match. */
|
|
107
|
+
code, kbd, samp { font-size: max(0.875rem, 0.8em); }
|
|
108
|
+
/* Numbers that line up need lining figures; old-style would wander. */
|
|
109
|
+
.num, .chip-count, .panel-tab-num, .num-circle, .post-body ol { font-variant-numeric: lining-nums tabular-nums; }
|
|
110
|
+
|
|
111
|
+
/* ---------- The scotch rule ---------- */
|
|
112
|
+
/* Thick and thin as one line: the 2px border theme.css draws, plus a 1px line 3px below it.
|
|
113
|
+
A background, so it needs no extra markup and works on grids and lists alike. */
|
|
114
|
+
.rule-thick, .rule-scotch, .post-list, .post-meta, .post-nav, .site-footer {
|
|
115
|
+
background-image: linear-gradient(var(--ink), var(--ink));
|
|
116
|
+
background-repeat: no-repeat;
|
|
117
|
+
background-position: 0 3px;
|
|
118
|
+
background-size: 100% 1px;
|
|
119
|
+
}
|
|
120
|
+
.rule-scotch { height: 6px; border: 0; border-top: 2px solid var(--ink); }
|
|
121
|
+
|
|
122
|
+
/* ---------- Ornament ---------- */
|
|
123
|
+
/* A pause in the page, once a page at most. aria-hidden on the element: it says nothing. */
|
|
124
|
+
.rule-fleuron {
|
|
125
|
+
display: flex; align-items: center; gap: 1.25rem;
|
|
126
|
+
margin: 0; color: var(--copper-text); font-size: 1.875rem; line-height: 1;
|
|
127
|
+
}
|
|
128
|
+
.rule-fleuron::before, .rule-fleuron::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--rule); }
|
|
129
|
+
/* A framed quotation or title. One to a page, never around an image or a control. */
|
|
130
|
+
.plate {
|
|
131
|
+
position: relative; margin: 6px; padding: 2.5rem;
|
|
132
|
+
border: 1px solid var(--ink); outline: 2px solid var(--ink); outline-offset: 4px;
|
|
133
|
+
text-align: center;
|
|
134
|
+
}
|
|
135
|
+
.plate-corner { position: absolute; width: 11px; height: 11px; background: var(--accent); transform: rotate(45deg); }
|
|
136
|
+
.plate-corner:nth-of-type(1) { top: -6px; left: -6px; }
|
|
137
|
+
.plate-corner:nth-of-type(2) { top: -6px; right: -6px; }
|
|
138
|
+
.plate-corner:nth-of-type(3) { bottom: -6px; left: -6px; }
|
|
139
|
+
.plate-corner:nth-of-type(4) { bottom: -6px; right: -6px; }
|
|
140
|
+
/* The rosette: line work in the two metals, drawn by Rosette.astro. */
|
|
141
|
+
.rosette { fill: none; stroke-width: var(--rosette-line); }
|
|
142
|
+
.rosette svg { display: block; width: 100%; height: auto; }
|
|
143
|
+
.rosette-disc { overflow: hidden; } /* the square's corners swing wider than the page on a phone */
|
|
144
|
+
.rosette-outer, .rosette-core { stroke: var(--accent-text); }
|
|
145
|
+
.rosette-inner { stroke: var(--copper-text); }
|
|
146
|
+
/* Under no-preference, so Reduce Motion never starts it. The switch is hidden there too. */
|
|
147
|
+
.rosette-switch { display: none; }
|
|
148
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
149
|
+
.rosette--spin .rosette-switch { display: inline-flex; margin-top: 0.5rem; }
|
|
150
|
+
.rosette--spin svg { animation: rosette-turn 120s linear infinite; will-change: transform; }
|
|
151
|
+
.rosette--spin:has(.switch:not(:checked)) svg { animation-play-state: paused; }
|
|
152
|
+
}
|
|
153
|
+
@keyframes rosette-turn { to { transform: rotate(360deg); } }
|
|
154
|
+
/* A wide crop of the rosette: put it in a .media box. Its top and bottom run past the box. */
|
|
155
|
+
.rosette-crop { position: relative; overflow: hidden; background: none; }
|
|
156
|
+
.rosette-crop > .rosette { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
|
|
157
|
+
/* One note a reader must not miss: a manicule, from the font. */
|
|
158
|
+
.notice { display: flex; gap: 0.875rem; align-items: baseline; padding: 1rem 1.25rem; border: 1px solid var(--ink); }
|
|
159
|
+
.notice::before { content: "\261E"; color: var(--copper-text); font-size: 1.875rem; line-height: 1; }
|
|
160
|
+
/* A drawn mark: Mark.astro. One pen, one color at a time. */
|
|
161
|
+
.mark { flex: none; width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
|
|
162
|
+
|
|
163
|
+
/* ---------- Reading ---------- */
|
|
164
|
+
/* The drop cap is ::first-letter, so the word stays whole for screen readers. */
|
|
165
|
+
.post-body--cap > p:first-of-type::first-letter {
|
|
166
|
+
float: left; padding: 0.5rem 0.75rem 0 0;
|
|
167
|
+
color: var(--accent-text); font-size: 7.375rem; font-weight: 300; line-height: 0.78;
|
|
168
|
+
}
|
|
169
|
+
.post-body blockquote {
|
|
170
|
+
padding: 1.75rem 0; border-left: 0;
|
|
171
|
+
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
|
|
172
|
+
text-align: center; letter-spacing: 0;
|
|
173
|
+
font-style: italic; font-weight: 300; font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.16;
|
|
174
|
+
color: var(--accent-text);
|
|
175
|
+
}
|
|
176
|
+
.post-body hr { border-top: 0; height: auto; overflow: visible; text-align: center; }
|
|
177
|
+
.post-body hr::before { content: "\2042"; color: var(--copper-text); font-size: 2.125rem; line-height: 1; }
|