clampography 2.0.0-beta.26 → 2.0.0-beta.27

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.
Files changed (10) hide show
  1. package/css/base.css +29 -10
  2. package/css/base.min.css +1 -1
  3. package/css/clampography.css +31 -11
  4. package/css/clampography.min.css +1 -1
  5. package/css/extra.css +2 -1
  6. package/css/extra.min.css +1 -1
  7. package/package.json +6 -6
  8. package/src/base.js +43 -13
  9. package/src/extra.js +5 -2
  10. package/src/themes.js +1585 -1409
package/css/base.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer base {
2
2
 
3
- :root {
3
+ :where(:root) {
4
4
  --spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
5
5
  --spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
6
6
  --spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
@@ -8,9 +8,24 @@
8
8
  --spacing-xl: clamp(1rem, 5vw, 3rem);
9
9
  --list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
10
10
  --scroll-offset: 5rem;
11
- --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
- font-family: var(--font-family-base);
11
+ --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
12
+ --font-family-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
13
+ --clampography-h1-size: clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem);
14
+ --clampography-h2-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
15
+ --clampography-h3-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
16
+ --clampography-h4-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
17
+ --clampography-h5-size: 1rem;
18
+ --clampography-h6-size: 0.875rem;
19
+ --clampography-heading-scale: 1;
20
+ --clampography-h1-scale: var(--clampography-heading-scale);
21
+ --clampography-h2-scale: var(--clampography-heading-scale);
22
+ --clampography-h3-scale: var(--clampography-heading-scale);
23
+ --clampography-h4-scale: var(--clampography-heading-scale);
24
+ --clampography-h5-scale: var(--clampography-heading-scale);
25
+ --clampography-h6-scale: var(--clampography-heading-scale);
26
+ }
27
+
28
+ body {
14
29
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
15
30
  line-height: 1.75;
16
31
  text-rendering: optimizeLegibility;
@@ -25,7 +40,7 @@
25
40
  }
26
41
 
27
42
  :root h1 {
28
- font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
43
+ font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
29
44
  line-height: 1.1111;
30
45
  font-weight: 800;
31
46
  margin-top: 0;
@@ -33,7 +48,7 @@
33
48
  }
34
49
 
35
50
  :root h2 {
36
- font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
51
+ font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
37
52
  line-height: 1.3333;
38
53
  font-weight: 700;
39
54
  margin-top: var(--spacing-xl);
@@ -41,28 +56,28 @@
41
56
  }
42
57
 
43
58
  :root h3 {
44
- font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
59
+ font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
45
60
  line-height: 1.5;
46
61
  margin-top: var(--spacing-lg);
47
62
  margin-bottom: var(--spacing-sm);
48
63
  }
49
64
 
50
65
  :root h4 {
51
- font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
66
+ font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
52
67
  line-height: 1.5;
53
68
  margin-top: var(--spacing-lg);
54
69
  margin-bottom: var(--spacing-sm);
55
70
  }
56
71
 
57
72
  :root h5 {
58
- font-size: 1rem;
73
+ font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
59
74
  line-height: 1.5;
60
75
  margin-top: var(--spacing-md);
61
76
  margin-bottom: var(--spacing-xs);
62
77
  }
63
78
 
64
79
  :root h6 {
65
- font-size: 0.875rem;
80
+ font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
66
81
  line-height: 1.5;
67
82
  margin-top: var(--spacing-md);
68
83
  margin-bottom: var(--spacing-xs);
@@ -133,6 +148,8 @@
133
148
  :root :where(code, kbd, samp) {
134
149
  font-family: var(--font-family-mono);
135
150
  font-size: 0.875em;
151
+ -webkit-font-smoothing: auto;
152
+ -moz-osx-font-smoothing: auto;
136
153
  }
137
154
 
138
155
  :root kbd {
@@ -308,6 +325,8 @@
308
325
  font-family: var(--font-family-mono);
309
326
  line-height: 1.6;
310
327
  overflow-x: auto;
328
+ -webkit-font-smoothing: auto;
329
+ -moz-osx-font-smoothing: auto;
311
330
  }
312
331
 
313
332
  :root pre code {
package/css/base.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:clamp(2.25rem, 1.95rem + 1.5vw, 3rem);line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:clamp(1rem, 0.975rem + 0.125vw, 1.125rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}:root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}
1
+ @layer base{:where(:root){--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-h1-size:clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem);--clampography-h2-size:clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);--clampography-h3-size:clamp(1.125rem, 1rem + 0.625vw, 1.5rem);--clampography-h4-size:clamp(1rem, 0.917rem + 0.42vw, 1.25rem);--clampography-h5-size:1rem;--clampography-h6-size:0.875rem;--clampography-heading-scale:1;--clampography-h1-scale:var(--clampography-heading-scale);--clampography-h2-scale:var(--clampography-heading-scale);--clampography-h3-scale:var(--clampography-heading-scale);--clampography-h4-scale:var(--clampography-heading-scale);--clampography-h5-scale:var(--clampography-heading-scale);--clampography-h6-scale:var(--clampography-heading-scale)}body{font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:calc(var(--clampography-h1-size) * var(--clampography-h1-scale));line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:calc(var(--clampography-h2-size) * var(--clampography-h2-scale));line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}:root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}
package/css/clampography.css CHANGED
@@ -6,7 +6,7 @@
6
6
  /* --- base.js --- */
7
7
  @layer base {
8
8
 
9
- :root {
9
+ :where(:root) {
10
10
  --spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
11
11
  --spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
12
12
  --spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
@@ -14,9 +14,24 @@
14
14
  --spacing-xl: clamp(1rem, 5vw, 3rem);
15
15
  --list-indent: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
16
16
  --scroll-offset: 5rem;
17
- --font-family-base: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
- --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19
- font-family: var(--font-family-base);
17
+ --font-family-base: Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
18
+ --font-family-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
19
+ --clampography-h1-size: clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem);
20
+ --clampography-h2-size: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
21
+ --clampography-h3-size: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
22
+ --clampography-h4-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
23
+ --clampography-h5-size: 1rem;
24
+ --clampography-h6-size: 0.875rem;
25
+ --clampography-heading-scale: 1;
26
+ --clampography-h1-scale: var(--clampography-heading-scale);
27
+ --clampography-h2-scale: var(--clampography-heading-scale);
28
+ --clampography-h3-scale: var(--clampography-heading-scale);
29
+ --clampography-h4-scale: var(--clampography-heading-scale);
30
+ --clampography-h5-scale: var(--clampography-heading-scale);
31
+ --clampography-h6-scale: var(--clampography-heading-scale);
32
+ }
33
+
34
+ body {
20
35
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
21
36
  line-height: 1.75;
22
37
  text-rendering: optimizeLegibility;
@@ -31,7 +46,7 @@
31
46
  }
32
47
 
33
48
  :root h1 {
34
- font-size: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
49
+ font-size: calc(var(--clampography-h1-size) * var(--clampography-h1-scale));
35
50
  line-height: 1.1111;
36
51
  font-weight: 800;
37
52
  margin-top: 0;
@@ -39,7 +54,7 @@
39
54
  }
40
55
 
41
56
  :root h2 {
42
- font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
57
+ font-size: calc(var(--clampography-h2-size) * var(--clampography-h2-scale));
43
58
  line-height: 1.3333;
44
59
  font-weight: 700;
45
60
  margin-top: var(--spacing-xl);
@@ -47,28 +62,28 @@
47
62
  }
48
63
 
49
64
  :root h3 {
50
- font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
65
+ font-size: calc(var(--clampography-h3-size) * var(--clampography-h3-scale));
51
66
  line-height: 1.5;
52
67
  margin-top: var(--spacing-lg);
53
68
  margin-bottom: var(--spacing-sm);
54
69
  }
55
70
 
56
71
  :root h4 {
57
- font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
72
+ font-size: calc(var(--clampography-h4-size) * var(--clampography-h4-scale));
58
73
  line-height: 1.5;
59
74
  margin-top: var(--spacing-lg);
60
75
  margin-bottom: var(--spacing-sm);
61
76
  }
62
77
 
63
78
  :root h5 {
64
- font-size: 1rem;
79
+ font-size: calc(var(--clampography-h5-size) * var(--clampography-h5-scale));
65
80
  line-height: 1.5;
66
81
  margin-top: var(--spacing-md);
67
82
  margin-bottom: var(--spacing-xs);
68
83
  }
69
84
 
70
85
  :root h6 {
71
- font-size: 0.875rem;
86
+ font-size: calc(var(--clampography-h6-size) * var(--clampography-h6-scale));
72
87
  line-height: 1.5;
73
88
  margin-top: var(--spacing-md);
74
89
  margin-bottom: var(--spacing-xs);
@@ -139,6 +154,8 @@
139
154
  :root :where(code, kbd, samp) {
140
155
  font-family: var(--font-family-mono);
141
156
  font-size: 0.875em;
157
+ -webkit-font-smoothing: auto;
158
+ -moz-osx-font-smoothing: auto;
142
159
  }
143
160
 
144
161
  :root kbd {
@@ -314,6 +331,8 @@
314
331
  font-family: var(--font-family-mono);
315
332
  line-height: 1.6;
316
333
  overflow-x: auto;
334
+ -webkit-font-smoothing: auto;
335
+ -moz-osx-font-smoothing: auto;
317
336
  }
318
337
 
319
338
  :root pre code {
@@ -556,9 +575,10 @@
556
575
  /* --- extra.js --- */
557
576
  @layer base {
558
577
 
559
- :root {
578
+ body {
560
579
  background-color: var(--clampography-background);
561
580
  color: var(--clampography-text);
581
+ font-family: var(--font-sans, var(--font-family-base));
562
582
  }
563
583
 
564
584
  :root :where(h1, h2, h3, h4, h5, h6) {
package/css/clampography.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;font-family:var(--font-family-base);font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:clamp(2.25rem, 1.95rem + 1.5vw, 3rem);line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:clamp(1rem, 0.975rem + 0.125vw, 1.125rem);line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:1rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:0.875rem;line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}:root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}@layer base{:root{background-color:var(--clampography-background);color:var(--clampography-text)}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
1
+ @layer base{:where(:root){--spacing-xs:clamp(0.25rem, 1.25vw, 0.75rem);--spacing-sm:clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);--spacing-md:clamp(0.5rem, 2.5vw, 1.5rem);--spacing-lg:clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);--spacing-xl:clamp(1rem, 5vw, 3rem);--list-indent:clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--scroll-offset:5rem;--font-family-base:Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-family-mono:ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;--clampography-h1-size:clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem);--clampography-h2-size:clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);--clampography-h3-size:clamp(1.125rem, 1rem + 0.625vw, 1.5rem);--clampography-h4-size:clamp(1rem, 0.917rem + 0.42vw, 1.25rem);--clampography-h5-size:1rem;--clampography-h6-size:0.875rem;--clampography-heading-scale:1;--clampography-h1-scale:var(--clampography-heading-scale);--clampography-h2-scale:var(--clampography-heading-scale);--clampography-h3-scale:var(--clampography-heading-scale);--clampography-h4-scale:var(--clampography-heading-scale);--clampography-h5-scale:var(--clampography-heading-scale);--clampography-h6-scale:var(--clampography-heading-scale)}body{font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);line-height:1.75;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}:root :where(h1, h2, h3, h4, h5, h6){font-weight:600;scroll-margin-top:var(--scroll-offset)}:root h1{font-size:calc(var(--clampography-h1-size) * var(--clampography-h1-scale));line-height:1.1111;font-weight:800;margin-top:0;margin-bottom:var(--spacing-xl)}:root h2{font-size:calc(var(--clampography-h2-size) * var(--clampography-h2-scale));line-height:1.3333;font-weight:700;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}:root h3{font-size:calc(var(--clampography-h3-size) * var(--clampography-h3-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h4{font-size:calc(var(--clampography-h4-size) * var(--clampography-h4-scale));line-height:1.5;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}:root h5{font-size:calc(var(--clampography-h5-size) * var(--clampography-h5-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root h6{font-size:calc(var(--clampography-h6-size) * var(--clampography-h6-scale));line-height:1.5;margin-top:var(--spacing-md);margin-bottom:var(--spacing-xs)}:root :is(h1, h2, h3, h4, h5, h6):first-child{margin-top:0}:root a{text-decoration-line:underline;cursor:pointer}:root :where(h1, h2, h3, h4, h5, h6) a{text-decoration:none}:root menu{list-style:none;margin-bottom:var(--spacing-md);padding-left:0}:root menu > li::before{display:none}:root hgroup{margin-bottom:var(--spacing-lg)}:root hgroup :where(h1, h2, h3, h4, h5, h6){margin-bottom:var(--spacing-xs)}:root hgroup :where(p){margin-top:0;margin-bottom:0;font-size:0.875em;font-weight:400;line-height:1.5}:root p{line-height:1.75;margin-bottom:var(--spacing-md)}:root :where(strong, b){font-weight:700}:root :where(em, i, cite, var){font-style:italic}:root dfn{font-style:italic;font-weight:600}:root small{font-size:0.875em;line-height:1.5}:root :where(code, kbd, samp){font-family:var(--font-family-mono);font-size:0.875em;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root kbd{font-weight:600}:root data{font-variant-numeric:tabular-nums}:root :where(sub, sup){font-size:0.75em;line-height:0;position:relative;vertical-align:baseline}:root sup{top:-0.5em}:root sub{bottom:-0.25em}:root abbr[title]{text-decoration:underline dotted;text-underline-offset:4px;cursor:help}:root del{text-decoration:line-through}:root ins{text-decoration:underline}:root s{text-decoration:line-through}:root u{text-decoration:underline}:root mark{font-style:normal;font-weight:inherit}:root address{font-style:italic;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root time{font-style:normal;font-variant-numeric:tabular-nums}:root blockquote{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg);padding-left:var(--spacing-md)}:root blockquote blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-sm)}:root q{font-style:inherit}:root :where(ul, ol){list-style:none;margin-bottom:var(--spacing-md);padding-left:var(--list-indent)}:root li{position:relative}:root li + li{margin-top:var(--spacing-xs)}:root li > :where(p, dl, figure, table, pre){margin-top:0;margin-bottom:0}:root li > blockquote{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm)}:root li > :where(ul, ol){margin-top:var(--spacing-xs);margin-bottom:0}:root ul > li::before{content:'';position:absolute;right:100%;margin-right:0.75em;top:0.65em;width:0.375em;height:0.375em;background-color:currentColor;border-radius:50%}:root ol{counter-reset:list-counter}:root ol > li{counter-increment:list-counter}:root ol > li::before{content:counter(list-counter) '.';position:absolute;right:100%;margin-right:0.5em;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:currentColor}:root dl{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root dt{font-weight:600;margin-top:var(--spacing-sm)}:root dt:first-child{margin-top:0}:root dd{margin-left:var(--spacing-md)}:root dt + dd{margin-top:var(--spacing-xs)}:root dd + dd{margin-top:var(--spacing-xs)}:root dd:last-child{margin-bottom:0}:root pre{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);font-family:var(--font-family-mono);line-height:1.6;overflow-x:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}:root pre code{font-size:inherit;padding:0;background:none;border-radius:0}:root input, :root button, :root textarea, :root select, :root optgroup{font-family:inherit;font-size:100%;line-height:inherit}:root textarea{line-height:1.5}:root button, :root [type='button'], :root [type='reset'], :root [type='submit']{cursor:pointer}:root fieldset{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);padding:var(--spacing-sm)}:root legend{font-weight:600;padding:0 var(--spacing-xs)}:root label{display:inline-block;font-weight:600;margin-bottom:var(--spacing-xs)}:root output{display:inline-block;font-variant-numeric:tabular-nums}:root :where(meter, progress){display:inline-block;vertical-align:middle}:root :where(img, video, canvas, audio, iframe, svg){max-width:100%;height:auto;vertical-align:middle}:root figure{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}:root figcaption{margin-top:0.375rem;font-size:0.875em;line-height:1.5}:root table{width:100%;margin-top:var(--spacing-md);margin-bottom:var(--spacing-md);border-collapse:collapse;font-size:1em;line-height:1.6}:root caption{margin-bottom:var(--spacing-xs);font-size:0.875em;font-weight:600;text-align:left}:root th, :root td{padding:var(--spacing-xs) var(--spacing-sm);text-align:left}:root th{font-weight:600}:root thead th{vertical-align:bottom}:root tbody th, :root tbody td{vertical-align:top}:root tfoot th, :root tfoot td{vertical-align:top}:root tbody + tbody{border-top-width:2px}:root hr{margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);border:0;border-top:1px solid}:root :where(:focus, :focus-visible){outline-offset:2px}:root details{margin-top:var(--spacing-md);margin-bottom:var(--spacing-md)}:root summary{cursor:pointer;font-weight:600}:root details[open] > summary{margin-bottom:var(--spacing-xs)}:root dialog{font-size:inherit;line-height:inherit}:root :where(h1, h2, h3, h4, h5, h6, p, ul:not(li > ul, li > ol), ol:not(li > ul, li > ol), dl, blockquote, figure, table, pre):first-child{margin-top:0}:root :where(p, ul, ol, dl, blockquote, figure, table, pre):last-child{margin-bottom:0}}@layer base{:where(:root), [data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}[data-theme="light"]{color-scheme:light;--clampography-background:oklch(100% 0 0);--clampography-border:oklch(92% 0.003 264);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(15% 0.02 264);--clampography-info:oklch(63% 0.258 262);--clampography-link:oklch(43% 0.19 264);--clampography-muted:oklch(52% 0.014 258);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(55% 0.28 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(96% 0.003 264);--clampography-text:oklch(31% 0.02 257);--clampography-warning:oklch(72% 0.17 65)}}[data-theme="dark"]{color-scheme:dark;--clampography-background:oklch(10% 0 0);--clampography-border:oklch(31% 0.03 254);--clampography-error:oklch(63% 0.22 27);--clampography-heading:oklch(98% 0.003 264);--clampography-info:oklch(72% 0.17 254);--clampography-link:oklch(72% 0.17 254);--clampography-muted:oklch(68% 0.024 254);--clampography-primary:oklch(63% 0.258 262);--clampography-secondary:oklch(63% 0.25 300);--clampography-success:oklch(65% 0.17 165);--clampography-surface:oklch(12% 0 0);--clampography-text:oklch(95% 0 0);--clampography-warning:oklch(72% 0.17 65)}}@layer base{body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base))}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}@layer base{:root :where(button, [type='button'], [type='reset'], [type='submit']){display:inline-flex;align-items:center;justify-content:center;gap:0.375em;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-weight:500;white-space:nowrap;transition-property:background-color, border-color, color, box-shadow;transition-duration:150ms}:root :where(button, [type='button'], [type='reset'], [type='submit']):hover{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary, :root [type='submit']{background-color:var(--clampography-primary);color:var(--clampography-background);border-color:var(--clampography-primary)}:root :where(button, [type='button'], [type='submit']).primary:hover, :root [type='submit']:hover{filter:brightness(1.1)}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select){display:block;width:100%;padding:var(--spacing-xs) var(--spacing-sm);background-color:var(--clampography-background);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;transition-property:border-color, box-shadow;transition-duration:150ms}:root :where(input:not([type='checkbox'], [type='radio'], [type='range'], [type='color']), textarea, select):focus{outline:none;border-color:var(--clampography-primary);box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-primary) 20%, transparent)}:root :where(input, textarea, select):disabled{opacity:0.5;cursor:not-allowed}:root :where(input, textarea, select)[readonly]{background-color:color-mix(in oklab, var(--clampography-surface) 50%, transparent);cursor:default}:root :where(input, textarea, select):user-invalid{border-color:var(--clampography-error)}:root :where(input, textarea, select):user-invalid:focus{box-shadow:0 0 0 3px color-mix(in oklab, var(--clampography-error) 20%, transparent)}:root [type='search']::-webkit-search-cancel-button, :root [type='search']::-webkit-search-decoration{-webkit-appearance:none;appearance:none}:root [type='number']::-webkit-inner-spin-button, :root [type='number']::-webkit-outer-spin-button{height:auto}:root :where(input, textarea, select)::placeholder{color:var(--clampography-muted)}:root select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}:root [type='file']{padding:0;background-color:transparent;border:none;cursor:pointer}:root [type='file']::file-selector-button{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-sm);margin-right:var(--spacing-sm);background-color:var(--clampography-surface);color:var(--clampography-text);border:1px solid var(--clampography-border);border-radius:0.375rem;font-family:inherit;font-size:inherit;cursor:pointer;transition-property:background-color, border-color;transition-duration:150ms}:root [type='file']:hover::file-selector-button{background-color:var(--clampography-background);border-color:var(--clampography-primary)}:root [type='checkbox'], :root [type='radio']{width:1em;height:1em;accent-color:var(--clampography-primary);vertical-align:middle;cursor:pointer}:root [type='checkbox']:focus-visible, :root [type='radio']:focus-visible{outline:2px solid var(--clampography-primary);outline-offset:2px}:root [type='range']{accent-color:var(--clampography-primary);width:100%;cursor:pointer}:root [type='color']{padding:0.125rem;width:2.5rem;height:2.5rem;border:1px solid var(--clampography-border);border-radius:0.375rem;background-color:var(--clampography-background);cursor:pointer}:root fieldset{border:1px solid var(--clampography-border);border-radius:0.5rem;background-color:var(--clampography-surface)}:root legend{color:var(--clampography-heading)}:root label{color:var(--clampography-text)}:root output{color:var(--clampography-primary);font-weight:600}:root progress{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}:root progress::-webkit-progress-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root progress::-webkit-progress-value{background:var(--clampography-success)}:root progress::-moz-progress-bar{background:var(--clampography-success)}:root meter{-webkit-appearance:none;appearance:none;width:100%;height:1em;background:transparent}@supports (-moz-appearance: none){:root progress{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}:root meter{background:color-mix(in oklab, var(--clampography-text) 20%, transparent)}}:root meter::-webkit-meter-inner-element{display:flex;align-items:stretch;height:1em}:root meter::-webkit-meter-bar{background:color-mix(in oklab, var(--clampography-text) 20%, transparent);height:100%}:root meter::-webkit-meter-optimum-value{background:var(--clampography-success);height:100%}:root meter:-moz-meter-optimum::-moz-meter-bar{background:var(--clampography-success)}:root meter::-webkit-meter-suboptimum-value{background:var(--clampography-warning);height:100%}:root meter:-moz-meter-sub-optimum::-moz-meter-bar{background:var(--clampography-warning)}:root meter::-webkit-meter-even-less-good-value{background:var(--clampography-error);height:100%}:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar{background:var(--clampography-error)}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:2em;text-align:center;font-size:0.8em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:0.1em;cursor:default;user-select:none;background-color:var(--clampography-surface, oklch(94% 0.004 264));color:var(--clampography-text, oklch(18% 0.015 264));border:1px solid var(--clampography-border, oklch(76% 0.008 264));border-radius:4px;box-shadow:0 2px 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 3px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5);transition-property:box-shadow, transform, border-bottom-width;transition-duration:80ms}:root kbd:active{transform:translateY(2px);box-shadow:0 0 0 color-mix(in oklab, var(--clampography-border, oklch(60% 0.008 264)) 100%, black 18%), 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
package/css/extra.css CHANGED
@@ -1,8 +1,9 @@
1
1
  @layer base {
2
2
 
3
- :root {
3
+ body {
4
4
  background-color: var(--clampography-background);
5
5
  color: var(--clampography-text);
6
+ font-family: var(--font-sans, var(--font-family-base));
6
7
  }
7
8
 
8
9
  :root :where(h1, h2, h3, h4, h5, h6) {
package/css/extra.min.css CHANGED
@@ -1 +1 @@
1
- @layer base{:root{background-color:var(--clampography-background);color:var(--clampography-text)}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}
1
+ @layer base{body{background-color:var(--clampography-background);color:var(--clampography-text);font-family:var(--font-sans, var(--font-family-base))}:root :where(h1, h2, h3, h4, h5, h6){color:var(--clampography-heading)}:root a{color:var(--clampography-link);font-weight:600;letter-spacing:0.025em;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:color-mix(in oklab, var(--clampography-link) 30%, transparent);transition-property:color, text-decoration-color;transition-duration:150ms}:root a:hover{text-decoration-color:var(--clampography-link)}:root ul > li::before{background-color:var(--clampography-primary)}:root ol > li::before{color:var(--clampography-primary)}:root :where(code:not(pre code), kbd, samp){background-color:var(--clampography-surface);color:var(--clampography-heading);border:1px solid var(--clampography-border);border-radius:0.25rem;padding:0.125rem var(--spacing-xs);white-space:nowrap}:root kbd{transform:translateY(-0.15em)}:root pre{background-color:var(--clampography-surface);border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-md)}:root table{padding:var(--spacing-sm);border:1px solid var(--clampography-border)}:root th{color:var(--clampography-heading)}:root th, :root td{border:1px solid var(--clampography-border)}:root thead th{border-bottom-width:2px}:root tbody tr:nth-child(even){background-color:var(--clampography-surface)}:root caption, :root figcaption, :root .muted{color:var(--clampography-muted)}:root hr{height:1px;border-width:0;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:var(--spacing-md);border-radius:0.25rem;font-style:italic;color:var(--clampography-heading)}:root mark{background-color:var(--clampography-primary);color:var(--clampography-background);padding:0.125rem var(--spacing-xs);border-radius:0.25rem}:root del{text-decoration-color:var(--clampography-secondary);text-decoration-thickness:2px}:root details{border:1px solid var(--clampography-border);border-radius:0.375rem;padding:var(--spacing-sm)}:root summary{color:var(--clampography-heading);border-bottom:0px solid var(--clampography-border)}:root details[open] > summary{border-bottom-width:1px;padding-bottom:var(--spacing-sm)}}
package/package.json CHANGED
@@ -24,9 +24,8 @@
24
24
  "src",
25
25
  "css"
26
26
  ],
27
- "unpkg": "css/clampography.min.css",
28
- "jsdelivr": "css/clampography.min.css",
29
27
  "homepage": "https://next.dav.one/clampography/",
28
+ "jsdelivr": "css/clampography.min.css",
30
29
  "keywords": [
31
30
  "alternative",
32
31
  "blog",
@@ -62,11 +61,12 @@
62
61
  },
63
62
  "scripts": {
64
63
  "build": "bun src/convert.js",
65
- "test": "bun test",
66
- "dev:css": "bunx @tailwindcss/cli -i ./dev/input.css -o ./dev/output.css --watch",
64
+ "dev": "bun run dev/server.js",
67
65
  "dev:server": "bun run dev/server.js",
68
- "dev": "bun run dev/server.js"
66
+ "test": "bun test"
69
67
  },
68
+ "sideEffects": false,
70
69
  "type": "module",
71
- "version": "2.0.0-beta.26"
70
+ "unpkg": "css/clampography.min.css",
71
+ "version": "2.0.0-beta.27"
72
72
  }
package/src/base.js CHANGED
@@ -32,8 +32,9 @@ export default (options = {}) => {
32
32
  };
33
33
 
34
34
  return {
35
- // ROOT CONFIGURATION
36
- [root]: {
35
+ // ROOT CONFIGURATION (CSS variables)
36
+ // Uses :where() for zero specificity so user overrides always win regardless of layer/source order
37
+ [`:where(${root})`]: {
37
38
  "--spacing-xs": "clamp(0.25rem, 1.25vw, 0.75rem)",
38
39
  "--spacing-sm": "clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem)",
39
40
  "--spacing-md": "clamp(0.5rem, 2.5vw, 1.5rem)",
@@ -42,12 +43,37 @@ export default (options = {}) => {
42
43
  "--list-indent": "clamp(1.5rem, 1.25rem + 1.25vw, 2rem)",
43
44
  "--scroll-offset": "5rem",
44
45
  "--font-family-base":
45
- "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
46
+ "Inter, system-ui, -apple-system, 'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
46
47
  "--font-family-mono":
47
- "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
48
-
49
- // Body styles applied to the root container
50
- "font-family": "var(--font-family-base)",
48
+ "ui-monospace, 'Cascadia Code', 'Cascadia Mono', 'Segoe UI Mono', 'Ubuntu Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
49
+
50
+ // Heading size tokens (30→54px, 22→30px, 18→24px, 16→20px, static)
51
+ // Override any of these in :root to customize individual headings.
52
+ "--clampography-h1-size": "clamp(1.875rem, 1.375rem + 2.5vw, 3.375rem)",
53
+ "--clampography-h2-size": "clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem)",
54
+ "--clampography-h3-size": "clamp(1.125rem, 1rem + 0.625vw, 1.5rem)",
55
+ "--clampography-h4-size": "clamp(1rem, 0.917rem + 0.42vw, 1.25rem)",
56
+ "--clampography-h5-size": "1rem",
57
+ "--clampography-h6-size": "0.875rem",
58
+
59
+ // Global heading scale multiplier (default: 1 = no scaling).
60
+ // Override in :root to proportionally scale all headings at once.
61
+ // Example: :root { --clampography-heading-scale: 0.85; }
62
+ "--clampography-heading-scale": "1",
63
+
64
+ // Individual heading scales (default to global scale)
65
+ "--clampography-h1-scale": "var(--clampography-heading-scale)",
66
+ "--clampography-h2-scale": "var(--clampography-heading-scale)",
67
+ "--clampography-h3-scale": "var(--clampography-heading-scale)",
68
+ "--clampography-h4-scale": "var(--clampography-heading-scale)",
69
+ "--clampography-h5-scale": "var(--clampography-heading-scale)",
70
+ "--clampography-h6-scale": "var(--clampography-heading-scale)",
71
+ },
72
+
73
+ // BODY STYLES (Typography baseline)
74
+ // Note: font-family is intentionally NOT set here.
75
+ // It is applied in extra.js with user-font priority via --font-sans.
76
+ [root === ":root" ? "body" : root]: {
51
77
  "font-size": "clamp(1rem, 0.95rem + 0.25vw, 1.125rem)",
52
78
  "line-height": "1.75",
53
79
  "text-rendering": "optimizeLegibility",
@@ -63,7 +89,7 @@ export default (options = {}) => {
63
89
  },
64
90
 
65
91
  [scope("h1")]: {
66
- "font-size": "clamp(2.25rem, 1.95rem + 1.5vw, 3rem)",
92
+ "font-size": "calc(var(--clampography-h1-size) * var(--clampography-h1-scale))",
67
93
  "line-height": "1.1111",
68
94
  "font-weight": "800",
69
95
  "margin-top": "0",
@@ -71,7 +97,7 @@ export default (options = {}) => {
71
97
  },
72
98
 
73
99
  [scope("h2")]: {
74
- "font-size": "clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem)",
100
+ "font-size": "calc(var(--clampography-h2-size) * var(--clampography-h2-scale))",
75
101
  "line-height": "1.3333",
76
102
  "font-weight": "700",
77
103
  "margin-top": "var(--spacing-xl)",
@@ -79,28 +105,28 @@ export default (options = {}) => {
79
105
  },
80
106
 
81
107
  [scope("h3")]: {
82
- "font-size": "clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem)",
108
+ "font-size": "calc(var(--clampography-h3-size) * var(--clampography-h3-scale))",
83
109
  "line-height": "1.5",
84
110
  "margin-top": "var(--spacing-lg)",
85
111
  "margin-bottom": "var(--spacing-sm)",
86
112
  },
87
113
 
88
114
  [scope("h4")]: {
89
- "font-size": "clamp(1rem, 0.975rem + 0.125vw, 1.125rem)",
115
+ "font-size": "calc(var(--clampography-h4-size) * var(--clampography-h4-scale))",
90
116
  "line-height": "1.5",
91
117
  "margin-top": "var(--spacing-lg)",
92
118
  "margin-bottom": "var(--spacing-sm)",
93
119
  },
94
120
 
95
121
  [scope("h5")]: {
96
- "font-size": "1rem",
122
+ "font-size": "calc(var(--clampography-h5-size) * var(--clampography-h5-scale))",
97
123
  "line-height": "1.5",
98
124
  "margin-top": "var(--spacing-md)",
99
125
  "margin-bottom": "var(--spacing-xs)",
100
126
  },
101
127
 
102
128
  [scope("h6")]: {
103
- "font-size": "0.875rem",
129
+ "font-size": "calc(var(--clampography-h6-size) * var(--clampography-h6-scale))",
104
130
  "line-height": "1.5",
105
131
  "margin-top": "var(--spacing-md)",
106
132
  "margin-bottom": "var(--spacing-xs)",
@@ -175,6 +201,8 @@ export default (options = {}) => {
175
201
  [scope(":where(code, kbd, samp)")]: {
176
202
  "font-family": "var(--font-family-mono)",
177
203
  "font-size": "0.875em",
204
+ "-webkit-font-smoothing": "auto",
205
+ "-moz-osx-font-smoothing": "auto",
178
206
  },
179
207
 
180
208
  [scope("kbd")]: {
@@ -358,6 +386,8 @@ export default (options = {}) => {
358
386
  "font-family": "var(--font-family-mono)",
359
387
  "line-height": "1.6",
360
388
  "overflow-x": "auto",
389
+ "-webkit-font-smoothing": "auto",
390
+ "-moz-osx-font-smoothing": "auto",
361
391
  },
362
392
 
363
393
  [scope("pre code")]: {
package/src/extra.js CHANGED
@@ -31,10 +31,13 @@ export default (options = {}) => {
31
31
  };
32
32
 
33
33
  return {
34
- // --- Basic Coloring ---
35
- [root]: {
34
+ // --- Basic Coloring & Font (with user-font priority) ---
35
+ [root === ":root" ? "body" : root]: {
36
36
  "background-color": "var(--clampography-background)",
37
37
  "color": "var(--clampography-text)",
38
+ // --font-sans is Tailwind v4's way to expose the user's font choice.
39
+ // If the user sets a font in their project, it wins. If not, fallback to clampography's system stack.
40
+ "font-family": "var(--font-sans, var(--font-family-base))",
38
41
  },
39
42
 
40
43
  [scope(":where(h1, h2, h3, h4, h5, h6)")]: {