@welcome-home/wh-base 0.3.4 → 0.4.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/.turbo/turbo-build.log +5 -10
- package/CHANGELOG.md +14 -0
- package/README.md +3 -3
- package/dist/css/wh-base.css +592 -0
- package/dist/css/wh-base.min.css +1 -1
- package/package.json +10 -2
- package/src/css/header.css +35 -0
- package/src/css/vars.css +5 -4
- package/src/css/wh-base.css +2 -17
- package/src/css/nav.css +0 -20
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
.
|
|
5
|
-
|
|
6
|
-
. [96mbuild:css:dev[39m$ postcss src/css/main.css -o dist/css/pandabear.css --no-map
|
|
7
|
-
[95m└─[39m [95mRunning...[39m
|
|
8
|
-
[1A[95m└─[39m [95mDone in 417ms[39m
|
|
9
|
-
[3A[95m└─[39m [95mDone in 649ms[39m
|
|
10
|
-
[2B
|
|
1
|
+
$ pnpm run '/^build:css:.*/'
|
|
2
|
+
. build:css:prod$ postcss src/css/wh-base.css -o dist/css/wh-base.min.css --env production --no-map
|
|
3
|
+
. build:css:dev$ postcss src/css/wh-base.css -o dist/css/wh-base.css --no-map
|
|
4
|
+
. build:css:dev: Done
|
|
5
|
+
. build:css:prod: Done
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# @welcome-home/wh-base
|
|
2
|
+
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 5814af7: Bump default text size to 18px-22px
|
|
8
|
+
- 03f8927: Makes title font size smaller so it's less overwhelming
|
|
9
|
+
|
|
10
|
+
## 0.3.5
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- fdc5a63: Bump minor version for wh-base for first trusted publish
|
package/README.md
CHANGED
|
@@ -4,8 +4,8 @@ SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
|
4
4
|
SPDX-License-Identifier: MPL-2.0
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
|
-
#
|
|
7
|
+
# wh-base, the theme for your digital home
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
The goal of `wh-base` is not to build the prettiest, the fanciest, or the most full-featured theme. Contrary to popular belief, those are never the goal of good design.
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
The primary focus of `wh-base` is your words. Your blog is made to be read, not be a pristine webpage that no one can read.
|
|
@@ -0,0 +1,592 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
@layer base-config, user-config;
|
|
4
|
+
/*
|
|
5
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
6
|
+
*
|
|
7
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
8
|
+
*/
|
|
9
|
+
/*
|
|
10
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
11
|
+
*
|
|
12
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
13
|
+
*/
|
|
14
|
+
/* 1. Use a more-intuitive box-sizing model */
|
|
15
|
+
*,
|
|
16
|
+
*::before,
|
|
17
|
+
*::after {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
}
|
|
20
|
+
/* 2. Remove default margin */
|
|
21
|
+
*:not(dialog) {
|
|
22
|
+
margin: 0;
|
|
23
|
+
}
|
|
24
|
+
/* 3. Enable keyword animations */
|
|
25
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
26
|
+
html {
|
|
27
|
+
interpolate-size: allow-keywords;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
body {
|
|
31
|
+
/* 4. Increase line-height */
|
|
32
|
+
line-height: 1.5;
|
|
33
|
+
/* 5. Improve text rendering */
|
|
34
|
+
-webkit-font-smoothing: antialiased;
|
|
35
|
+
}
|
|
36
|
+
/* 6. Improve media defaults */
|
|
37
|
+
img,
|
|
38
|
+
picture,
|
|
39
|
+
video,
|
|
40
|
+
canvas,
|
|
41
|
+
svg {
|
|
42
|
+
display: block;
|
|
43
|
+
max-width: 100%;
|
|
44
|
+
}
|
|
45
|
+
/* 7. Inherit fonts for form controls */
|
|
46
|
+
input,
|
|
47
|
+
button,
|
|
48
|
+
textarea,
|
|
49
|
+
select {
|
|
50
|
+
font: inherit;
|
|
51
|
+
}
|
|
52
|
+
/* 8. Avoid text overflows */
|
|
53
|
+
p,
|
|
54
|
+
h1,
|
|
55
|
+
h2,
|
|
56
|
+
h3,
|
|
57
|
+
h4,
|
|
58
|
+
h5,
|
|
59
|
+
h6 {
|
|
60
|
+
overflow-wrap: break-word;
|
|
61
|
+
}
|
|
62
|
+
/* 9. Improve line wrapping */
|
|
63
|
+
p {
|
|
64
|
+
text-wrap: pretty;
|
|
65
|
+
}
|
|
66
|
+
h1,
|
|
67
|
+
h2,
|
|
68
|
+
h3,
|
|
69
|
+
h4,
|
|
70
|
+
h5,
|
|
71
|
+
h6 {
|
|
72
|
+
text-wrap: balance;
|
|
73
|
+
}
|
|
74
|
+
/*
|
|
75
|
+
10. Create a root stacking context
|
|
76
|
+
*/
|
|
77
|
+
#root,
|
|
78
|
+
#__next {
|
|
79
|
+
isolation: isolate;
|
|
80
|
+
}
|
|
81
|
+
/*
|
|
82
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
83
|
+
*
|
|
84
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
85
|
+
*/
|
|
86
|
+
@layer base-config {
|
|
87
|
+
:root,
|
|
88
|
+
:host {
|
|
89
|
+
--untoast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Upvote</title><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
|
|
90
|
+
--toast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Already upvoted</title><path d="m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6"/></svg>');
|
|
91
|
+
/* 1.4 line-height at 320, 1.6 line-height at 1440 */
|
|
92
|
+
--body-line-height: clamp(1.56rem, 1.384rem + 0.893vw, 2.19rem);
|
|
93
|
+
|
|
94
|
+
/* 18px at 320px viewport */
|
|
95
|
+
/* 22px at 1440px viewport */
|
|
96
|
+
--font-size: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
|
|
97
|
+
|
|
98
|
+
/* stylelint-disable-next-line value-keyword-case */
|
|
99
|
+
--font-family-base:
|
|
100
|
+
optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
|
|
101
|
+
--font-weight-base: 400;
|
|
102
|
+
|
|
103
|
+
--font-family-title: var(--font-family-base);
|
|
104
|
+
--font-family-heading: var(--font-family-base);
|
|
105
|
+
--font-weight-heading: 500;
|
|
106
|
+
|
|
107
|
+
--font-weight-title: 600;
|
|
108
|
+
|
|
109
|
+
--font-family-code:
|
|
110
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
111
|
+
'DejaVu Sans Mono', monospace;
|
|
112
|
+
|
|
113
|
+
--body-width: min(800px, calc(70% + 100px));
|
|
114
|
+
|
|
115
|
+
--nav-margin: 4vh;
|
|
116
|
+
|
|
117
|
+
/* Internal variables. Do not use */
|
|
118
|
+
--iwh-font-weight-title: calc(
|
|
119
|
+
var(--font-weight-title) -
|
|
120
|
+
var(--dark-lightening-factor)
|
|
121
|
+
);
|
|
122
|
+
--iwh-font-weight-heading: calc(
|
|
123
|
+
var(--font-weight-heading) -
|
|
124
|
+
var(--dark-lightening-factor)
|
|
125
|
+
);
|
|
126
|
+
--iwh-font-weight-base: calc(
|
|
127
|
+
var(--font-weight-base) -
|
|
128
|
+
var(--dark-lightening-factor)
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
@media (prefers-color-scheme: dark) {
|
|
133
|
+
:root,
|
|
134
|
+
:host {
|
|
135
|
+
--csstools-color-scheme--light: ;
|
|
136
|
+
color-scheme: dark;
|
|
137
|
+
|
|
138
|
+
/** Catppuccin blue */
|
|
139
|
+
--color-primary: hsl(217deg 92% 76%);
|
|
140
|
+
--color-hover: lch(from var(--color-primary) calc(l + 20) c h);
|
|
141
|
+
--color-visited: lch(from var(--color-primary) l calc(c + 10) h);
|
|
142
|
+
|
|
143
|
+
/** Catppuccin surface 0 */
|
|
144
|
+
--color-bg-alt: hsl(237deg 16% 23%);
|
|
145
|
+
|
|
146
|
+
/** Catppuccin base */
|
|
147
|
+
--color-bg: rgb(30, 30, 46);
|
|
148
|
+
|
|
149
|
+
/* Catppuccin text */
|
|
150
|
+
--color-text: hsl(226deg 64% 88%);
|
|
151
|
+
|
|
152
|
+
/** Catppuccin Rosewater */
|
|
153
|
+
--color-secondary: hsl(267deg 84% 81%);
|
|
154
|
+
--color-headline: var(--color-text);
|
|
155
|
+
--color-h1: var(--color-text);
|
|
156
|
+
|
|
157
|
+
/* Catppuccin subtext 1 */
|
|
158
|
+
--color-h2: hsl(227deg 35% 80%);
|
|
159
|
+
--color-h3: var(--color-h2);
|
|
160
|
+
--color-h4: var(--color-h2);
|
|
161
|
+
|
|
162
|
+
/* Catppuccin subtext 0 */
|
|
163
|
+
--color-h5: hsl(228deg 24% 72%);
|
|
164
|
+
--color-h6: var(--color-h5);
|
|
165
|
+
|
|
166
|
+
--button-color-bg: var(--color-bg-alt);
|
|
167
|
+
|
|
168
|
+
/* Color of <code> blocks. Catppuccin green */
|
|
169
|
+
--color-code: hsl(115deg, 54%, 76%);
|
|
170
|
+
|
|
171
|
+
/* Catppuccin surface 1 */
|
|
172
|
+
--button-color-hover-bg: hsl(234deg, 13%, 31%);
|
|
173
|
+
|
|
174
|
+
--dark-lightening-factor: 50;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
@media (prefers-color-scheme: light) {
|
|
179
|
+
:root,
|
|
180
|
+
:host {
|
|
181
|
+
--csstools-color-scheme--light: ;
|
|
182
|
+
color-scheme: dark;
|
|
183
|
+
|
|
184
|
+
/** Catppuccin blue */
|
|
185
|
+
--color-primary: hsl(220deg 91% 54%);
|
|
186
|
+
--color-hover: lch(from var(--color-primary) calc(l + 20) c h);
|
|
187
|
+
--color-visited: lch(from var(--color-primary) l calc(c + 10) h);
|
|
188
|
+
|
|
189
|
+
/** Catppuccin surface 0 */
|
|
190
|
+
--color-bg-alt: hsl(223deg 16% 83%);
|
|
191
|
+
|
|
192
|
+
/** Catppuccin crust */
|
|
193
|
+
--color-bg: rgb(239, 241, 245);
|
|
194
|
+
|
|
195
|
+
/* Catppuccin text */
|
|
196
|
+
--color-text: hsl(234deg 16% 35%);
|
|
197
|
+
|
|
198
|
+
/** Catppuccin Rosewater */
|
|
199
|
+
--color-secondary: hsl(266deg 85% 58%);
|
|
200
|
+
--color-headline: var(--color-text);
|
|
201
|
+
--color-h1: var(--color-text);
|
|
202
|
+
|
|
203
|
+
/* Catppuccin subtext 1 */
|
|
204
|
+
--color-h2: hsl(233deg 13% 41%);
|
|
205
|
+
--color-h3: var(--color-h2);
|
|
206
|
+
--color-h4: var(--color-h2);
|
|
207
|
+
|
|
208
|
+
/* Catppuccin subtext 0 */
|
|
209
|
+
--color-h5: hsl(233deg 10% 47%);
|
|
210
|
+
--color-h6: var(--color-h5);
|
|
211
|
+
|
|
212
|
+
--button-color-bg: var(--color-bg-alt);
|
|
213
|
+
|
|
214
|
+
/* Color of <code> blocks. Catppuccin green */
|
|
215
|
+
--color-code: hsl(109deg, 58%, 40%);
|
|
216
|
+
|
|
217
|
+
/* Catppuccin surface 1 */
|
|
218
|
+
--button-color-hover-bg: hsl(225deg, 14%, 77%);
|
|
219
|
+
|
|
220
|
+
--dark-lightening-factor: 0;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
/*
|
|
225
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
226
|
+
*
|
|
227
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
228
|
+
*/
|
|
229
|
+
a.title {
|
|
230
|
+
-webkit-text-decoration: none;
|
|
231
|
+
text-decoration: none;
|
|
232
|
+
|
|
233
|
+
& > h1 {
|
|
234
|
+
color: var(--color-headline);
|
|
235
|
+
|
|
236
|
+
font-family: var(--font-family-title);
|
|
237
|
+
font-weight: var(--iwh-font-weight-title);
|
|
238
|
+
|
|
239
|
+
/* 24px at 320px viewport */
|
|
240
|
+
/* 48px at 1920px viewport */
|
|
241
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
242
|
+
margin-bottom: 0;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
&:hover {
|
|
246
|
+
-webkit-text-decoration: underline;
|
|
247
|
+
text-decoration: underline;
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
nav {
|
|
251
|
+
p {
|
|
252
|
+
margin-bottom: var(--nav-margin);
|
|
253
|
+
|
|
254
|
+
a {
|
|
255
|
+
padding-right: 0.3em;
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
/*
|
|
260
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
261
|
+
*
|
|
262
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
263
|
+
*/
|
|
264
|
+
/* Margin to separate the date from the post title a little bit */
|
|
265
|
+
li[data-tags] i {
|
|
266
|
+
margin-right: 0.3em;
|
|
267
|
+
}
|
|
268
|
+
/*
|
|
269
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
270
|
+
*
|
|
271
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
272
|
+
*/
|
|
273
|
+
/* biome-ignore-all lint/complexity/noImportantStyles: important is important */
|
|
274
|
+
button.upvote-button {
|
|
275
|
+
--width: 2em;
|
|
276
|
+
--height: 2em;
|
|
277
|
+
|
|
278
|
+
margin-bottom: 2em;
|
|
279
|
+
|
|
280
|
+
background-color: var(--color-bg-alt);
|
|
281
|
+
border: solid 1px var(--color-primary);
|
|
282
|
+
border-radius: 5px;
|
|
283
|
+
padding-top: 10px;
|
|
284
|
+
padding-left: 10px;
|
|
285
|
+
padding-right: 10px;
|
|
286
|
+
|
|
287
|
+
svg {
|
|
288
|
+
display: none;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.upvote-count {
|
|
292
|
+
color: var(--color-text);
|
|
293
|
+
}
|
|
294
|
+
|
|
295
|
+
/* when your post is untoasted */
|
|
296
|
+
.upvote-count::before {
|
|
297
|
+
background: var(--untoast-icon);
|
|
298
|
+
display: block;
|
|
299
|
+
width: var(--width);
|
|
300
|
+
height: var(--height);
|
|
301
|
+
background-size: cover;
|
|
302
|
+
content: '';
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
button:disabled.upvote-button .upvote-count::before {
|
|
306
|
+
background: var(--toast-icon);
|
|
307
|
+
display: block;
|
|
308
|
+
width: var(--width);
|
|
309
|
+
height: var(--height);
|
|
310
|
+
background-size: cover;
|
|
311
|
+
content: '';
|
|
312
|
+
}
|
|
313
|
+
button:not([disabled]).upvote-button {
|
|
314
|
+
&:hover {
|
|
315
|
+
background-color: color-mix(in srgb, var(--color-bg-alt) 90%, white);
|
|
316
|
+
cursor: pointer;
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
/*
|
|
320
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
321
|
+
*
|
|
322
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
323
|
+
*/
|
|
324
|
+
pre {
|
|
325
|
+
background-color: var(--color-bg-alt);
|
|
326
|
+
display: block;
|
|
327
|
+
padding: 1em;
|
|
328
|
+
overflow-x: auto;
|
|
329
|
+
margin-top: 0;
|
|
330
|
+
margin-bottom: 2.5rem;
|
|
331
|
+
font-size: 0.9em;
|
|
332
|
+
}
|
|
333
|
+
/** The default highlight.css blue isn't good in dark mode */
|
|
334
|
+
.highlight {
|
|
335
|
+
pre span {
|
|
336
|
+
font-family: var(--font-family-code);
|
|
337
|
+
|
|
338
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
339
|
+
font-weight: 400 !important;
|
|
340
|
+
line-height: var(--body-line-height);
|
|
341
|
+
font-size: var(--font-size);
|
|
342
|
+
|
|
343
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
344
|
+
font-style: normal !important;
|
|
345
|
+
|
|
346
|
+
&.nt,
|
|
347
|
+
&.nf,
|
|
348
|
+
&.nb,
|
|
349
|
+
&.nd {
|
|
350
|
+
/* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
|
|
351
|
+
color: var(--color-primary) !important;
|
|
352
|
+
}
|
|
353
|
+
&.k,
|
|
354
|
+
&.kt {
|
|
355
|
+
color: var(--color-code);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
code {
|
|
360
|
+
font-family: var(--font-family-code);
|
|
361
|
+
line-height: var(--body-line-height);
|
|
362
|
+
}
|
|
363
|
+
code,
|
|
364
|
+
kbd,
|
|
365
|
+
samp {
|
|
366
|
+
color: var(--color-code);
|
|
367
|
+
hyphens: none;
|
|
368
|
+
}
|
|
369
|
+
pre > code {
|
|
370
|
+
padding: 0;
|
|
371
|
+
background-color: transparent;
|
|
372
|
+
white-space: pre;
|
|
373
|
+
}
|
|
374
|
+
a:has(code) {
|
|
375
|
+
text-decoration-color: var(--color-code);
|
|
376
|
+
}
|
|
377
|
+
/*
|
|
378
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
379
|
+
*
|
|
380
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
381
|
+
*/
|
|
382
|
+
div.tags {
|
|
383
|
+
margin-bottom: 0.7rem;
|
|
384
|
+
|
|
385
|
+
a {
|
|
386
|
+
margin-right: 5px;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
section.footnotes {
|
|
390
|
+
&:before {
|
|
391
|
+
content: 'Footnotes';
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
ol {
|
|
395
|
+
margin-top: 1.2rem;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
border-top: solid thin var(--color-secondary);
|
|
399
|
+
padding-top: 10px;
|
|
400
|
+
}
|
|
401
|
+
html {
|
|
402
|
+
font-family: var(--font-family-base);
|
|
403
|
+
}
|
|
404
|
+
body {
|
|
405
|
+
line-height: var(--body-line-height);
|
|
406
|
+
margin: auto;
|
|
407
|
+
color: var(--color-text);
|
|
408
|
+
background-color: var(--color-bg);
|
|
409
|
+
padding: 13px;
|
|
410
|
+
font-size: var(--font-size);
|
|
411
|
+
font-weight: var(--iwh-font-weight-base);
|
|
412
|
+
width: var(--body-width);
|
|
413
|
+
text-wrap: pretty;
|
|
414
|
+
hyphens: auto;
|
|
415
|
+
}
|
|
416
|
+
main h1:first-of-type {
|
|
417
|
+
border-top: solid thin var(--color-secondary);
|
|
418
|
+
margin-bottom: 0;
|
|
419
|
+
padding-top: 1rem;
|
|
420
|
+
}
|
|
421
|
+
h1,
|
|
422
|
+
h2,
|
|
423
|
+
h3,
|
|
424
|
+
h4,
|
|
425
|
+
h5,
|
|
426
|
+
h6 {
|
|
427
|
+
font-family: var(--font-family-heading);
|
|
428
|
+
font-weight: var(--iwh-font-weight-heading);
|
|
429
|
+
margin-top: 2rem;
|
|
430
|
+
margin-bottom: 1.5rem;
|
|
431
|
+
overflow-wrap: break-word;
|
|
432
|
+
text-wrap: pretty;
|
|
433
|
+
line-height: 1.1;
|
|
434
|
+
}
|
|
435
|
+
a {
|
|
436
|
+
-webkit-text-decoration: underline;
|
|
437
|
+
text-decoration: underline;
|
|
438
|
+
text-underline-offset: auto;
|
|
439
|
+
color: var(--color-primary);
|
|
440
|
+
|
|
441
|
+
&:visited {
|
|
442
|
+
color: var(--color-visited);
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
&:hover {
|
|
446
|
+
-webkit-text-decoration: none;
|
|
447
|
+
text-decoration: none;
|
|
448
|
+
color: var(--color-hover);
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
h1 {
|
|
452
|
+
color: var(--color-h1);
|
|
453
|
+
|
|
454
|
+
/* 32px at 320px viewport */
|
|
455
|
+
/* 64px at 1920px viewport */
|
|
456
|
+
font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
|
|
457
|
+
}
|
|
458
|
+
h1 > code {
|
|
459
|
+
/* 32px at 320px viewport */
|
|
460
|
+
/* 64px at 1920px viewport */
|
|
461
|
+
font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
|
|
462
|
+
}
|
|
463
|
+
h2 {
|
|
464
|
+
color: var(--color-h2);
|
|
465
|
+
|
|
466
|
+
/* 24px at 320px viewport */
|
|
467
|
+
/* 48px at 1920px viewport */
|
|
468
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
469
|
+
}
|
|
470
|
+
h2 > code {
|
|
471
|
+
/* 24px at 320px viewport */
|
|
472
|
+
/* 48px at 1920px viewport */
|
|
473
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
474
|
+
}
|
|
475
|
+
h3 {
|
|
476
|
+
color: var(--color-h3);
|
|
477
|
+
|
|
478
|
+
/* 20px at 320px viewport */
|
|
479
|
+
/* 36px at 1920px viewport */
|
|
480
|
+
font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
|
|
481
|
+
}
|
|
482
|
+
h3 > code {
|
|
483
|
+
/* 20px at 320px viewport */
|
|
484
|
+
/* 36px at 1920px viewport */
|
|
485
|
+
font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
|
|
486
|
+
}
|
|
487
|
+
h4 {
|
|
488
|
+
color: var(--color-h4);
|
|
489
|
+
|
|
490
|
+
/* 18px at 320px viewport */
|
|
491
|
+
/* 28px at 1920px viewport */
|
|
492
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
493
|
+
}
|
|
494
|
+
h4 > code {
|
|
495
|
+
/* 18px at 320px viewport */
|
|
496
|
+
/* 28px at 1920px viewport */
|
|
497
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
498
|
+
}
|
|
499
|
+
h5 {
|
|
500
|
+
color: var(--color-h5);
|
|
501
|
+
|
|
502
|
+
/* 18px at 320px viewport */
|
|
503
|
+
/* 28px at 1920px viewport */
|
|
504
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
505
|
+
}
|
|
506
|
+
h6 {
|
|
507
|
+
color: var(--color-h6);
|
|
508
|
+
|
|
509
|
+
/* 18px at 320px viewport */
|
|
510
|
+
/* 28px at 1920px viewport */
|
|
511
|
+
font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
|
|
512
|
+
}
|
|
513
|
+
p {
|
|
514
|
+
margin-top: 0;
|
|
515
|
+
margin-bottom: 2rem;
|
|
516
|
+
}
|
|
517
|
+
small,
|
|
518
|
+
sub,
|
|
519
|
+
sup {
|
|
520
|
+
font-size: 90%;
|
|
521
|
+
}
|
|
522
|
+
sup.footnote-ref {
|
|
523
|
+
font-size: var(--font-size);
|
|
524
|
+
vertical-align: baseline;
|
|
525
|
+
margin-left: 1px;
|
|
526
|
+
}
|
|
527
|
+
sup.footnote-ref ::before {
|
|
528
|
+
content: '[';
|
|
529
|
+
}
|
|
530
|
+
sup.footnote-ref ::after {
|
|
531
|
+
content: ']';
|
|
532
|
+
}
|
|
533
|
+
hr {
|
|
534
|
+
border-color: var(--color-primary);
|
|
535
|
+
}
|
|
536
|
+
ul {
|
|
537
|
+
padding-left: 1.4em;
|
|
538
|
+
margin-top: 0;
|
|
539
|
+
margin-bottom: 2.5rem;
|
|
540
|
+
}
|
|
541
|
+
li {
|
|
542
|
+
margin-bottom: 0.4em;
|
|
543
|
+
}
|
|
544
|
+
blockquote {
|
|
545
|
+
margin-left: 0;
|
|
546
|
+
margin-right: 0;
|
|
547
|
+
padding: 0.8em 0.8em 0.8em 1em;
|
|
548
|
+
border-left: 5px solid var(--color-primary);
|
|
549
|
+
margin-bottom: 2.5rem;
|
|
550
|
+
background-color: var(--color-bg-alt);
|
|
551
|
+
}
|
|
552
|
+
blockquote p {
|
|
553
|
+
margin-bottom: 0;
|
|
554
|
+
}
|
|
555
|
+
img,
|
|
556
|
+
video {
|
|
557
|
+
margin-bottom: 2.5rem;
|
|
558
|
+
}
|
|
559
|
+
p > img {
|
|
560
|
+
/* Image sizes will stay at max, making resizing harder. So resize the image
|
|
561
|
+
* according to the body with while keeping the same aspect-ratio */
|
|
562
|
+
width: var(--body-width);
|
|
563
|
+
height: auto;
|
|
564
|
+
}
|
|
565
|
+
/* Bearblog puts img tags that aren't in markdown in p tags, adding extra
|
|
566
|
+
margin */
|
|
567
|
+
p:has(img) {
|
|
568
|
+
margin-bottom: 0;
|
|
569
|
+
}
|
|
570
|
+
mark {
|
|
571
|
+
background-color: var(--color-secondary);
|
|
572
|
+
}
|
|
573
|
+
/* Tables */
|
|
574
|
+
table {
|
|
575
|
+
text-align: justify;
|
|
576
|
+
width: 100%;
|
|
577
|
+
border-collapse: collapse;
|
|
578
|
+
margin-bottom: 2rem;
|
|
579
|
+
}
|
|
580
|
+
td,
|
|
581
|
+
th {
|
|
582
|
+
padding: 0.5em;
|
|
583
|
+
border-bottom: 1px solid var(--color-bg-alt);
|
|
584
|
+
}
|
|
585
|
+
.toc ul {
|
|
586
|
+
list-style: none;
|
|
587
|
+
}
|
|
588
|
+
.bear {
|
|
589
|
+
font-family:
|
|
590
|
+
ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
591
|
+
'DejaVu Sans Mono', monospace;
|
|
592
|
+
}
|
package/dist/css/wh-base.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer base-config, user-config;*,:after,:before{box-sizing:border-box}:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}@layer base-config{:host,:root{--untoast-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23ac1616' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' class='toast-icon' viewBox='0 0 24 24'%3E%3Ctitle%3EUpvote%3C/title%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");--toast-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23ac1616' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' class='toast-icon' viewBox='0 0 24 24'%3E%3Ctitle%3EAlready upvoted%3C/title%3E%3Cpath d='m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6'/%3E%3C/svg%3E");--body-line-height:clamp(1.
|
|
1
|
+
@layer base-config, user-config;*,:after,:before{box-sizing:border-box}:not(dialog){margin:0}@media (prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}body{line-height:1.5;-webkit-font-smoothing:antialiased}canvas,img,picture,svg,video{display:block;max-width:100%}button,input,select,textarea{font:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#__next,#root{isolation:isolate}@layer base-config{:host,:root{--untoast-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23ac1616' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' class='toast-icon' viewBox='0 0 24 24'%3E%3Ctitle%3EUpvote%3C/title%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");--toast-icon:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none' stroke='%23ac1616' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25' class='toast-icon' viewBox='0 0 24 24'%3E%3Ctitle%3EAlready upvoted%3C/title%3E%3Cpath d='m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6'/%3E%3C/svg%3E");--body-line-height:clamp(1.56rem,1.384rem + 0.893vw,2.19rem);--font-size:clamp(1.125rem,1.0417rem + 0.3704vw,1.375rem);--font-family-base:optima,candara,"Noto Sans",source-sans-pro,sans-serif;--font-weight-base:400;--font-family-title:var(--font-family-base);--font-family-heading:var(--font-family-base);--font-weight-heading:500;--font-weight-title:600;--font-family-code:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,"DejaVu Sans Mono",monospace;--body-width:min(800px,calc(70% + 100px));--nav-margin:4vh;--iwh-font-weight-title:calc(var(--font-weight-title) - var(--dark-lightening-factor));--iwh-font-weight-heading:calc(var(--font-weight-heading) - var(--dark-lightening-factor));--iwh-font-weight-base:calc(var(--font-weight-base) - var(--dark-lightening-factor))}@media (prefers-color-scheme:dark){:host,:root{--csstools-color-scheme--light: ;color-scheme:dark;--color-primary:#89b5fa;--color-hover:lch(from var(--color-primary) calc(l + 20) c h);--color-visited:lch(from var(--color-primary) l calc(c + 10) h);--color-bg-alt:#313244;--color-bg:#1e1e2e;--color-text:#cdd6f4;--color-secondary:#caa6f7;--color-headline:var(--color-text);--color-h1:var(--color-text);--color-h2:#bac2de;--color-h3:var(--color-h2);--color-h4:var(--color-h2);--color-h5:#a6adc9;--color-h6:var(--color-h5);--button-color-bg:var(--color-bg-alt);--color-code:#a6e3a1;--button-color-hover-bg:#454759;--dark-lightening-factor:50}}@media (prefers-color-scheme:light){:host,:root{--csstools-color-scheme--light: ;color-scheme:dark;--color-primary:#1f66f4;--color-hover:lch(from var(--color-primary) calc(l + 20) c h);--color-visited:lch(from var(--color-primary) l calc(c + 10) h);--color-bg-alt:#cdd1db;--color-bg:#eff1f5;--color-text:#4b4e68;--color-secondary:#8839ef;--color-headline:var(--color-text);--color-h1:var(--color-text);--color-h2:#5b5e76;--color-h3:var(--color-h2);--color-h4:var(--color-h2);--color-h5:#6c6f84;--color-h6:var(--color-h5);--button-color-bg:var(--color-bg-alt);--color-code:#41a12b;--button-color-hover-bg:#bcc0cd;--dark-lightening-factor:0}}}a.title{-webkit-text-decoration:none;text-decoration:none;&>h1{color:var(--color-headline);font-family:var(--font-family-title);font-weight:var(--iwh-font-weight-title);font-size:clamp(1.5rem,1.2rem + 1.5vw,3rem);margin-bottom:0}&:hover{-webkit-text-decoration:underline;text-decoration:underline}}nav{p{margin-bottom:var(--nav-margin);a{padding-right:.3em}}}li[data-tags] i{margin-right:.3em}button.upvote-button{--width:2em;--height:2em;margin-bottom:2em;background-color:var(--color-bg-alt);border:1px solid var(--color-primary);border-radius:5px;padding-top:10px;padding-left:10px;padding-right:10px;svg{display:none}.upvote-count{color:var(--color-text)}.upvote-count:before{background:var(--untoast-icon);display:block;width:var(--width);height:var(--height);background-size:cover;content:""}}button:disabled.upvote-button .upvote-count:before{background:var(--toast-icon);display:block;width:var(--width);height:var(--height);background-size:cover;content:""}button:not([disabled]).upvote-button{&:hover{background-color:color-mix(in srgb,var(--color-bg-alt) 90%,#fff);cursor:pointer}}pre{background-color:var(--color-bg-alt);display:block;padding:1em;overflow-x:auto;margin-top:0;margin-bottom:2.5rem;font-size:.9em}.highlight{pre span{font-family:var(--font-family-code);font-weight:400!important;line-height:var(--body-line-height);font-size:var(--font-size);font-style:normal!important;&.nb,&.nd,&.nf,&.nt{color:var(--color-primary)!important}&.k,&.kt{color:var(--color-code)}}}code{font-family:var(--font-family-code);line-height:var(--body-line-height)}code,kbd,samp{color:var(--color-code);hyphens:none}pre>code{padding:0;background-color:initial;white-space:pre}a:has(code){text-decoration-color:var(--color-code)}div.tags{margin-bottom:.7rem;a{margin-right:5px}}section.footnotes{&:before{content:"Footnotes"}ol{margin-top:1.2rem}border-top:thin solid var(--color-secondary);padding-top:10px}html{font-family:var(--font-family-base)}body{line-height:var(--body-line-height);margin:auto;color:var(--color-text);background-color:var(--color-bg);padding:13px;font-size:var(--font-size);font-weight:var(--iwh-font-weight-base);width:var(--body-width);text-wrap:pretty;hyphens:auto}main h1:first-of-type{border-top:thin solid var(--color-secondary);margin-bottom:0;padding-top:1rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);font-weight:var(--iwh-font-weight-heading);margin-top:2rem;margin-bottom:1.5rem;overflow-wrap:break-word;text-wrap:pretty;line-height:1.1}a{-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:auto;color:var(--color-primary);&:visited{color:var(--color-visited)}&:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--color-hover)}}h1{color:var(--color-h1)}h1,h1>code{font-size:clamp(2rem,1.6rem + 2vw,4rem)}h2{color:var(--color-h2)}h2,h2>code{font-size:clamp(1.5rem,1.2rem + 1.5vw,3rem)}h3{color:var(--color-h3)}h3,h3>code{font-size:clamp(1.25rem,1.05rem + 1vw,2.25rem)}h4{color:var(--color-h4)}h4,h4>code,h5{font-size:clamp(1.125rem,1rem + .625vw,1.75rem)}h5{color:var(--color-h5)}h6{color:var(--color-h6);font-size:clamp(1.125rem,1rem + .625vw,1.75rem)}p{margin-top:0;margin-bottom:2rem}small,sub,sup{font-size:90%}sup.footnote-ref{font-size:var(--font-size);vertical-align:initial;margin-left:1px}sup.footnote-ref :before{content:"["}sup.footnote-ref :after{content:"]"}hr{border-color:var(--color-primary)}ul{padding-left:1.4em;margin-top:0;margin-bottom:2.5rem}li{margin-bottom:.4em}blockquote{margin-left:0;margin-right:0;padding:.8em .8em .8em 1em;border-left:5px solid var(--color-primary);margin-bottom:2.5rem;background-color:var(--color-bg-alt)}blockquote p{margin-bottom:0}img,video{margin-bottom:2.5rem}p>img{width:var(--body-width);height:auto}p:has(img){margin-bottom:0}mark{background-color:var(--color-secondary)}table{text-align:justify;width:100%;border-collapse:collapse;margin-bottom:2rem}td,th{padding:.5em;border-bottom:1px solid var(--color-bg-alt)}.toc ul{list-style:none}.bear{font-family:ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@welcome-home/wh-base",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "A CSS module for theming and extending bearblog",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": "./src/css/wh-base.css",
|
|
@@ -14,8 +14,16 @@
|
|
|
14
14
|
"bugs": {
|
|
15
15
|
"url": "https://gitlab.com/wh-tools/welcome-home/-/work_items"
|
|
16
16
|
},
|
|
17
|
+
"funding": {
|
|
18
|
+
"type": "individual",
|
|
19
|
+
"url": "https://ko-fi.com/finleybaker"
|
|
20
|
+
},
|
|
17
21
|
"keywords": [],
|
|
18
|
-
"author":
|
|
22
|
+
"author": {
|
|
23
|
+
"name": "Finley J Baker",
|
|
24
|
+
"email": "finleyb.dev@proton.me",
|
|
25
|
+
"url": "https://welcomehome.city"
|
|
26
|
+
},
|
|
19
27
|
"license": "MPL-2.0",
|
|
20
28
|
"type": "module",
|
|
21
29
|
"devDependencies": {
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: MPL-2.0
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
a.title {
|
|
8
|
+
text-decoration: none;
|
|
9
|
+
|
|
10
|
+
& > h1 {
|
|
11
|
+
color: var(--color-headline);
|
|
12
|
+
|
|
13
|
+
font-family: var(--font-family-title);
|
|
14
|
+
font-weight: var(--iwh-font-weight-title);
|
|
15
|
+
|
|
16
|
+
/* 24px at 320px viewport */
|
|
17
|
+
/* 48px at 1920px viewport */
|
|
18
|
+
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
|
|
19
|
+
margin-bottom: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:hover {
|
|
23
|
+
text-decoration: underline;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
nav {
|
|
28
|
+
p {
|
|
29
|
+
margin-bottom: var(--nav-margin);
|
|
30
|
+
|
|
31
|
+
a {
|
|
32
|
+
padding-right: 0.3em;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
package/src/css/vars.css
CHANGED
|
@@ -11,11 +11,12 @@
|
|
|
11
11
|
:host {
|
|
12
12
|
--untoast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Upvote</title><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
|
|
13
13
|
--toast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><title>Already upvoted</title><path d="m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6"/></svg>');
|
|
14
|
-
|
|
14
|
+
/* 1.4 line-height at 320, 1.6 line-height at 1440 */
|
|
15
|
+
--body-line-height: clamp(1.56rem, 1.384rem + 0.893vw, 2.19rem);
|
|
15
16
|
|
|
16
|
-
/*
|
|
17
|
-
/*
|
|
18
|
-
--font-size: clamp(
|
|
17
|
+
/* 18px at 320px viewport */
|
|
18
|
+
/* 22px at 1440px viewport */
|
|
19
|
+
--font-size: clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
|
|
19
20
|
|
|
20
21
|
/* stylelint-disable-next-line value-keyword-case */
|
|
21
22
|
--font-family-base:
|
package/src/css/wh-base.css
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
@import url('reset.css');
|
|
8
8
|
@import url('vars.css');
|
|
9
|
-
@import url('
|
|
9
|
+
@import url('header.css');
|
|
10
10
|
@import url('home.css');
|
|
11
11
|
@import url('toast.css');
|
|
12
12
|
@import url('code.css');
|
|
@@ -31,7 +31,7 @@ body {
|
|
|
31
31
|
|
|
32
32
|
main h1:first-of-type {
|
|
33
33
|
border-top: solid thin var(--color-secondary);
|
|
34
|
-
margin-bottom:
|
|
34
|
+
margin-bottom: 0;
|
|
35
35
|
padding-top: 1rem;
|
|
36
36
|
}
|
|
37
37
|
|
|
@@ -65,21 +65,6 @@ a {
|
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
a.title {
|
|
69
|
-
text-decoration: none;
|
|
70
|
-
|
|
71
|
-
& > h1 {
|
|
72
|
-
font-family: var(--font-family-title);
|
|
73
|
-
color: var(--color-headline);
|
|
74
|
-
font-size: clamp(3.75rem, 1.22vw + 3.46rem, 4.375rem);
|
|
75
|
-
font-weight: var(--iwh-font-weight-title);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
&:hover {
|
|
79
|
-
text-decoration: underline;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
68
|
h1 {
|
|
84
69
|
color: var(--color-h1);
|
|
85
70
|
|
package/src/css/nav.css
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* SPDX-FileCopyrightText: 2026 Finley J Baker <finleyb.dev@proton.me>
|
|
3
|
-
*
|
|
4
|
-
* SPDX-License-Identifier: MPL-2.0
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
nav {
|
|
8
|
-
p {
|
|
9
|
-
margin-bottom: var(--nav-margin);
|
|
10
|
-
font-size: clamp(1.25rem, 0.7794rem + 2.3529vw, 2.25rem);
|
|
11
|
-
|
|
12
|
-
a {
|
|
13
|
-
padding-right: 0.3em;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.title h1 {
|
|
19
|
-
margin-bottom: 0;
|
|
20
|
-
}
|