quanta-strike 0.1.2 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -36
- package/fonts/quanta-strike-10-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-10-regular.woff2 +0 -0
- package/fonts/quanta-strike-12-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-12-regular.woff2 +0 -0
- package/fonts/quanta-strike-14-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-14-regular.woff2 +0 -0
- package/fonts/quanta-strike-16-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-16-regular.woff2 +0 -0
- package/fonts/quanta-strike-18-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-18-regular.woff2 +0 -0
- package/fonts/quanta-strike-20-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-20-regular.woff2 +0 -0
- package/fonts/quanta-strike-32-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-32-regular.woff2 +0 -0
- package/fonts/quanta-strike-6-mono-regular.woff2 +0 -0
- package/fonts/quanta-strike-6-regular.woff2 +0 -0
- package/package.json +3 -1
- package/scale/base-10.css +96 -0
- package/scale/base-12.css +99 -0
- package/scale/base-14.css +102 -0
- package/scale/base-16.css +105 -0
- package/scale/base-18.css +108 -0
- package/scale/base-20.css +104 -0
- package/scale/base-32.css +100 -0
- package/scale/base-6.css +93 -0
package/README.md
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
<img src="https://raw.githubusercontent.com/dithernaut/quanta-strike/main/docs/quanta-strike.png" alt="quanta-strike shown at different strike sizes" width="100%">
|
|
4
4
|
|
|
5
|
-
A modern pixel typeface. I draw each size by hand.
|
|
6
|
-
|
|
5
|
+
A modern pixel typeface. I draw each size by hand. Non-integer scaling ruins
|
|
6
|
+
pixels, so quanta-strike ships a family of _strikes_. Each strike is its own
|
|
7
|
+
design for one target size.
|
|
7
8
|
|
|
8
9
|
📖 **Read the story:** [dithernaut.com/posts/pixel-scaling](https://dithernaut.com/posts/pixel-scaling)
|
|
9
10
|
|
|
@@ -15,59 +16,102 @@ npm install quanta-strike
|
|
|
15
16
|
|
|
16
17
|
## Use it
|
|
17
18
|
|
|
18
|
-
Import the
|
|
19
|
+
Import the utilities, then use a class. The class sets family and size together.
|
|
19
20
|
|
|
20
21
|
```js
|
|
21
|
-
import "quanta-strike";
|
|
22
|
+
import "quanta-strike/utilities.css";
|
|
22
23
|
```
|
|
23
24
|
|
|
24
25
|
```html
|
|
25
|
-
<p class="qs-16">
|
|
26
|
+
<p class="qs-16">Sixteen pixels.</p>
|
|
26
27
|
<code class="qs-12-mono">const pixel = 1;</code>
|
|
27
28
|
```
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
Import one size instead of all eight if you only need one:
|
|
30
|
+
One strike only:
|
|
32
31
|
|
|
33
32
|
```js
|
|
34
33
|
import "quanta-strike/16.css";
|
|
35
34
|
```
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
Or the CDN:
|
|
38
37
|
|
|
39
|
-
|
|
38
|
+
```html
|
|
39
|
+
<link
|
|
40
|
+
rel="stylesheet"
|
|
41
|
+
href="https://cdn.jsdelivr.net/npm/quanta-strike/utilities.css"
|
|
42
|
+
/>
|
|
43
|
+
```
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
Strikes: `6`, `10`, `12`, `14`, `16`, `18`, `20`, `32`.
|
|
42
46
|
|
|
43
|
-
|
|
44
|
-
| ------------- | ------------------ |
|
|
45
|
-
| `.qs-16` | body text and UI |
|
|
46
|
-
| `.qs-16-mono` | code and terminals |
|
|
47
|
+
## Type scale (Tailwind)
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
Tailwind names sizes by role (`text-base`, `text-lg`, `text-xl`). Strikes are
|
|
50
|
+
fixed pixel designs (`12`, `14`, `16`). You have to pick which strike is body
|
|
51
|
+
text. That pick is the base preset. It maps the whole ladder so every `text-*`
|
|
52
|
+
step keeps size and family paired.
|
|
49
53
|
|
|
50
|
-
|
|
54
|
+
A dense body often looks best on strike 12. Import `base-12`, then zoom the
|
|
55
|
+
page with the root font-size:
|
|
51
56
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
57
|
+
```css
|
|
58
|
+
@import "tailwindcss";
|
|
59
|
+
@import "quanta-strike";
|
|
60
|
+
@import "quanta-strike/scale/base-12.css";
|
|
55
61
|
|
|
56
|
-
|
|
62
|
+
html {
|
|
63
|
+
font-size: 200%; /* zoom. 100% = 1 source pixel per CSS px */
|
|
64
|
+
}
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
`text-base` is now strike 12. Smaller and larger steps take the neighboring
|
|
68
|
+
strikes. Rem sizes stay at `N / 16`, so the zoom scales every strike together.
|
|
69
|
+
|
|
70
|
+
Want body at strike 16 and `1rem` at a 100% root? Use `base-16` instead:
|
|
57
71
|
|
|
58
72
|
```css
|
|
59
|
-
.
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
@import "quanta-strike/scale/base-16.css";
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Every strike has a preset: `scale/base-6.css` through `scale/base-32.css`.
|
|
77
|
+
|
|
78
|
+
## The one rule
|
|
79
|
+
|
|
80
|
+
Size and family travel together. `quanta-strike-16` is sharp at 16px. It blurs
|
|
81
|
+
everywhere else. Bind both in the same rule. Never split them.
|
|
82
|
+
|
|
83
|
+
| strike | class | custom property |
|
|
84
|
+
| ------------------ | -------- | ------------------ |
|
|
85
|
+
| `quanta-strike-6` | `.qs-6` | `--font-strike-6` |
|
|
86
|
+
| `quanta-strike-10` | `.qs-10` | `--font-strike-10` |
|
|
87
|
+
| `quanta-strike-12` | `.qs-12` | `--font-strike-12` |
|
|
88
|
+
| `quanta-strike-14` | `.qs-14` | `--font-strike-14` |
|
|
89
|
+
| `quanta-strike-16` | `.qs-16` | `--font-strike-16` |
|
|
90
|
+
| `quanta-strike-18` | `.qs-18` | `--font-strike-18` |
|
|
91
|
+
| `quanta-strike-20` | `.qs-20` | `--font-strike-20` |
|
|
92
|
+
| `quanta-strike-32` | `.qs-32` | `--font-strike-32` |
|
|
93
|
+
|
|
94
|
+
The `.qs-N` classes use `px`. They ignore the root font-size and stay at 1 CSS
|
|
95
|
+
px per source pixel.
|
|
96
|
+
|
|
97
|
+
## Mono
|
|
98
|
+
|
|
99
|
+
Add `.qs-mono` to a subtree. Every strike under it switches to mono. Sizes stay
|
|
100
|
+
put. The type scale never notices.
|
|
101
|
+
|
|
102
|
+
```html
|
|
103
|
+
<div class="qs-mono">
|
|
104
|
+
<p class="text-base">Mono body.</p>
|
|
105
|
+
</div>
|
|
63
106
|
```
|
|
64
107
|
|
|
65
|
-
|
|
108
|
+
Each strike also ships as its own family: proportional for UI, mono for code.
|
|
109
|
+
Mono is not a style of the proportional family.
|
|
66
110
|
|
|
67
111
|
## Responsive text
|
|
68
112
|
|
|
69
|
-
|
|
70
|
-
|
|
113
|
+
`clamp()` will not work. Change the size and you must change the family. Swap
|
|
114
|
+
the whole pair at a breakpoint.
|
|
71
115
|
|
|
72
116
|
```css
|
|
73
117
|
.title {
|
|
@@ -85,16 +129,15 @@ family too. So swap the whole class at a breakpoint:
|
|
|
85
129
|
|
|
86
130
|
## What you get
|
|
87
131
|
|
|
88
|
-
- `quanta-strike` loads every strike
|
|
89
|
-
- `quanta-strike/
|
|
90
|
-
-
|
|
91
|
-
-
|
|
132
|
+
- `quanta-strike` loads every strike
|
|
133
|
+
- `quanta-strike/utilities.css` gives the locked `.qs-N` classes
|
|
134
|
+
- `quanta-strike/scale/base-12.css` (and every other base) wires the type scale
|
|
135
|
+
- `quanta-strike/16.css` loads one strike
|
|
136
|
+
- `--font-strike-16` / `--font-strike-16-mono` for hand-rolled CSS
|
|
92
137
|
|
|
93
138
|
## Licence
|
|
94
139
|
|
|
95
140
|
SIL Open Font License 1.1. See `OFL.txt`.
|
|
96
141
|
|
|
97
|
-
|
|
98
|
-
[
|
|
99
|
-
Source and build pipeline at
|
|
100
|
-
[github.com/dithernaut/quanta-strike](https://github.com/dithernaut/quanta-strike).
|
|
142
|
+
Story: [dithernaut.com/posts/pixel-scaling](https://dithernaut.com/posts/pixel-scaling).
|
|
143
|
+
Source and build: [github.com/dithernaut/quanta-strike](https://github.com/dithernaut/quanta-strike).
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quanta-strike",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "A pixel typeface with one font per size. Every strike is drawn by hand and stays sharp at the size it was drawn for.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"font",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
".": "./quanta-strike.css",
|
|
31
31
|
"./quanta-strike.css": "./quanta-strike.css",
|
|
32
32
|
"./utilities.css": "./utilities.css",
|
|
33
|
+
"./scale/*": "./scale/*",
|
|
33
34
|
"./6.css": "./6.css",
|
|
34
35
|
"./10.css": "./10.css",
|
|
35
36
|
"./12.css": "./12.css",
|
|
@@ -44,6 +45,7 @@
|
|
|
44
45
|
},
|
|
45
46
|
"files": [
|
|
46
47
|
"*.css",
|
|
48
|
+
"scale/",
|
|
47
49
|
"fonts/",
|
|
48
50
|
"OFL.txt",
|
|
49
51
|
"README.md"
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 10 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-10.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-sm: 0.375rem;
|
|
17
|
+
--text-sm--line-height: 1;
|
|
18
|
+
--text-base: 0.625rem;
|
|
19
|
+
--text-base--line-height: 1;
|
|
20
|
+
--text-lg: 0.75rem;
|
|
21
|
+
--text-lg--line-height: 1;
|
|
22
|
+
--text-xl: 0.875rem;
|
|
23
|
+
--text-xl--line-height: 1;
|
|
24
|
+
--text-2xl: 1rem;
|
|
25
|
+
--text-2xl--line-height: 1;
|
|
26
|
+
--text-3xl: 1.125rem;
|
|
27
|
+
--text-3xl--line-height: 1;
|
|
28
|
+
--text-4xl: 1.25rem;
|
|
29
|
+
--text-4xl--line-height: 1;
|
|
30
|
+
--text-5xl: 2rem;
|
|
31
|
+
--text-5xl--line-height: 1;
|
|
32
|
+
--text-6xl: 2rem;
|
|
33
|
+
--text-6xl--line-height: 1;
|
|
34
|
+
--text-7xl: 2rem;
|
|
35
|
+
--text-7xl--line-height: 1;
|
|
36
|
+
--text-8xl: 2rem;
|
|
37
|
+
--text-8xl--line-height: 1;
|
|
38
|
+
--text-9xl: 2rem;
|
|
39
|
+
--text-9xl--line-height: 1;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
43
|
+
@layer utilities {
|
|
44
|
+
.text-sm {
|
|
45
|
+
font-family: var(--font-strike-6);
|
|
46
|
+
font-size: var(--text-sm);
|
|
47
|
+
line-height: 1;
|
|
48
|
+
}
|
|
49
|
+
.text-base {
|
|
50
|
+
font-family: var(--font-strike-10);
|
|
51
|
+
font-size: var(--text-base);
|
|
52
|
+
line-height: 1;
|
|
53
|
+
}
|
|
54
|
+
.text-lg {
|
|
55
|
+
font-family: var(--font-strike-12);
|
|
56
|
+
font-size: var(--text-lg);
|
|
57
|
+
line-height: 1;
|
|
58
|
+
}
|
|
59
|
+
.text-xl {
|
|
60
|
+
font-family: var(--font-strike-14);
|
|
61
|
+
font-size: var(--text-xl);
|
|
62
|
+
line-height: 1;
|
|
63
|
+
}
|
|
64
|
+
.text-2xl {
|
|
65
|
+
font-family: var(--font-strike-16);
|
|
66
|
+
font-size: var(--text-2xl);
|
|
67
|
+
line-height: 1;
|
|
68
|
+
}
|
|
69
|
+
.text-3xl {
|
|
70
|
+
font-family: var(--font-strike-18);
|
|
71
|
+
font-size: var(--text-3xl);
|
|
72
|
+
line-height: 1;
|
|
73
|
+
}
|
|
74
|
+
.text-4xl {
|
|
75
|
+
font-family: var(--font-strike-20);
|
|
76
|
+
font-size: var(--text-4xl);
|
|
77
|
+
line-height: 1;
|
|
78
|
+
}
|
|
79
|
+
.text-5xl,
|
|
80
|
+
.text-6xl,
|
|
81
|
+
.text-7xl,
|
|
82
|
+
.text-8xl,
|
|
83
|
+
.text-9xl {
|
|
84
|
+
font-family: var(--font-strike-32);
|
|
85
|
+
font-size: var(--text-5xl);
|
|
86
|
+
line-height: 1;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@layer base {
|
|
91
|
+
body {
|
|
92
|
+
font-family: var(--font-strike-10);
|
|
93
|
+
font-size: var(--text-base);
|
|
94
|
+
line-height: 1;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 12 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-12.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-xs: 0.375rem;
|
|
17
|
+
--text-xs--line-height: 1;
|
|
18
|
+
--text-sm: 0.625rem;
|
|
19
|
+
--text-sm--line-height: 1;
|
|
20
|
+
--text-base: 0.75rem;
|
|
21
|
+
--text-base--line-height: 1;
|
|
22
|
+
--text-lg: 0.875rem;
|
|
23
|
+
--text-lg--line-height: 1;
|
|
24
|
+
--text-xl: 1rem;
|
|
25
|
+
--text-xl--line-height: 1;
|
|
26
|
+
--text-2xl: 1.125rem;
|
|
27
|
+
--text-2xl--line-height: 1;
|
|
28
|
+
--text-3xl: 1.25rem;
|
|
29
|
+
--text-3xl--line-height: 1;
|
|
30
|
+
--text-4xl: 2rem;
|
|
31
|
+
--text-4xl--line-height: 1;
|
|
32
|
+
--text-5xl: 2rem;
|
|
33
|
+
--text-5xl--line-height: 1;
|
|
34
|
+
--text-6xl: 2rem;
|
|
35
|
+
--text-6xl--line-height: 1;
|
|
36
|
+
--text-7xl: 2rem;
|
|
37
|
+
--text-7xl--line-height: 1;
|
|
38
|
+
--text-8xl: 2rem;
|
|
39
|
+
--text-8xl--line-height: 1;
|
|
40
|
+
--text-9xl: 2rem;
|
|
41
|
+
--text-9xl--line-height: 1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
45
|
+
@layer utilities {
|
|
46
|
+
.text-xs {
|
|
47
|
+
font-family: var(--font-strike-6);
|
|
48
|
+
font-size: var(--text-xs);
|
|
49
|
+
line-height: 1;
|
|
50
|
+
}
|
|
51
|
+
.text-sm {
|
|
52
|
+
font-family: var(--font-strike-10);
|
|
53
|
+
font-size: var(--text-sm);
|
|
54
|
+
line-height: 1;
|
|
55
|
+
}
|
|
56
|
+
.text-base {
|
|
57
|
+
font-family: var(--font-strike-12);
|
|
58
|
+
font-size: var(--text-base);
|
|
59
|
+
line-height: 1;
|
|
60
|
+
}
|
|
61
|
+
.text-lg {
|
|
62
|
+
font-family: var(--font-strike-14);
|
|
63
|
+
font-size: var(--text-lg);
|
|
64
|
+
line-height: 1;
|
|
65
|
+
}
|
|
66
|
+
.text-xl {
|
|
67
|
+
font-family: var(--font-strike-16);
|
|
68
|
+
font-size: var(--text-xl);
|
|
69
|
+
line-height: 1;
|
|
70
|
+
}
|
|
71
|
+
.text-2xl {
|
|
72
|
+
font-family: var(--font-strike-18);
|
|
73
|
+
font-size: var(--text-2xl);
|
|
74
|
+
line-height: 1;
|
|
75
|
+
}
|
|
76
|
+
.text-3xl {
|
|
77
|
+
font-family: var(--font-strike-20);
|
|
78
|
+
font-size: var(--text-3xl);
|
|
79
|
+
line-height: 1;
|
|
80
|
+
}
|
|
81
|
+
.text-4xl,
|
|
82
|
+
.text-5xl,
|
|
83
|
+
.text-6xl,
|
|
84
|
+
.text-7xl,
|
|
85
|
+
.text-8xl,
|
|
86
|
+
.text-9xl {
|
|
87
|
+
font-family: var(--font-strike-32);
|
|
88
|
+
font-size: var(--text-4xl);
|
|
89
|
+
line-height: 1;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@layer base {
|
|
94
|
+
body {
|
|
95
|
+
font-family: var(--font-strike-12);
|
|
96
|
+
font-size: var(--text-base);
|
|
97
|
+
line-height: 1;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 14 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-14.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-2xs: 0.375rem;
|
|
17
|
+
--text-2xs--line-height: 1;
|
|
18
|
+
--text-xs: 0.625rem;
|
|
19
|
+
--text-xs--line-height: 1;
|
|
20
|
+
--text-sm: 0.75rem;
|
|
21
|
+
--text-sm--line-height: 1;
|
|
22
|
+
--text-base: 0.875rem;
|
|
23
|
+
--text-base--line-height: 1;
|
|
24
|
+
--text-lg: 1rem;
|
|
25
|
+
--text-lg--line-height: 1;
|
|
26
|
+
--text-xl: 1.125rem;
|
|
27
|
+
--text-xl--line-height: 1;
|
|
28
|
+
--text-2xl: 1.25rem;
|
|
29
|
+
--text-2xl--line-height: 1;
|
|
30
|
+
--text-3xl: 2rem;
|
|
31
|
+
--text-3xl--line-height: 1;
|
|
32
|
+
--text-4xl: 2rem;
|
|
33
|
+
--text-4xl--line-height: 1;
|
|
34
|
+
--text-5xl: 2rem;
|
|
35
|
+
--text-5xl--line-height: 1;
|
|
36
|
+
--text-6xl: 2rem;
|
|
37
|
+
--text-6xl--line-height: 1;
|
|
38
|
+
--text-7xl: 2rem;
|
|
39
|
+
--text-7xl--line-height: 1;
|
|
40
|
+
--text-8xl: 2rem;
|
|
41
|
+
--text-8xl--line-height: 1;
|
|
42
|
+
--text-9xl: 2rem;
|
|
43
|
+
--text-9xl--line-height: 1;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
47
|
+
@layer utilities {
|
|
48
|
+
.text-2xs {
|
|
49
|
+
font-family: var(--font-strike-6);
|
|
50
|
+
font-size: var(--text-2xs);
|
|
51
|
+
line-height: 1;
|
|
52
|
+
}
|
|
53
|
+
.text-xs {
|
|
54
|
+
font-family: var(--font-strike-10);
|
|
55
|
+
font-size: var(--text-xs);
|
|
56
|
+
line-height: 1;
|
|
57
|
+
}
|
|
58
|
+
.text-sm {
|
|
59
|
+
font-family: var(--font-strike-12);
|
|
60
|
+
font-size: var(--text-sm);
|
|
61
|
+
line-height: 1;
|
|
62
|
+
}
|
|
63
|
+
.text-base {
|
|
64
|
+
font-family: var(--font-strike-14);
|
|
65
|
+
font-size: var(--text-base);
|
|
66
|
+
line-height: 1;
|
|
67
|
+
}
|
|
68
|
+
.text-lg {
|
|
69
|
+
font-family: var(--font-strike-16);
|
|
70
|
+
font-size: var(--text-lg);
|
|
71
|
+
line-height: 1;
|
|
72
|
+
}
|
|
73
|
+
.text-xl {
|
|
74
|
+
font-family: var(--font-strike-18);
|
|
75
|
+
font-size: var(--text-xl);
|
|
76
|
+
line-height: 1;
|
|
77
|
+
}
|
|
78
|
+
.text-2xl {
|
|
79
|
+
font-family: var(--font-strike-20);
|
|
80
|
+
font-size: var(--text-2xl);
|
|
81
|
+
line-height: 1;
|
|
82
|
+
}
|
|
83
|
+
.text-3xl,
|
|
84
|
+
.text-4xl,
|
|
85
|
+
.text-5xl,
|
|
86
|
+
.text-6xl,
|
|
87
|
+
.text-7xl,
|
|
88
|
+
.text-8xl,
|
|
89
|
+
.text-9xl {
|
|
90
|
+
font-family: var(--font-strike-32);
|
|
91
|
+
font-size: var(--text-3xl);
|
|
92
|
+
line-height: 1;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@layer base {
|
|
97
|
+
body {
|
|
98
|
+
font-family: var(--font-strike-14);
|
|
99
|
+
font-size: var(--text-base);
|
|
100
|
+
line-height: 1;
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 16 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-16.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-3xs: 0.375rem;
|
|
17
|
+
--text-3xs--line-height: 1;
|
|
18
|
+
--text-2xs: 0.625rem;
|
|
19
|
+
--text-2xs--line-height: 1;
|
|
20
|
+
--text-xs: 0.75rem;
|
|
21
|
+
--text-xs--line-height: 1;
|
|
22
|
+
--text-sm: 0.875rem;
|
|
23
|
+
--text-sm--line-height: 1;
|
|
24
|
+
--text-base: 1rem;
|
|
25
|
+
--text-base--line-height: 1;
|
|
26
|
+
--text-lg: 1.125rem;
|
|
27
|
+
--text-lg--line-height: 1;
|
|
28
|
+
--text-xl: 1.25rem;
|
|
29
|
+
--text-xl--line-height: 1;
|
|
30
|
+
--text-2xl: 2rem;
|
|
31
|
+
--text-2xl--line-height: 1;
|
|
32
|
+
--text-3xl: 2rem;
|
|
33
|
+
--text-3xl--line-height: 1;
|
|
34
|
+
--text-4xl: 2rem;
|
|
35
|
+
--text-4xl--line-height: 1;
|
|
36
|
+
--text-5xl: 2rem;
|
|
37
|
+
--text-5xl--line-height: 1;
|
|
38
|
+
--text-6xl: 2rem;
|
|
39
|
+
--text-6xl--line-height: 1;
|
|
40
|
+
--text-7xl: 2rem;
|
|
41
|
+
--text-7xl--line-height: 1;
|
|
42
|
+
--text-8xl: 2rem;
|
|
43
|
+
--text-8xl--line-height: 1;
|
|
44
|
+
--text-9xl: 2rem;
|
|
45
|
+
--text-9xl--line-height: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
49
|
+
@layer utilities {
|
|
50
|
+
.text-3xs {
|
|
51
|
+
font-family: var(--font-strike-6);
|
|
52
|
+
font-size: var(--text-3xs);
|
|
53
|
+
line-height: 1;
|
|
54
|
+
}
|
|
55
|
+
.text-2xs {
|
|
56
|
+
font-family: var(--font-strike-10);
|
|
57
|
+
font-size: var(--text-2xs);
|
|
58
|
+
line-height: 1;
|
|
59
|
+
}
|
|
60
|
+
.text-xs {
|
|
61
|
+
font-family: var(--font-strike-12);
|
|
62
|
+
font-size: var(--text-xs);
|
|
63
|
+
line-height: 1;
|
|
64
|
+
}
|
|
65
|
+
.text-sm {
|
|
66
|
+
font-family: var(--font-strike-14);
|
|
67
|
+
font-size: var(--text-sm);
|
|
68
|
+
line-height: 1;
|
|
69
|
+
}
|
|
70
|
+
.text-base {
|
|
71
|
+
font-family: var(--font-strike-16);
|
|
72
|
+
font-size: var(--text-base);
|
|
73
|
+
line-height: 1;
|
|
74
|
+
}
|
|
75
|
+
.text-lg {
|
|
76
|
+
font-family: var(--font-strike-18);
|
|
77
|
+
font-size: var(--text-lg);
|
|
78
|
+
line-height: 1;
|
|
79
|
+
}
|
|
80
|
+
.text-xl {
|
|
81
|
+
font-family: var(--font-strike-20);
|
|
82
|
+
font-size: var(--text-xl);
|
|
83
|
+
line-height: 1;
|
|
84
|
+
}
|
|
85
|
+
.text-2xl,
|
|
86
|
+
.text-3xl,
|
|
87
|
+
.text-4xl,
|
|
88
|
+
.text-5xl,
|
|
89
|
+
.text-6xl,
|
|
90
|
+
.text-7xl,
|
|
91
|
+
.text-8xl,
|
|
92
|
+
.text-9xl {
|
|
93
|
+
font-family: var(--font-strike-32);
|
|
94
|
+
font-size: var(--text-2xl);
|
|
95
|
+
line-height: 1;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@layer base {
|
|
100
|
+
body {
|
|
101
|
+
font-family: var(--font-strike-16);
|
|
102
|
+
font-size: var(--text-base);
|
|
103
|
+
line-height: 1;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 18 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-18.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-4xs: 0.375rem;
|
|
17
|
+
--text-4xs--line-height: 1;
|
|
18
|
+
--text-3xs: 0.625rem;
|
|
19
|
+
--text-3xs--line-height: 1;
|
|
20
|
+
--text-2xs: 0.75rem;
|
|
21
|
+
--text-2xs--line-height: 1;
|
|
22
|
+
--text-xs: 0.875rem;
|
|
23
|
+
--text-xs--line-height: 1;
|
|
24
|
+
--text-sm: 1rem;
|
|
25
|
+
--text-sm--line-height: 1;
|
|
26
|
+
--text-base: 1.125rem;
|
|
27
|
+
--text-base--line-height: 1;
|
|
28
|
+
--text-lg: 1.25rem;
|
|
29
|
+
--text-lg--line-height: 1;
|
|
30
|
+
--text-xl: 2rem;
|
|
31
|
+
--text-xl--line-height: 1;
|
|
32
|
+
--text-2xl: 2rem;
|
|
33
|
+
--text-2xl--line-height: 1;
|
|
34
|
+
--text-3xl: 2rem;
|
|
35
|
+
--text-3xl--line-height: 1;
|
|
36
|
+
--text-4xl: 2rem;
|
|
37
|
+
--text-4xl--line-height: 1;
|
|
38
|
+
--text-5xl: 2rem;
|
|
39
|
+
--text-5xl--line-height: 1;
|
|
40
|
+
--text-6xl: 2rem;
|
|
41
|
+
--text-6xl--line-height: 1;
|
|
42
|
+
--text-7xl: 2rem;
|
|
43
|
+
--text-7xl--line-height: 1;
|
|
44
|
+
--text-8xl: 2rem;
|
|
45
|
+
--text-8xl--line-height: 1;
|
|
46
|
+
--text-9xl: 2rem;
|
|
47
|
+
--text-9xl--line-height: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
51
|
+
@layer utilities {
|
|
52
|
+
.text-4xs {
|
|
53
|
+
font-family: var(--font-strike-6);
|
|
54
|
+
font-size: var(--text-4xs);
|
|
55
|
+
line-height: 1;
|
|
56
|
+
}
|
|
57
|
+
.text-3xs {
|
|
58
|
+
font-family: var(--font-strike-10);
|
|
59
|
+
font-size: var(--text-3xs);
|
|
60
|
+
line-height: 1;
|
|
61
|
+
}
|
|
62
|
+
.text-2xs {
|
|
63
|
+
font-family: var(--font-strike-12);
|
|
64
|
+
font-size: var(--text-2xs);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
}
|
|
67
|
+
.text-xs {
|
|
68
|
+
font-family: var(--font-strike-14);
|
|
69
|
+
font-size: var(--text-xs);
|
|
70
|
+
line-height: 1;
|
|
71
|
+
}
|
|
72
|
+
.text-sm {
|
|
73
|
+
font-family: var(--font-strike-16);
|
|
74
|
+
font-size: var(--text-sm);
|
|
75
|
+
line-height: 1;
|
|
76
|
+
}
|
|
77
|
+
.text-base {
|
|
78
|
+
font-family: var(--font-strike-18);
|
|
79
|
+
font-size: var(--text-base);
|
|
80
|
+
line-height: 1;
|
|
81
|
+
}
|
|
82
|
+
.text-lg {
|
|
83
|
+
font-family: var(--font-strike-20);
|
|
84
|
+
font-size: var(--text-lg);
|
|
85
|
+
line-height: 1;
|
|
86
|
+
}
|
|
87
|
+
.text-xl,
|
|
88
|
+
.text-2xl,
|
|
89
|
+
.text-3xl,
|
|
90
|
+
.text-4xl,
|
|
91
|
+
.text-5xl,
|
|
92
|
+
.text-6xl,
|
|
93
|
+
.text-7xl,
|
|
94
|
+
.text-8xl,
|
|
95
|
+
.text-9xl {
|
|
96
|
+
font-family: var(--font-strike-32);
|
|
97
|
+
font-size: var(--text-xl);
|
|
98
|
+
line-height: 1;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@layer base {
|
|
103
|
+
body {
|
|
104
|
+
font-family: var(--font-strike-18);
|
|
105
|
+
font-size: var(--text-base);
|
|
106
|
+
line-height: 1;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 20 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-20.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-4xs: 0.625rem;
|
|
17
|
+
--text-4xs--line-height: 1;
|
|
18
|
+
--text-3xs: 0.75rem;
|
|
19
|
+
--text-3xs--line-height: 1;
|
|
20
|
+
--text-2xs: 0.875rem;
|
|
21
|
+
--text-2xs--line-height: 1;
|
|
22
|
+
--text-xs: 1rem;
|
|
23
|
+
--text-xs--line-height: 1;
|
|
24
|
+
--text-sm: 1.125rem;
|
|
25
|
+
--text-sm--line-height: 1;
|
|
26
|
+
--text-base: 1.25rem;
|
|
27
|
+
--text-base--line-height: 1;
|
|
28
|
+
--text-lg: 2rem;
|
|
29
|
+
--text-lg--line-height: 1;
|
|
30
|
+
--text-xl: 2rem;
|
|
31
|
+
--text-xl--line-height: 1;
|
|
32
|
+
--text-2xl: 2rem;
|
|
33
|
+
--text-2xl--line-height: 1;
|
|
34
|
+
--text-3xl: 2rem;
|
|
35
|
+
--text-3xl--line-height: 1;
|
|
36
|
+
--text-4xl: 2rem;
|
|
37
|
+
--text-4xl--line-height: 1;
|
|
38
|
+
--text-5xl: 2rem;
|
|
39
|
+
--text-5xl--line-height: 1;
|
|
40
|
+
--text-6xl: 2rem;
|
|
41
|
+
--text-6xl--line-height: 1;
|
|
42
|
+
--text-7xl: 2rem;
|
|
43
|
+
--text-7xl--line-height: 1;
|
|
44
|
+
--text-8xl: 2rem;
|
|
45
|
+
--text-8xl--line-height: 1;
|
|
46
|
+
--text-9xl: 2rem;
|
|
47
|
+
--text-9xl--line-height: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
51
|
+
@layer utilities {
|
|
52
|
+
.text-4xs {
|
|
53
|
+
font-family: var(--font-strike-10);
|
|
54
|
+
font-size: var(--text-4xs);
|
|
55
|
+
line-height: 1;
|
|
56
|
+
}
|
|
57
|
+
.text-3xs {
|
|
58
|
+
font-family: var(--font-strike-12);
|
|
59
|
+
font-size: var(--text-3xs);
|
|
60
|
+
line-height: 1;
|
|
61
|
+
}
|
|
62
|
+
.text-2xs {
|
|
63
|
+
font-family: var(--font-strike-14);
|
|
64
|
+
font-size: var(--text-2xs);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
}
|
|
67
|
+
.text-xs {
|
|
68
|
+
font-family: var(--font-strike-16);
|
|
69
|
+
font-size: var(--text-xs);
|
|
70
|
+
line-height: 1;
|
|
71
|
+
}
|
|
72
|
+
.text-sm {
|
|
73
|
+
font-family: var(--font-strike-18);
|
|
74
|
+
font-size: var(--text-sm);
|
|
75
|
+
line-height: 1;
|
|
76
|
+
}
|
|
77
|
+
.text-base {
|
|
78
|
+
font-family: var(--font-strike-20);
|
|
79
|
+
font-size: var(--text-base);
|
|
80
|
+
line-height: 1;
|
|
81
|
+
}
|
|
82
|
+
.text-lg,
|
|
83
|
+
.text-xl,
|
|
84
|
+
.text-2xl,
|
|
85
|
+
.text-3xl,
|
|
86
|
+
.text-4xl,
|
|
87
|
+
.text-5xl,
|
|
88
|
+
.text-6xl,
|
|
89
|
+
.text-7xl,
|
|
90
|
+
.text-8xl,
|
|
91
|
+
.text-9xl {
|
|
92
|
+
font-family: var(--font-strike-32);
|
|
93
|
+
font-size: var(--text-lg);
|
|
94
|
+
line-height: 1;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@layer base {
|
|
99
|
+
body {
|
|
100
|
+
font-family: var(--font-strike-20);
|
|
101
|
+
font-size: var(--text-base);
|
|
102
|
+
line-height: 1;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 32 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-32.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-4xs: 0.75rem;
|
|
17
|
+
--text-4xs--line-height: 1;
|
|
18
|
+
--text-3xs: 0.875rem;
|
|
19
|
+
--text-3xs--line-height: 1;
|
|
20
|
+
--text-2xs: 1rem;
|
|
21
|
+
--text-2xs--line-height: 1;
|
|
22
|
+
--text-xs: 1.125rem;
|
|
23
|
+
--text-xs--line-height: 1;
|
|
24
|
+
--text-sm: 1.25rem;
|
|
25
|
+
--text-sm--line-height: 1;
|
|
26
|
+
--text-base: 2rem;
|
|
27
|
+
--text-base--line-height: 1;
|
|
28
|
+
--text-lg: 2rem;
|
|
29
|
+
--text-lg--line-height: 1;
|
|
30
|
+
--text-xl: 2rem;
|
|
31
|
+
--text-xl--line-height: 1;
|
|
32
|
+
--text-2xl: 2rem;
|
|
33
|
+
--text-2xl--line-height: 1;
|
|
34
|
+
--text-3xl: 2rem;
|
|
35
|
+
--text-3xl--line-height: 1;
|
|
36
|
+
--text-4xl: 2rem;
|
|
37
|
+
--text-4xl--line-height: 1;
|
|
38
|
+
--text-5xl: 2rem;
|
|
39
|
+
--text-5xl--line-height: 1;
|
|
40
|
+
--text-6xl: 2rem;
|
|
41
|
+
--text-6xl--line-height: 1;
|
|
42
|
+
--text-7xl: 2rem;
|
|
43
|
+
--text-7xl--line-height: 1;
|
|
44
|
+
--text-8xl: 2rem;
|
|
45
|
+
--text-8xl--line-height: 1;
|
|
46
|
+
--text-9xl: 2rem;
|
|
47
|
+
--text-9xl--line-height: 1;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
51
|
+
@layer utilities {
|
|
52
|
+
.text-4xs {
|
|
53
|
+
font-family: var(--font-strike-12);
|
|
54
|
+
font-size: var(--text-4xs);
|
|
55
|
+
line-height: 1;
|
|
56
|
+
}
|
|
57
|
+
.text-3xs {
|
|
58
|
+
font-family: var(--font-strike-14);
|
|
59
|
+
font-size: var(--text-3xs);
|
|
60
|
+
line-height: 1;
|
|
61
|
+
}
|
|
62
|
+
.text-2xs {
|
|
63
|
+
font-family: var(--font-strike-16);
|
|
64
|
+
font-size: var(--text-2xs);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
}
|
|
67
|
+
.text-xs {
|
|
68
|
+
font-family: var(--font-strike-18);
|
|
69
|
+
font-size: var(--text-xs);
|
|
70
|
+
line-height: 1;
|
|
71
|
+
}
|
|
72
|
+
.text-sm {
|
|
73
|
+
font-family: var(--font-strike-20);
|
|
74
|
+
font-size: var(--text-sm);
|
|
75
|
+
line-height: 1;
|
|
76
|
+
}
|
|
77
|
+
.text-base,
|
|
78
|
+
.text-lg,
|
|
79
|
+
.text-xl,
|
|
80
|
+
.text-2xl,
|
|
81
|
+
.text-3xl,
|
|
82
|
+
.text-4xl,
|
|
83
|
+
.text-5xl,
|
|
84
|
+
.text-6xl,
|
|
85
|
+
.text-7xl,
|
|
86
|
+
.text-8xl,
|
|
87
|
+
.text-9xl {
|
|
88
|
+
font-family: var(--font-strike-32);
|
|
89
|
+
font-size: var(--text-base);
|
|
90
|
+
line-height: 1;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@layer base {
|
|
95
|
+
body {
|
|
96
|
+
font-family: var(--font-strike-32);
|
|
97
|
+
font-size: var(--text-base);
|
|
98
|
+
line-height: 1;
|
|
99
|
+
}
|
|
100
|
+
}
|
package/scale/base-6.css
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/* quanta-strike — generated by scripts/generate-css.py. Do not edit by hand.
|
|
2
|
+
*
|
|
3
|
+
* Type scale with strike 6 as text-base.
|
|
4
|
+
* Rem sizes are always N/16, so html { font-size: 100% } keeps
|
|
5
|
+
* 1 source pixel = 1 CSS px. Zoom with html { font-size: …% };
|
|
6
|
+
* do not change the rem values.
|
|
7
|
+
*
|
|
8
|
+
* @import "tailwindcss";
|
|
9
|
+
* @import "quanta-strike";
|
|
10
|
+
* @import "quanta-strike/scale/base-6.css";
|
|
11
|
+
*
|
|
12
|
+
* https://github.com/dithernaut/quanta-strike
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@theme {
|
|
16
|
+
--text-base: 0.375rem;
|
|
17
|
+
--text-base--line-height: 1;
|
|
18
|
+
--text-lg: 0.625rem;
|
|
19
|
+
--text-lg--line-height: 1;
|
|
20
|
+
--text-xl: 0.75rem;
|
|
21
|
+
--text-xl--line-height: 1;
|
|
22
|
+
--text-2xl: 0.875rem;
|
|
23
|
+
--text-2xl--line-height: 1;
|
|
24
|
+
--text-3xl: 1rem;
|
|
25
|
+
--text-3xl--line-height: 1;
|
|
26
|
+
--text-4xl: 1.125rem;
|
|
27
|
+
--text-4xl--line-height: 1;
|
|
28
|
+
--text-5xl: 1.25rem;
|
|
29
|
+
--text-5xl--line-height: 1;
|
|
30
|
+
--text-6xl: 2rem;
|
|
31
|
+
--text-6xl--line-height: 1;
|
|
32
|
+
--text-7xl: 2rem;
|
|
33
|
+
--text-7xl--line-height: 1;
|
|
34
|
+
--text-8xl: 2rem;
|
|
35
|
+
--text-8xl--line-height: 1;
|
|
36
|
+
--text-9xl: 2rem;
|
|
37
|
+
--text-9xl--line-height: 1;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Family and size together. text-* alone would drop the strike. */
|
|
41
|
+
@layer utilities {
|
|
42
|
+
.text-base {
|
|
43
|
+
font-family: var(--font-strike-6);
|
|
44
|
+
font-size: var(--text-base);
|
|
45
|
+
line-height: 1;
|
|
46
|
+
}
|
|
47
|
+
.text-lg {
|
|
48
|
+
font-family: var(--font-strike-10);
|
|
49
|
+
font-size: var(--text-lg);
|
|
50
|
+
line-height: 1;
|
|
51
|
+
}
|
|
52
|
+
.text-xl {
|
|
53
|
+
font-family: var(--font-strike-12);
|
|
54
|
+
font-size: var(--text-xl);
|
|
55
|
+
line-height: 1;
|
|
56
|
+
}
|
|
57
|
+
.text-2xl {
|
|
58
|
+
font-family: var(--font-strike-14);
|
|
59
|
+
font-size: var(--text-2xl);
|
|
60
|
+
line-height: 1;
|
|
61
|
+
}
|
|
62
|
+
.text-3xl {
|
|
63
|
+
font-family: var(--font-strike-16);
|
|
64
|
+
font-size: var(--text-3xl);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
}
|
|
67
|
+
.text-4xl {
|
|
68
|
+
font-family: var(--font-strike-18);
|
|
69
|
+
font-size: var(--text-4xl);
|
|
70
|
+
line-height: 1;
|
|
71
|
+
}
|
|
72
|
+
.text-5xl {
|
|
73
|
+
font-family: var(--font-strike-20);
|
|
74
|
+
font-size: var(--text-5xl);
|
|
75
|
+
line-height: 1;
|
|
76
|
+
}
|
|
77
|
+
.text-6xl,
|
|
78
|
+
.text-7xl,
|
|
79
|
+
.text-8xl,
|
|
80
|
+
.text-9xl {
|
|
81
|
+
font-family: var(--font-strike-32);
|
|
82
|
+
font-size: var(--text-6xl);
|
|
83
|
+
line-height: 1;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@layer base {
|
|
88
|
+
body {
|
|
89
|
+
font-family: var(--font-strike-6);
|
|
90
|
+
font-size: var(--text-base);
|
|
91
|
+
line-height: 1;
|
|
92
|
+
}
|
|
93
|
+
}
|