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