arthr.me
A charming Jekyll theme.
jekyll-theme
arthr.tngl.sh
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 font-size: 2.5rem;
186 line-height: 1;
187 }
188}
189
190.site-menu {
191 display: inline-flex;
192 flex-flow: row wrap;
193 justify-items: flex-end;
194 gap: var(--spacing);
195 margin-left: auto;
196}
197
198.site-menu .menu-item {
199 flex-shrink: 0;
200}
201
202/*
203 Content
204*/
205
206/* Categories */
207.category {
208 display: inline-flex;
209 padding-inline: 8px;
210 border-radius: 3px;
211 box-shadow: var(--shadow);
212 outline: 1px solid var(--color-border);
213 outline-offset: -1px;
214 color: var(--color-text) !important;
215 font-size: var(--text-size);
216 line-height: 1.85;
217 text-decoration: none !important;
218 transform: scale(1);
219 transform-origin: center center;
220 transition: transform var(--transition-duration) ease;
221
222 &:hover,
223 &:focus {
224 transform: scale(1.025)
225 }
226
227 &:active {
228 transform: scale(0.98);
229 }
230}
231
232@media (prefers-color-scheme: dark) {
233 .category {
234 color: var(--color-background) !important;
235 }
236}
237
238.blog-categories {
239 margin-bottom: calc(var(--spacing) * 2);
240}
241
242/* Archives */
243.archive-title {
244 margin-bottom: calc(var(--spacing) * 2);
245 font-family: var(--font-headings);
246}
247
248.blog-pagination {
249 display: flex;
250 flex-flow: row nowrap;
251 max-width: var(--content-width);
252 margin-left: auto;
253}
254
255/*
256 Post
257*/
258
259.post {
260 margin-bottom: calc(var(--spacing) * 4);
261}
262
263/* Header */
264.post-header {
265 vertical-align: baseline;
266 margin-bottom: var(--spacing);
267}
268
269.post-header .post-permalink {
270 display: inline;
271 margin-right: calc(var(--spacing) / 4);
272 font-family: var(--font-headings);
273 color: color-mix(in srgb, var(--color-link), transparent 50%);
274 font-size: 2rem;
275}
276
277.post-header .post-permalink:hover,
278.post-header .post-permalink:focus {
279 color: color-mix(in srgb, var(--color-link-hover), transparent 50%);
280}
281
282.post-title {
283 display: inline;
284 margin-block: 0;
285 font-family: var(--font-headings);
286 font-size: 2rem;
287}
288
289.post-header .category {
290 margin-left: calc(var(--spacing) / 4);
291}
292
293/* Content */
294.post-content > * {
295 width: 100%;
296 max-width: var(--content-width);
297 margin-left: auto;
298 margin-bottom: var(--spacing);
299}
300
301.post-content > h1,
302.post-content > h2,
303.post-content > h3,
304.post-content > h4,
305.post-content > h5,
306.post-content > h6 {
307 max-width: var(--headings-width);
308}
309
310.post-content a {
311 text-decoration-color: var(--color-border);
312}
313
314/* Post Footer */
315.post-footer {
316 max-width: var(--content-width);
317 margin-left: auto;
318 margin-top: calc(var(--spacing) * 2);
319 font-size: 1.2rem;
320
321 &::before {
322 content: " ";
323 display: block;
324 height: 1px;
325 width: 3lh;
326 background-color: var(--color-border);
327 margin-bottom: var(--spacing);
328 }
329}
330
331.post-tags {
332 display: flex;
333 flex-flow: row wrap;
334 justify-content: flex-start;
335 padding-inline-start: 0;
336 gap: 1lh;
337}
338
339.post-tags .tag-item {
340 list-style: none;
341 padding: .2rem .5rem;
342 border-radius: .2rem;
343 background-color: var(--color-shadows);
344
345 &::before {
346 content: "#";
347 color: var(--color-shadows-hover);
348 }
349
350 a {
351 color: var(--color-text);
352 }
353}
354
355.link-preview {
356 border: none;
357 border-radius: .3rem;
358 outline: 1px solid var(--color-border);
359 outline-offset: -1px;
360 box-shadow: var(--shadow);
361 padding: 1lh;
362
363 .preview-title {
364 display: block;
365 font-size: 1.6rem;
366 font-weight: bold;
367 font-style: normal;
368 margin-bottom: 0;
369 }
370
371 .preview-details {
372 display: inline-flex;
373 flex-flow: row wrap;
374 gap: 1ch;
375 }
376}
377
378/*
379 Site Footer
380*/
381
382.site-footer {
383 margin-top: calc(var(--spacing) * 4);
384 width: 100%;
385 max-width: 420px;
386 margin-left: auto;
387}
388
389.footer-menu {
390 display: flex;
391 flex-flow: column nowrap;
392 align-items: flex-start;
393 gap: calc(var(--spacing) / 2);
394 margin-top: var(--spacing);
395}