+251 -234 +/-5 browse
1 | diff --git a/site/src/components/Prism.astro b/site/src/components/Prism.astro |
2 | index 771bd38..c1722e8 100644 |
3 | --- a/site/src/components/Prism.astro |
4 | +++ b/site/src/components/Prism.astro |
5 | @@ -1,10 +1,14 @@ |
6 | --- |
7 | import { Prism } from '@astrojs/prism'; |
8 | - const { code, lang } = Astro.props; |
9 | + let { code, lang, format } = Astro.props; |
10 | // Note: This is a CJS module |
11 | import formatter from 'js-beautify'; |
12 | const beautify = formatter.css; |
13 | - const formattedCode = beautify(code, { indent_size: 2 }) |
14 | + let formattedCode = code; |
15 | + format = format != null ? format : true; |
16 | + if(format) { |
17 | + formattedCode = beautify(code, { indent_size: 2 }) |
18 | + } |
19 | --- |
20 | |
21 | <Prism lang={lang} code={formattedCode} /> |
22 | diff --git a/site/src/components/Typography/Typography.astro b/site/src/components/Typography/Typography.astro |
23 | new file mode 100644 |
24 | index 0000000..f9a002b |
25 | --- /dev/null |
26 | +++ b/site/src/components/Typography/Typography.astro |
27 | @@ -0,0 +1,199 @@ |
28 | + --- |
29 | + import Prism from '../Prism.astro'; |
30 | + import styles from './Typography.module.css'; |
31 | + --- |
32 | + |
33 | + <section id="typography"> |
34 | + <header> |
35 | + <h2>Typography</h2> |
36 | + <p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p> |
37 | + </header> |
38 | + <div class="block-wrap"> |
39 | + <div> |
40 | + <h5>The Props</h5> |
41 | + <div class="var-examples"> |
42 | + <Prism lang="css" code={` |
43 | + /* A scale from 00-8 */ |
44 | + --font-size-8; |
45 | + /* A scale from 0-3 */ |
46 | + --font-size-fluid-3; |
47 | + /* A scale from 1-9 */ |
48 | + --font-weight-9; |
49 | + /* A scale from 0-7 */ |
50 | + --font-letterspacing-7; |
51 | + /* A scale from 00-5 */ |
52 | + --font-lineheight-5;`} /> |
53 | + </div> |
54 | + </div> |
55 | + |
56 | + <div> |
57 | + <h5>Usage Sample</h5> |
58 | + <Prism lang="css" code={`.hero { |
59 | + line-height: var(--font-lineheight-1); |
60 | + font-size: var(--font-size-fluid-3); |
61 | + font-weight: var(--font-weight-9); |
62 | + font-family: var(--font-sans); |
63 | + }`} /> |
64 | + </div> |
65 | + </div> |
66 | + |
67 | + <article class={styles.fontSizes}> |
68 | + <h4>Font Families</h4> |
69 | + <Prism format={false} lang="css" code={`--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; |
70 | + --font-serif: ui-serif, serif; |
71 | + --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;`} /> |
72 | + <div class="block-wrap"> |
73 | + <div class="font-family-grid"> |
74 | + <code class=" language-css">--font-sans</code> |
75 | + <div> |
76 | + <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
77 | + </div> |
78 | + </div> |
79 | + <div class="font-family-grid"> |
80 | + <code class=" language-css">--font-serif</code> |
81 | + <div style="font-family: var(--font-serif)"> |
82 | + <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
83 | + </div> |
84 | + </div> |
85 | + <div class="font-family-grid"> |
86 | + <code class=" language-css">--font-mono</code> |
87 | + <div style="font-family: var(--font-mono)"> |
88 | + <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
89 | + </div> |
90 | + </div> |
91 | + </div> |
92 | + </article> |
93 | + |
94 | + <article class={styles.fontSizes}> |
95 | + <div class="block-wrap"> |
96 | + <div> |
97 | + <h4>Font Weights</h4> |
98 | + <Prism lang="css" code={`--font-weight-1: 100; |
99 | + --font-weight-2: 200; |
100 | + --font-weight-3: 300; |
101 | + --font-weight-4: 400; |
102 | + --font-weight-5: 500; |
103 | + --font-weight-6: 600; |
104 | + --font-weight-7: 700; |
105 | + --font-weight-8: 800; |
106 | + --font-weight-9: 900;`} /> |
107 | + </div> |
108 | + <div class="font-demo"> |
109 | + <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div> |
110 | + <input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9" style="--track-fill:44%;"> |
111 | + </div> |
112 | + </div> |
113 | + </article> |
114 | + |
115 | + <article class={styles.fontSizes}> |
116 | + <div class="block-wrap"> |
117 | + <div> |
118 | + <h4>Letter Spacing</h4> |
119 | + <Prism lang="css" code={`--font-letterspacing-0: -.05em; |
120 | + --font-letterspacing-1: .025em; |
121 | + --font-letterspacing-2: .050em; |
122 | + --font-letterspacing-3: .075em; |
123 | + --font-letterspacing-4: .150em; |
124 | + --font-letterspacing-5: .500em; |
125 | + --font-letterspacing-6: .750em; |
126 | + --font-letterspacing-7: 1em;`} /> |
127 | + </div> |
128 | + <div class={styles.fontDemo}> |
129 | + <div class={styles.letterspacingDemo}>Letter Spacing</div> |
130 | + <input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0" max="7" style="--track-fill:14%;"> |
131 | + </div> |
132 | + </div> |
133 | + </article> |
134 | + |
135 | + <article class={styles.fontSizes}> |
136 | + <div class="block-wrap"> |
137 | + <div> |
138 | + <h4>Line Height</h4> |
139 | + <Prism lang="css" code={`--font-lineheight-00: .95; |
140 | + --font-lineheight-0: 1.1; |
141 | + --font-lineheight-1: 1.25; |
142 | + --font-lineheight-2: 1.375; |
143 | + --font-lineheight-3: 1.5; |
144 | + --font-lineheight-4: 1.75; |
145 | + --font-lineheight-5: 2;`} /> |
146 | + </div> |
147 | + <div class="font-demo"> |
148 | + <div class="sample-text" style="max-inline-size: var(--size-content-1);"> |
149 | + Sample paragraph content to provide a preview for OP's line heights |
150 | + </div> |
151 | + <input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5" style="--track-fill:33%;"> |
152 | + </div> |
153 | + </div> |
154 | + </article> |
155 | + |
156 | + <!-- <article class={styles.fontSizes}> |
157 | + <header> |
158 | + <h4>Relative Line Height</h4> |
159 | + <p>These line heights tighten as the font size is increased.</p> |
160 | + </header> |
161 | + <pre class="language-css"><code> |
162 | + --font-relative-lineheight-00: calc(1rem + .5ch); |
163 | + --font-relative-lineheight-0: calc(1rem + .75ch); |
164 | + --font-relative-lineheight-1: calc(1rem + 1ch); |
165 | + --font-relative-lineheight-2: calc(1rem + 1.25ch); |
166 | + --font-relative-lineheight-3: calc(1rem + 1.5ch); |
167 | + --font-relative-lineheight-4: calc(1rem + 2ch); |
168 | + --font-relative-lineheight-5: calc(1rem + 2.5ch); |
169 | + --font-relative-lineheight-6: calc(1rem + 3ch); |
170 | + </code></pre> |
171 | + </article> --> |
172 | + |
173 | + <article class={styles.fontSizes}> |
174 | + <h4>Font Sizes</h4> |
175 | + <Prism lang="css" code={`--font-size-00: .5rem; |
176 | + --font-size-0: .75rem; |
177 | + --font-size-1: 1rem; |
178 | + --font-size-2: 1.1rem; |
179 | + --font-size-3: 1.25rem; |
180 | + --font-size-4: 1.5rem; |
181 | + --font-size-5: 2rem; |
182 | + --font-size-6: 2.5rem; |
183 | + --font-size-7: 3rem; |
184 | + --font-size-8: 3.5rem;`} /> |
185 | + <div class="scroll-x-overflow"><div class={styles.fontSizeExamples}> |
186 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-00<span class="token punctuation">)</span></code> |
187 | + <span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span> |
188 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-0<span class="token punctuation">)</span></code> |
189 | + <span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span> |
190 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-1<span class="token punctuation">)</span></code> |
191 | + <span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span> |
192 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span></code> |
193 | + <span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span> |
194 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-3<span class="token punctuation">)</span></code> |
195 | + <span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span> |
196 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-4<span class="token punctuation">)</span></code> |
197 | + <span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span> |
198 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-5<span class="token punctuation">)</span></code> |
199 | + <span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span> |
200 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-6<span class="token punctuation">)</span></code> |
201 | + <span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span> |
202 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-7<span class="token punctuation">)</span></code> |
203 | + <span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span> |
204 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-8<span class="token punctuation">)</span></code> |
205 | + <span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span> |
206 | + </div></div> |
207 | + </article> |
208 | + |
209 | + <article class={styles.fontSizes}> |
210 | + <h4>Fluid Font Sizes</h4> |
211 | + <Prism lang="css" code={`--font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem); |
212 | + --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem); |
213 | + --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem); |
214 | + --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);`} /> |
215 | + <div class="scroll-x-overflow"><div class={styles.fontSizeExamples}> |
216 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-00<span class="token punctuation">)</span></code> |
217 | + <span style="font-size: var(--font-size-fluid-00)">Almost before you knew it, we'd touched ground.</span> |
218 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span></code> |
219 | + <span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span> |
220 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-2<span class="token punctuation">)</span></code> |
221 | + <span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span> |
222 | + <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span></code> |
223 | + <span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span> |
224 | + </div></div> |
225 | + </article> |
226 | + </section> |
227 | diff --git a/site/src/components/Typography/Typography.module.css b/site/src/components/Typography/Typography.module.css |
228 | new file mode 100644 |
229 | index 0000000..ce68357 |
230 | --- /dev/null |
231 | +++ b/site/src/components/Typography/Typography.module.css |
232 | @@ -0,0 +1,44 @@ |
233 | + .fontSizes { |
234 | + display: grid; |
235 | + gap: var(--size-3); |
236 | + |
237 | + & pre { |
238 | + max-inline-size: var(--max-inline-body); |
239 | + } |
240 | + } |
241 | + |
242 | + .fontDemo { |
243 | + flex-grow: 1; |
244 | + display: grid; |
245 | + gap: var(--size-2); |
246 | + align-content: center; |
247 | + align-self: stretch; |
248 | + text-align: center; |
249 | + |
250 | + & > :global(.sample-text) { |
251 | + margin-inline: auto; |
252 | + } |
253 | + } |
254 | + |
255 | + .letterspacingDemo { |
256 | + composes: sample-text from global; |
257 | + inline-size: min(var(--max-inline-body), var(--size-content-2)); |
258 | + } |
259 | + |
260 | + .fontSizeExamples { |
261 | + inline-size: max-content; |
262 | + display: grid; |
263 | + gap: var(--size-2); |
264 | + grid-template-columns: max-content 1fr; |
265 | + align-items: center; |
266 | + justify-items: flex-start; |
267 | + |
268 | + @media (--md-n-below) { |
269 | + grid-template-columns: 1fr; |
270 | + gap: var(--size-1); |
271 | + |
272 | + & > code:not(:first-of-type) { |
273 | + margin-block-start: var(--size-3); |
274 | + } |
275 | + } |
276 | + } |
277 | diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro |
278 | index 6224be4..9b4ef6b 100644 |
279 | --- a/site/src/pages/index.astro |
280 | +++ b/site/src/pages/index.astro |
281 | @@ -12,6 +12,7 @@ import Colors from '../components/Colors/Colors.astro'; |
282 | import Gradients from '../components/Gradients/Gradients.astro'; |
283 | import Shadows from '../components/Shadows/Shadows.astro'; |
284 | import AspectRatio from '../components/AspectRatio/AspectRatio.astro'; |
285 | + import Typography from '../components/Typography/Typography.astro'; |
286 | --- |
287 | |
288 | <BaseLayout> |
289 | @@ -60,194 +61,7 @@ import AspectRatio from '../components/AspectRatio/AspectRatio.astro'; |
290 | |
291 | <AspectRatio /> |
292 | |
293 | - <section id="typography"> |
294 | - <header> |
295 | - <h2>Typography</h2> |
296 | - <p>Variable and static font sizes, smart line heights, and other familiar typography variables, all ready to go.</p> |
297 | - </header> |
298 | - <div class="block-wrap"> |
299 | - <div> |
300 | - <h5>The Props</h5> |
301 | - <div class="var-examples"> |
302 | - <Prism lang="css" code={`--font-size-{00-8} |
303 | - --font-size-fluid-{0-3} |
304 | - --font-weight-{1-9} |
305 | - --font-letterspacing-{0-7} |
306 | - --font-lineheight-{00-5}`} /> |
307 | - </div> |
308 | - </div> |
309 | - |
310 | - <div> |
311 | - <h5>Usage Sample</h5> |
312 | - <Prism lang="css" code={`.hero { |
313 | - line-height: var(--font-lineheight-1); |
314 | - font-size: var(--font-size-fluid-3); |
315 | - font-weight: var(--font-weight-9); |
316 | - font-family: var(--font-sans); |
317 | - }`} /> |
318 | - </div> |
319 | - </div> |
320 | - |
321 | - <article class="font-sizes"> |
322 | - <h4>Font Families</h4> |
323 | - <Prism lang="css" code={`--font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; |
324 | - --font-serif: ui-serif, serif; |
325 | - --font-mono: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace;`} /> |
326 | - <div class="block-wrap"> |
327 | - <div class="font-family-grid"> |
328 | - <code class=" language-css">--font-sans</code> |
329 | - <div> |
330 | - <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
331 | - </div> |
332 | - </div> |
333 | - <div class="font-family-grid"> |
334 | - <code class=" language-css">--font-serif</code> |
335 | - <div style="font-family: var(--font-serif)"> |
336 | - <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
337 | - </div> |
338 | - </div> |
339 | - <div class="font-family-grid"> |
340 | - <code class=" language-css">--font-mono</code> |
341 | - <div style="font-family: var(--font-mono)"> |
342 | - <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span><span>H</span><span>I</span><span>J</span><span>K</span><span>L</span><span>M</span><span>N</span><span>O</span><span>P</span><span>Q</span><span>R</span><span>S</span><span>T</span><span>U</span><span>V</span><span>W</span><span>X</span><span>Y</span><span>Z</span><span>a</span><span>b</span><span>c</span><span>d</span><span>e</span><span>f</span><span>g</span><span>h</span><span>i</span><span>j</span><span>k</span><span>l</span><span>m</span><span>n</span><span>o</span><span>p</span><span>q</span><span>r</span><span>s</span><span>t</span><span>u</span><span>v</span><span>w</span><span>x</span><span>y</span><span>z</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span><span>0</span><span>+</span><span>=</span><span>!</span><span>@</span><span>#</span><span>%</span><span>$</span><span>%</span><span>^</span><span>&</span> |
343 | - </div> |
344 | - </div> |
345 | - </div> |
346 | - </article> |
347 | - |
348 | - <article class="font-sizes"> |
349 | - <div class="block-wrap"> |
350 | - <div> |
351 | - <h4>Font Weights</h4> |
352 | - <Prism lang="css" code={`--font-weight-1: 100; |
353 | - --font-weight-2: 200; |
354 | - --font-weight-3: 300; |
355 | - --font-weight-4: 400; |
356 | - --font-weight-5: 500; |
357 | - --font-weight-6: 600; |
358 | - --font-weight-7: 700; |
359 | - --font-weight-8: 800; |
360 | - --font-weight-9: 900;`} /> |
361 | - </div> |
362 | - <div class="font-demo"> |
363 | - <div class="sample-text" style="font-size: var(--font-size-8)">Aa</div> |
364 | - <input class="font-slider" name="weight" data-prop="fontWeight" type="range" value="4" min="1" max="9" style="--track-fill:44%;"> |
365 | - </div> |
366 | - </div> |
367 | - </article> |
368 | - |
369 | - <article class="font-sizes"> |
370 | - <div class="block-wrap"> |
371 | - <div> |
372 | - <h4>Letter Spacing</h4> |
373 | - <Prism lang="css" code={`--font-letterspacing-0: -.05em; |
374 | - --font-letterspacing-1: .025em; |
375 | - --font-letterspacing-2: .050em; |
376 | - --font-letterspacing-3: .075em; |
377 | - --font-letterspacing-4: .150em; |
378 | - --font-letterspacing-5: .500em; |
379 | - --font-letterspacing-6: .750em; |
380 | - --font-letterspacing-7: 1em;`} /> |
381 | - </div> |
382 | - <div class="font-demo"> |
383 | - <div class="sample-text letterspacing-demo">Letter Spacing</div> |
384 | - <input class="font-slider" name="letterspacing" data-prop="letter-spacing" type="range" value="1" min="0" max="7" style="--track-fill:14%;"> |
385 | - </div> |
386 | - </div> |
387 | - </article> |
388 | - |
389 | - <article class="font-sizes"> |
390 | - <div class="block-wrap"> |
391 | - <div> |
392 | - <h4>Line Height</h4> |
393 | - <Prism lang="css" code={`--font-lineheight-00: .95; |
394 | - --font-lineheight-0: 1.1; |
395 | - --font-lineheight-1: 1.25; |
396 | - --font-lineheight-2: 1.375; |
397 | - --font-lineheight-3: 1.5; |
398 | - --font-lineheight-4: 1.75; |
399 | - --font-lineheight-5: 2;`} /> |
400 | - </div> |
401 | - <div class="font-demo"> |
402 | - <div class="sample-text" style="max-inline-size: var(--size-content-1);"> |
403 | - Sample paragraph content to provide a preview for OP's line heights |
404 | - </div> |
405 | - <input class="font-slider" name="lineheight" data-prop="lineHeight" type="range" value="1" min="-1" max="5" style="--track-fill:33%;"> |
406 | - </div> |
407 | - </div> |
408 | - </article> |
409 | - |
410 | - <!-- <article class="font-sizes"> |
411 | - <header> |
412 | - <h4>Relative Line Height</h4> |
413 | - <p>These line heights tighten as the font size is increased.</p> |
414 | - </header> |
415 | - <pre class="language-css"><code> |
416 | - --font-relative-lineheight-00: calc(1rem + .5ch); |
417 | - --font-relative-lineheight-0: calc(1rem + .75ch); |
418 | - --font-relative-lineheight-1: calc(1rem + 1ch); |
419 | - --font-relative-lineheight-2: calc(1rem + 1.25ch); |
420 | - --font-relative-lineheight-3: calc(1rem + 1.5ch); |
421 | - --font-relative-lineheight-4: calc(1rem + 2ch); |
422 | - --font-relative-lineheight-5: calc(1rem + 2.5ch); |
423 | - --font-relative-lineheight-6: calc(1rem + 3ch); |
424 | - </code></pre> |
425 | - </article> --> |
426 | - |
427 | - <article class="font-sizes"> |
428 | - <h4>Font Sizes</h4> |
429 | - <Prism lang="css" code={`--font-size-00: .5rem; |
430 | - --font-size-0: .75rem; |
431 | - --font-size-1: 1rem; |
432 | - --font-size-2: 1.1rem; |
433 | - --font-size-3: 1.25rem; |
434 | - --font-size-4: 1.5rem; |
435 | - --font-size-5: 2rem; |
436 | - --font-size-6: 2.5rem; |
437 | - --font-size-7: 3rem; |
438 | - --font-size-8: 3.5rem;`} /> |
439 | - <div class="scroll-x-overflow"><div class="font-size-examples"> |
440 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-00<span class="token punctuation">)</span></code> |
441 | - <span style="font-size: var(--font-size-00)">Almost before you knew it, we'd touched ground.</span> |
442 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-0<span class="token punctuation">)</span></code> |
443 | - <span style="font-size: var(--font-size-0)">Almost before you knew it, we'd touched ground.</span> |
444 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-1<span class="token punctuation">)</span></code> |
445 | - <span style="font-size: var(--font-size-1)">Almost before you knew it, we'd touched ground.</span> |
446 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-2<span class="token punctuation">)</span></code> |
447 | - <span style="font-size: var(--font-size-2)">Almost before you knew it, we'd touched ground.</span> |
448 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-3<span class="token punctuation">)</span></code> |
449 | - <span style="font-size: var(--font-size-3)">Almost before you knew it, we'd touched ground.</span> |
450 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-4<span class="token punctuation">)</span></code> |
451 | - <span style="font-size: var(--font-size-4)">Almost before you knew it, we'd touched ground.</span> |
452 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-5<span class="token punctuation">)</span></code> |
453 | - <span style="font-size: var(--font-size-5)">Almost before you knew it, we'd touched ground.</span> |
454 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-6<span class="token punctuation">)</span></code> |
455 | - <span style="font-size: var(--font-size-6)">Almost before you knew it, we'd touched ground.</span> |
456 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-7<span class="token punctuation">)</span></code> |
457 | - <span style="font-size: var(--font-size-7)">Almost before you knew it, we'd touched ground.</span> |
458 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-8<span class="token punctuation">)</span></code> |
459 | - <span style="font-size: var(--font-size-8)">Almost before you knew it, we'd touched ground.</span> |
460 | - </div></div> |
461 | - </article> |
462 | - |
463 | - <article class="font-sizes"> |
464 | - <h4>Fluid Font Sizes</h4> |
465 | - <Prism lang="css" code={`--font-size-fluid-0: clamp(.75rem, 1.5vw, 1rem); |
466 | - --font-size-fluid-1: clamp(1rem, 2vw, 1.5rem); |
467 | - --font-size-fluid-2: clamp(1.5rem, 3vw, 2.5rem); |
468 | - --font-size-fluid-3: clamp(2rem, 4vw, 3.5rem);`} /> |
469 | - <div class="scroll-x-overflow"><div class="font-size-examples"> |
470 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-00<span class="token punctuation">)</span></code> |
471 | - <span style="font-size: var(--font-size-fluid-00)">Almost before you knew it, we'd touched ground.</span> |
472 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-1<span class="token punctuation">)</span></code> |
473 | - <span style="font-size: var(--font-size-fluid-1)">Almost before you knew it, we'd touched ground.</span> |
474 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-2<span class="token punctuation">)</span></code> |
475 | - <span style="font-size: var(--font-size-fluid-2)">Almost before you knew it, we'd touched ground.</span> |
476 | - <code class=" language-css"><span class="token function">var</span><span class="token punctuation">(</span>--font-size-fluid-3<span class="token punctuation">)</span></code> |
477 | - <span style="font-size: var(--font-size-fluid-3)">Almost before you knew it, we'd touched ground.</span> |
478 | - </div></div> |
479 | - </article> |
480 | - </section> |
481 | + <Typography /> |
482 | |
483 | <section id="easing"> |
484 | <header> |
485 | diff --git a/site/src/styles/global.css b/site/src/styles/global.css |
486 | index 68a8f3e..4b48922 100644 |
487 | --- a/site/src/styles/global.css |
488 | +++ b/site/src/styles/global.css |
489 | @@ -281,50 +281,6 @@ pre[class*="language-"] { |
490 | } |
491 | } |
492 | |
493 | - .font-sizes { |
494 | - display: grid; |
495 | - gap: var(--size-3); |
496 | - |
497 | - & pre { |
498 | - max-inline-size: var(--max-inline-body); |
499 | - } |
500 | - } |
501 | - |
502 | - .font-demo { |
503 | - flex-grow: 1; |
504 | - display: grid; |
505 | - gap: var(--size-2); |
506 | - align-content: center; |
507 | - align-self: stretch; |
508 | - text-align: center; |
509 | - |
510 | - & > .sample-text { |
511 | - margin-inline: auto; |
512 | - } |
513 | - } |
514 | - |
515 | - .letterspacing-demo { |
516 | - inline-size: min(var(--max-inline-body), var(--size-content-2)); |
517 | - } |
518 | - |
519 | - .font-size-examples { |
520 | - inline-size: max-content; |
521 | - display: grid; |
522 | - gap: var(--size-2); |
523 | - grid-template-columns: max-content 1fr; |
524 | - align-items: center; |
525 | - justify-items: flex-start; |
526 | - |
527 | - @media (--md-n-below) { |
528 | - grid-template-columns: 1fr; |
529 | - gap: var(--size-1); |
530 | - |
531 | - & > code:not(:first-of-type) { |
532 | - margin-block-start: var(--size-3); |
533 | - } |
534 | - } |
535 | - } |
536 | - |
537 | .var-examples { |
538 | display: flex; |
539 | flex-wrap: wrap; |