A charming Jekyll theme.
linus.arthr.dev/
jekyll-theme
1
2
3@layer reset {
4 /*
5 Theme Defaults
6 */
7 :root {
8 --font-headings: ui-serif, serif;
9 --font-body: ui-sans-serif, sans-serif;
10 --font-code: ui-monospace, monospace;
11
12 --text-size: 1.4rem;
13 --text-line-height: 1.65;
14 --spacing: 2rem;
15
16 --transition-duration: 250ms;
17
18 --site-width: 700px;
19 --content-width: 420px;
20 --headings-width: 480px;
21
22 --color-background: #F5EDD8;
23 --color-text: #3B2A1A;
24 --color-link: #2D5438;
25 --color-link-hover: #1E3826;
26 --color-support: #D9634E;
27 --color-shadows: color-mix(in srgb, var(--color-text), transparent 85%);
28 --color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 75%);
29 --color-border: color-mix(in srgb, currentcolor, transparent 90%);
30
31 --shadow:
32 0px 0px 0px 1px var(--color-shadows),
33 0px 1px 2px -1px var(--color-shadows),
34 0px 2px 4px 0px var(--color-shadows);
35 }
36
37 @media (prefers-color-scheme: dark) {
38 :root {
39 --color-background: #3B2A1A;
40 --color-text: #F5EDD8;
41 --color-link: #E8A054;
42 --color-link-hover: #F5C880;
43 --color-support: #D9634E;
44 }
45 }
46
47 html {
48 box-sizing: border-box;
49 color-scheme: light dark;
50 -webkit-font-smoothing: antialiased;
51 -webkit-text-size-adjust: 100%;
52 -webkit-font-feature-settings: "kern" 1;
53 -moz-font-feature-settings: "kern" 1;
54 -o-font-feature-settings: "kern" 1;
55 font-feature-settings: "kern" 1;
56 text-size-adjust: none;
57 hanging-punctuation: first allow-end last;
58 }
59
60 *,
61 *::before,
62 *::after {
63 box-sizing: inherit;
64 }
65
66 body, h1, h2, h3, h4, h5, h6,
67 p, blockquote, pre, hr,
68 dl, dd, ol, ul,
69 figure, picture, audio, video,
70 table, iframe {
71 -webkit-font-smoothing: antialiased
72 font-variant-numeric: tabular-nums
73 margin: 0;
74 padding: 0;
75 }
76
77 img, video, audio, figure, picture,
78 table {
79 max-width: 100%;
80 margin-right: 0;
81 }
82
83 iframe {
84 display: block;
85 }
86
87 h1,
88 h2,
89 h3,
90 h4,
91 h5,
92 h6 {
93 text-wrap: balance;
94 }
95
96 p {
97 text-wrap: pretty;
98 }
99
100 ul,
101 ol {
102 list-style-position: outside;
103 padding-inline-start: 1lh;
104 }
105
106 @media (prefers-reduced-motion) {
107 :root {
108 --transition-duration: 0 !important;
109 }
110 }
111
112
113 @media (prefers-reduced-motion: no-preference) {
114 html {
115 interpolate-size: allow-keywords;
116 }
117 }
118
119 input, button,
120 textarea, select {
121 font-family: inherit;
122 font-size: inherit;
123 }
124
125 :target {
126 scroll-margin-block: 5ex;
127 }
128}
129
130
131html {
132 font: 62.5%/100% var(--font-body);
133}
134
135body {
136 padding-inline: 5vw;
137 background-color: var(--color-background);
138 color: var(--color-text);
139 font-size: var(--text-size);
140 line-height: 1.5;
141}
142
143.site {
144 display: flex;
145 flex-flow: column nowrap;
146 max-width: var(--site-width);
147 margin-block: calc(var(--spacing) * 2);
148 margin-inline: auto;
149}
150
151/*
152 Site Header
153*/
154
155.site-header {
156 display: flex;
157 flex-flow: row wrap;
158 align-items: center;
159 gap: var(--spacing);
160 margin-bottom: calc(var(--spacing) * 2);
161
162 .site-branding {
163 display: inline-flex;
164 flex-flow: row nowrap;
165 align-items: center;
166 gap: calc(var(--spacing) / 2);
167 line-height: 100%;
168 }
169
170 .site-logo {
171 max-height: 2.5rem;
172 width: auto;
173 border-radius: 100%;
174 box-shadow: none;
175 }
176
177 .site-name {
178 font-family: var(--font-headings);
179 font-weight: bolder;
180 font-style: italic;
181 }
182
183 .site-title {
184 display: block;
185 margin-block: 0;
186 font-size: 2.5rem;
187 line-height: 1;
188 }
189}
190
191.site-menu {
192 display: inline-flex;
193 flex-flow: row wrap;
194 justify-items: flex-end;
195 gap: var(--spacing);
196 margin-left: auto;
197}
198
199.site-menu .menu-item {
200 flex-shrink: 0;
201}
202
203/*
204 Content
205*/
206
207/* Categories */
208.category {
209 display: inline-flex;
210 padding-inline: 8px;
211 border-radius: 3px;
212 box-shadow: var(--shadow);
213 outline: 1px solid var(--color-border);
214 outline-offset: -1px;
215 color: var(--color-text) !important;
216 font-size: var(--text-size);
217 line-height: 1.85;
218 text-decoration: none !important;
219 transform: scale(1);
220 transform-origin: center center;
221 transition: transform var(--transition-duration) ease;
222
223 &:hover,
224 &:focus {
225 transform: scale(1.025)
226 }
227
228 &:active {
229 transform: scale(0.98);
230 }
231}
232
233@media (prefers-color-scheme: dark) {
234 .category {
235 color: var(--color-background) !important;
236 }
237}
238
239.blog-categories {
240 margin-bottom: calc(var(--spacing) * 2);
241}
242
243/* Archives */
244.archive-title {
245 margin-bottom: calc(var(--spacing) * 2);
246 font-family: var(--font-headings);
247}
248
249.blog-pagination {
250 display: flex;
251 flex-flow: row nowrap;
252 max-width: var(--content-width);
253 margin-left: auto;
254}
255
256/*
257 Post
258*/
259
260.post {
261 margin-bottom: calc(var(--spacing) * 4);
262}
263
264/* Header */
265.post-header {
266 vertical-align: baseline;
267 margin-bottom: var(--spacing);
268}
269
270.post-header .post-permalink {
271 display: inline;
272 margin-right: calc(var(--spacing) / 4);
273 font-family: var(--font-headings);
274 color: color-mix(in srgb, var(--color-link), transparent 50%);
275 font-size: 2rem;
276}
277
278.post-header .post-permalink:hover,
279.post-header .post-permalink:focus {
280 color: color-mix(in srgb, var(--color-link-hover), transparent 50%);
281}
282
283.post-title {
284 display: inline;
285 margin-block: 0;
286 font-family: var(--font-headings);
287 font-size: 2rem;
288}
289
290.post-header .category {
291 margin-left: calc(var(--spacing) / 4);
292}
293
294/* Content */
295.post-content > * {
296 width: 100%;
297 max-width: var(--content-width);
298 margin-left: auto;
299 margin-bottom: var(--spacing);
300}
301
302.post-content > h1,
303.post-content > h2,
304.post-content > h3,
305.post-content > h4,
306.post-content > h5,
307.post-content > h6 {
308 max-width: var(--headings-width);
309}
310
311.post-content a {
312 text-decoration-color: var(--color-border);
313}
314
315/* Post Footer */
316.post-footer {
317 max-width: var(--content-width);
318 margin-left: auto;
319 margin-top: calc(var(--spacing) * 2);
320 font-size: 1.2rem;
321
322 &::before {
323 content: " ";
324 display: block;
325 height: 1px;
326 width: 3lh;
327 background-color: var(--color-border);
328 margin-bottom: var(--spacing);
329 }
330}
331
332.post-tags {
333 display: flex;
334 flex-flow: row wrap;
335 justify-content: flex-start;
336 padding-inline-start: 0;
337 gap: 1lh;
338}
339
340.post-tags .tag-item {
341 list-style: none;
342 padding: .2rem .5rem;
343 border-radius: .2rem;
344 background-color: var(--color-shadows);
345
346 &::before {
347 content: "#";
348 color: var(--color-shadows-hover);
349 }
350
351 a {
352 color: var(--color-text);
353 }
354}
355
356.link-preview {
357 border: none;
358 border-radius: .3rem;
359 outline: 1px solid var(--color-border);
360 outline-offset: -1px;
361 box-shadow: var(--shadow);
362 padding: 1lh;
363
364 .preview-title {
365 display: block;
366 font-size: 1.6rem;
367 font-weight: bold;
368 font-style: normal;
369 margin-bottom: 0;
370 }
371
372 .preview-details {
373 display: inline-flex;
374 flex-flow: row wrap;
375 gap: 1ch;
376 }
377}
378
379/*
380 Site Footer
381*/
382
383.site-footer {
384 margin-top: calc(var(--spacing) * 4);
385 width: 100%;
386 max-width: 420px;
387 margin-left: auto;
388}
389
390.footer-menu {
391 display: flex;
392 flex-flow: column nowrap;
393 align-items: flex-start;
394 gap: calc(var(--spacing) / 2);
395 margin-top: var(--spacing);
396}