finxol.io
Personal site
staging.colinozanne.co.uk
portfolio
astro
feat: use fluid type scale
+30
-13
+10
-12
src/assets/styles/index.css
+10
-12
src/assets/styles/index.css
···
37
37
& > aside {
38
38
grid-area: aside;
39
39
margin-inline: 1.5rem;
40
-
font-size: 3rem;
40
+
font-size: var(--size-3);
41
41
font-weight: bold;
42
42
43
43
@media screen and (max-width: 768px) {
44
-
font-size: 2rem;
45
44
margin-inline: 0.5rem;
46
45
}
47
46
}
···
51
50
margin: 0;
52
51
margin-inline-end: 2rem;
53
52
font-family: "Spagetty";
54
-
font-size: 2rem;
53
+
font-size: var(--size-2);
55
54
font-weight: bold;
56
55
}
57
56
58
57
& > p {
59
58
grid-area: intro;
60
59
margin: 0;
61
-
font-size: 1.2rem;
60
+
font-size: var(--size-0);
62
61
}
63
62
}
64
63
···
94
93
gap: 1rem;
95
94
text-decoration: none;
96
95
margin: 0;
97
-
font-size: 1.2rem;
96
+
font-size: var(--size-0);
98
97
99
98
@media screen and (max-width: 768px) {
100
99
flex-direction: column;
···
142
141
143
142
& > a {
144
143
grid-area: title;
145
-
font-size: 2rem;
144
+
font-size: var(--size-2);
146
145
font-weight: bold;
147
146
text-decoration: none;
148
147
color: inherit;
···
176
175
background-color: var(--teal-700);
177
176
color: var(--teal-100);
178
177
font-weight: lighter;
179
-
font-size: 0.8rem;
180
-
letter-spacing: 0.02em;
178
+
font-size: var(--size--2);
179
+
letter-spacing: 0.025em;
181
180
}
182
181
}
183
182
···
210
209
& > aside {
211
210
grid-area: aside;
212
211
margin-inline: 1.5rem;
213
-
font-size: 3rem;
212
+
font-size: var(--size-3);
214
213
font-weight: bold;
215
214
216
215
@media screen and (max-width: 768px) {
217
-
font-size: 2rem;
218
216
margin-inline: 0.5rem;
219
217
}
220
218
}
···
224
222
margin: 0;
225
223
margin-inline-end: 2rem;
226
224
font-family: "Spagetty";
227
-
font-size: 2rem;
225
+
font-size: var(--size-2);
228
226
font-weight: bold;
229
227
}
230
228
231
229
& > p {
232
230
grid-area: intro;
233
231
margin: 0;
234
-
font-size: 1.2rem;
232
+
font-size: var(--size-1);
235
233
}
236
234
237
235
& > div {
+18
src/assets/styles/main.css
+18
src/assets/styles/main.css
···
25
25
:root {
26
26
--radius: 0.75rem;
27
27
--spacing: 0.75rem;
28
+
29
+
/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
30
+
/* Step -2: 12.5px → 12.8px */
31
+
--size--2: clamp(0.7813rem, 0.7736rem + 0.0341cqi, 0.8rem);
32
+
/* Step -1: 15px → 16px */
33
+
--size--1: clamp(0.9375rem, 0.9119rem + 0.1136cqi, 1rem);
34
+
/* Step 0: 18px → 20px */
35
+
--size-0: clamp(1.125rem, 1.0739rem + 0.2273cqi, 1.25rem);
36
+
/* Step 1: 21.6px → 25px */
37
+
--size-1: clamp(1.35rem, 1.2631rem + 0.3864cqi, 1.5625rem);
38
+
/* Step 2: 25.92px → 31.25px */
39
+
--size-2: clamp(1.62rem, 1.4837rem + 0.6057cqi, 1.9531rem);
40
+
/* Step 3: 31.104px → 39.0625px */
41
+
--size-3: clamp(1.944rem, 1.7405rem + 0.9044cqi, 2.4414rem);
42
+
/* Step 4: 37.3248px → 48.8281px */
43
+
--size-4: clamp(2.3328rem, 2.0387rem + 1.3072cqi, 3.0518rem);
44
+
/* Step 5: 44.7898px → 61.0352px */
45
+
--size-5: clamp(2.7994rem, 2.384rem + 1.8461cqi, 3.8147rem);
28
46
}
29
47
30
48
@layer components {
+2
-1
src/layouts/Layout.astro
+2
-1
src/layouts/Layout.astro
···
164
164
165
165
body {
166
166
font-family: "Scorekard", sans-serif;
167
+
container: body / inline-size;
167
168
}
168
169
169
170
.app {
···
299
300
text-align: center;
300
301
font-family: "Spagetty", serif;
301
302
letter-spacing: 0.01em;
302
-
font-size: 1.2rem;
303
+
font-size: var(--size-1);
303
304
}
304
305
}
305
306