clampography 2.0.0-beta.25 → 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.
- package/css/base.css +36 -16
- package/css/base.min.css +1 -1
- package/css/clampography.css +121 -27
- package/css/clampography.min.css +1 -1
- package/css/extra.css +10 -8
- package/css/extra.min.css +1 -1
- package/css/forms.css +74 -2
- package/css/forms.min.css +1 -1
- package/css/kbd.css +1 -1
- package/css/kbd.min.css +1 -1
- package/package.json +6 -3
- package/src/base.js +50 -19
- package/src/extra.js +13 -9
- package/src/forms.js +87 -3
- package/src/kbd.js +1 -1
- package/src/themes.js +1584 -32
package/css/base.css
CHANGED
|
@@ -1,16 +1,31 @@
|
|
|
1
1
|
@layer base {
|
|
2
2
|
|
|
3
|
-
:root {
|
|
4
|
-
--spacing-xs: clamp(0.
|
|
5
|
-
--spacing-sm: clamp(0.
|
|
6
|
-
--spacing-md: clamp(
|
|
7
|
-
--spacing-lg: clamp(
|
|
8
|
-
--spacing-xl: clamp(
|
|
3
|
+
:where(:root) {
|
|
4
|
+
--spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
|
|
5
|
+
--spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
|
|
6
|
+
--spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
|
|
7
|
+
--spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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 {
|
|
@@ -160,6 +177,7 @@
|
|
|
160
177
|
|
|
161
178
|
:root abbr[title] {
|
|
162
179
|
text-decoration: underline dotted;
|
|
180
|
+
text-underline-offset: 4px;
|
|
163
181
|
cursor: help;
|
|
164
182
|
}
|
|
165
183
|
|
|
@@ -307,6 +325,8 @@
|
|
|
307
325
|
font-family: var(--font-family-mono);
|
|
308
326
|
line-height: 1.6;
|
|
309
327
|
overflow-x: auto;
|
|
328
|
+
-webkit-font-smoothing: auto;
|
|
329
|
+
-moz-osx-font-smoothing: auto;
|
|
310
330
|
}
|
|
311
331
|
|
|
312
332
|
:root pre code {
|
|
@@ -333,7 +353,7 @@
|
|
|
333
353
|
:root fieldset {
|
|
334
354
|
margin-top: var(--spacing-md);
|
|
335
355
|
margin-bottom: var(--spacing-md);
|
|
336
|
-
padding: var(--spacing-
|
|
356
|
+
padding: var(--spacing-sm);
|
|
337
357
|
}
|
|
338
358
|
|
|
339
359
|
:root legend {
|
package/css/base.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{:root{--spacing-xs:clamp(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,17 +6,32 @@
|
|
|
6
6
|
/* --- base.js --- */
|
|
7
7
|
@layer base {
|
|
8
8
|
|
|
9
|
-
:root {
|
|
10
|
-
--spacing-xs: clamp(0.
|
|
11
|
-
--spacing-sm: clamp(0.
|
|
12
|
-
--spacing-md: clamp(
|
|
13
|
-
--spacing-lg: clamp(
|
|
14
|
-
--spacing-xl: clamp(
|
|
9
|
+
:where(:root) {
|
|
10
|
+
--spacing-xs: clamp(0.25rem, 1.25vw, 0.75rem);
|
|
11
|
+
--spacing-sm: clamp(0.375rem, -0.0625rem + 2.1875vw, 1.25rem);
|
|
12
|
+
--spacing-md: clamp(0.5rem, 2.5vw, 1.5rem);
|
|
13
|
+
--spacing-lg: clamp(0.75rem, -0.125rem + 4.375vw, 2.5rem);
|
|
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
|
-
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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 {
|
|
@@ -166,6 +183,7 @@
|
|
|
166
183
|
|
|
167
184
|
:root abbr[title] {
|
|
168
185
|
text-decoration: underline dotted;
|
|
186
|
+
text-underline-offset: 4px;
|
|
169
187
|
cursor: help;
|
|
170
188
|
}
|
|
171
189
|
|
|
@@ -313,6 +331,8 @@
|
|
|
313
331
|
font-family: var(--font-family-mono);
|
|
314
332
|
line-height: 1.6;
|
|
315
333
|
overflow-x: auto;
|
|
334
|
+
-webkit-font-smoothing: auto;
|
|
335
|
+
-moz-osx-font-smoothing: auto;
|
|
316
336
|
}
|
|
317
337
|
|
|
318
338
|
:root pre code {
|
|
@@ -339,7 +359,7 @@
|
|
|
339
359
|
:root fieldset {
|
|
340
360
|
margin-top: var(--spacing-md);
|
|
341
361
|
margin-bottom: var(--spacing-md);
|
|
342
|
-
padding: var(--spacing-
|
|
362
|
+
padding: var(--spacing-sm);
|
|
343
363
|
}
|
|
344
364
|
|
|
345
365
|
:root legend {
|
|
@@ -555,9 +575,10 @@
|
|
|
555
575
|
/* --- extra.js --- */
|
|
556
576
|
@layer base {
|
|
557
577
|
|
|
558
|
-
|
|
578
|
+
body {
|
|
559
579
|
background-color: var(--clampography-background);
|
|
560
580
|
color: var(--clampography-text);
|
|
581
|
+
font-family: var(--font-sans, var(--font-family-base));
|
|
561
582
|
}
|
|
562
583
|
|
|
563
584
|
:root :where(h1, h2, h3, h4, h5, h6) {
|
|
@@ -605,7 +626,7 @@
|
|
|
605
626
|
background-color: var(--clampography-surface);
|
|
606
627
|
border: 1px solid var(--clampography-border);
|
|
607
628
|
border-radius: 0.375rem;
|
|
608
|
-
padding:
|
|
629
|
+
padding: var(--spacing-md);
|
|
609
630
|
}
|
|
610
631
|
|
|
611
632
|
:root table {
|
|
@@ -636,8 +657,8 @@
|
|
|
636
657
|
:root hr {
|
|
637
658
|
height: 1px;
|
|
638
659
|
border-width: 0;
|
|
639
|
-
margin-top:
|
|
640
|
-
margin-bottom:
|
|
660
|
+
margin-top: var(--spacing-xl);
|
|
661
|
+
margin-bottom: var(--spacing-xl);
|
|
641
662
|
background-color: var(--clampography-border);
|
|
642
663
|
}
|
|
643
664
|
|
|
@@ -645,7 +666,7 @@
|
|
|
645
666
|
border-left-width: 4px;
|
|
646
667
|
border-left-color: var(--clampography-primary);
|
|
647
668
|
background-color: var(--clampography-surface);
|
|
648
|
-
padding:
|
|
669
|
+
padding: var(--spacing-md);
|
|
649
670
|
border-radius: 0.25rem;
|
|
650
671
|
font-style: italic;
|
|
651
672
|
color: var(--clampography-heading);
|
|
@@ -666,16 +687,17 @@
|
|
|
666
687
|
:root details {
|
|
667
688
|
border: 1px solid var(--clampography-border);
|
|
668
689
|
border-radius: 0.375rem;
|
|
669
|
-
padding:
|
|
690
|
+
padding: var(--spacing-sm);
|
|
670
691
|
}
|
|
671
692
|
|
|
672
693
|
:root summary {
|
|
673
694
|
color: var(--clampography-heading);
|
|
695
|
+
border-bottom: 0px solid var(--clampography-border);
|
|
674
696
|
}
|
|
675
697
|
|
|
676
698
|
:root details[open] > summary {
|
|
677
|
-
border-bottom: 1px
|
|
678
|
-
padding-bottom:
|
|
699
|
+
border-bottom-width: 1px;
|
|
700
|
+
padding-bottom: var(--spacing-sm);
|
|
679
701
|
}
|
|
680
702
|
}
|
|
681
703
|
|
|
@@ -847,9 +869,81 @@
|
|
|
847
869
|
font-weight: 600;
|
|
848
870
|
}
|
|
849
871
|
|
|
850
|
-
:root
|
|
851
|
-
|
|
872
|
+
:root progress {
|
|
873
|
+
-webkit-appearance: none;
|
|
874
|
+
appearance: none;
|
|
875
|
+
width: 100%;
|
|
876
|
+
height: 1em;
|
|
877
|
+
background: transparent;
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
:root progress::-webkit-progress-bar {
|
|
881
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
882
|
+
}
|
|
883
|
+
|
|
884
|
+
:root progress::-webkit-progress-value {
|
|
885
|
+
background: var(--clampography-success);
|
|
886
|
+
}
|
|
887
|
+
|
|
888
|
+
:root progress::-moz-progress-bar {
|
|
889
|
+
background: var(--clampography-success);
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
:root meter {
|
|
893
|
+
-webkit-appearance: none;
|
|
894
|
+
appearance: none;
|
|
852
895
|
width: 100%;
|
|
896
|
+
height: 1em;
|
|
897
|
+
background: transparent;
|
|
898
|
+
}
|
|
899
|
+
|
|
900
|
+
@supports (-moz-appearance: none) {
|
|
901
|
+
|
|
902
|
+
:root progress {
|
|
903
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
:root meter {
|
|
907
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
:root meter::-webkit-meter-inner-element {
|
|
912
|
+
display: flex;
|
|
913
|
+
align-items: stretch;
|
|
914
|
+
height: 1em;
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
:root meter::-webkit-meter-bar {
|
|
918
|
+
background: color-mix(in oklab, var(--clampography-text) 20%, transparent);
|
|
919
|
+
height: 100%;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
:root meter::-webkit-meter-optimum-value {
|
|
923
|
+
background: var(--clampography-success);
|
|
924
|
+
height: 100%;
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
:root meter:-moz-meter-optimum::-moz-meter-bar {
|
|
928
|
+
background: var(--clampography-success);
|
|
929
|
+
}
|
|
930
|
+
|
|
931
|
+
:root meter::-webkit-meter-suboptimum-value {
|
|
932
|
+
background: var(--clampography-warning);
|
|
933
|
+
height: 100%;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
:root meter:-moz-meter-sub-optimum::-moz-meter-bar {
|
|
937
|
+
background: var(--clampography-warning);
|
|
938
|
+
}
|
|
939
|
+
|
|
940
|
+
:root meter::-webkit-meter-even-less-good-value {
|
|
941
|
+
background: var(--clampography-error);
|
|
942
|
+
height: 100%;
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
:root meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
|
|
946
|
+
background: var(--clampography-error);
|
|
853
947
|
}
|
|
854
948
|
}
|
|
855
949
|
|
|
@@ -859,7 +953,7 @@
|
|
|
859
953
|
:root kbd {
|
|
860
954
|
display: inline-block;
|
|
861
955
|
padding: 0.1em 0.45em;
|
|
862
|
-
min-width:
|
|
956
|
+
min-width: 2em;
|
|
863
957
|
text-align: center;
|
|
864
958
|
font-size: 0.8em;
|
|
865
959
|
font-weight: 700;
|
package/css/clampography.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{:root{--spacing-xs:clamp(0.5rem, 0.375rem + 0.625vw, 0.75rem);--spacing-sm:clamp(0.75rem, 0.5625rem + 0.9375vw, 1.25rem);--spacing-md:clamp(1rem, 0.75rem + 1.25vw, 1.5rem);--spacing-lg:clamp(1.5rem, 1.125rem + 1.875vw, 2.5rem);--spacing-xl:clamp(2rem, 1.5rem + 2.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;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-md)}: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:1rem}: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:3rem;margin-bottom:3rem;background-color:var(--clampography-border)}:root blockquote{border-left-width:4px;border-left-color:var(--clampography-primary);background-color:var(--clampography-surface);padding:1rem;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:0.5rem}:root summary{color:var(--clampography-heading)}:root details[open] > summary{border-bottom:1px solid var(--clampography-border);padding-bottom:0.5rem}}@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 :where(meter, progress){accent-color:var(--clampography-primary);width:100%}}@layer base{:root kbd{display:inline-block;padding:0.1em 0.45em;min-width:1.6em;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
|
-
|
|
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) {
|
|
@@ -50,7 +51,7 @@
|
|
|
50
51
|
background-color: var(--clampography-surface);
|
|
51
52
|
border: 1px solid var(--clampography-border);
|
|
52
53
|
border-radius: 0.375rem;
|
|
53
|
-
padding:
|
|
54
|
+
padding: var(--spacing-md);
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
:root table {
|
|
@@ -81,8 +82,8 @@
|
|
|
81
82
|
:root hr {
|
|
82
83
|
height: 1px;
|
|
83
84
|
border-width: 0;
|
|
84
|
-
margin-top:
|
|
85
|
-
margin-bottom:
|
|
85
|
+
margin-top: var(--spacing-xl);
|
|
86
|
+
margin-bottom: var(--spacing-xl);
|
|
86
87
|
background-color: var(--clampography-border);
|
|
87
88
|
}
|
|
88
89
|
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
border-left-width: 4px;
|
|
91
92
|
border-left-color: var(--clampography-primary);
|
|
92
93
|
background-color: var(--clampography-surface);
|
|
93
|
-
padding:
|
|
94
|
+
padding: var(--spacing-md);
|
|
94
95
|
border-radius: 0.25rem;
|
|
95
96
|
font-style: italic;
|
|
96
97
|
color: var(--clampography-heading);
|
|
@@ -111,15 +112,16 @@
|
|
|
111
112
|
:root details {
|
|
112
113
|
border: 1px solid var(--clampography-border);
|
|
113
114
|
border-radius: 0.375rem;
|
|
114
|
-
padding:
|
|
115
|
+
padding: var(--spacing-sm);
|
|
115
116
|
}
|
|
116
117
|
|
|
117
118
|
:root summary {
|
|
118
119
|
color: var(--clampography-heading);
|
|
120
|
+
border-bottom: 0px solid var(--clampography-border);
|
|
119
121
|
}
|
|
120
122
|
|
|
121
123
|
:root details[open] > summary {
|
|
122
|
-
border-bottom: 1px
|
|
123
|
-
padding-bottom:
|
|
124
|
+
border-bottom-width: 1px;
|
|
125
|
+
padding-bottom: var(--spacing-sm);
|
|
124
126
|
}
|
|
125
127
|
}
|
package/css/extra.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base{
|
|
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)}}
|