11: root {
2+ /* Light theme colors (default) */
3+
4+ --accent-color : # c04828 ;
5+
26--dark-fg-color : # fff ;
37--light-fg-color : # 141414 ;
48--light-bg-color : var (--dark-fg-color );
59--dark-bg-color : var (--light-fg-color );
610--fg-color : var (--light-fg-color );
711--bg-color : var (--light-bg-color );
8- --light-link-color : # c04828 ;
9- --dark-link-color : # c04828 ;
10- --link-color : var (--light-link-color );
12+ --link-color : var (--accent-color );
1113--light-highlight-bg-color : # ededed ;
1214--light-highlight-fg-color : # 595959 ;
1315--dark-highlight-bg-color : # 27272a ;
1416--dark-highlight-fg-color : # ededed ;
1517--highlight-fg-color : var (--light-highlight-fg-color );
1618--highlight-bg-color : var (--light-highlight-bg-color );
19+ --link-text-color : var (--accent-color );
20+ --header-border-color : # ddd ;
21+ --post-bg-color : # e5e5e5 ;
1722--font-face : "Fira Sans" , sans-serif;
23+
24+ --github-icon : url ("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" );
25+ --github-icon-black : url ("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" );
26+ }
27+
28+ @media (prefers-color-scheme : dark) {
29+ : root {
30+ --fg-color : # e1e1e1 ;
31+ --bg-color : # 222222 ;
32+ --link-color : var (--accent-color );
33+ --light-highlight-bg-color : # 2d2d2d ;
34+ --light-highlight-fg-color : # ffffff ;
35+ --dark-highlight-bg-color : # 27272a ;
36+ --dark-highlight-fg-color : # ededed ;
37+ --highlight-fg-color : var (--light-highlight-fg-color );
38+ --highlight-bg-color : var (--light-highlight-bg-color );
39+ --link-text-color : var (--accent-color );
40+ --header-border-color : # 404040 ;
41+ --post-bg-color : # 2d2d2d ;
42+ }
43+ }
44+
45+ body {
46+ background-color : var (--bg-color );
47+ color : var (--fg-color );
1848}
1949
2050* ,
@@ -89,7 +119,7 @@ header {
89119justify-items : center;
90120padding : 0.5rem 2rem ;
91121width : 100% ;
92- border-bottom : 1px solid# ddd ;
122+ border-bottom : 1px solidvar ( --header-border-color ) ;
93123font-size : 1.2rem ;
94124}
95125
@@ -111,13 +141,12 @@ header .home svg {
111141}
112142
113143header a {
114- color : black ;
144+ color : var ( --fg-color ) ;
115145border-bottom : 2px solid transparent;
116146}
117147
118148header a : hover : not (.home ) {
119- color : black;
120- border-bottom : 2px solid# c04828 ;
149+ border-bottom : 2px solidvar (--link-text-color );
121150}
122151
123152.navigation-block {
@@ -149,13 +178,13 @@ header .icon {
149178# mobile-open-navigation button div {
150179margin : 0.5em 0 ;
151180width : 2em ;
152- border-bottom : 0.25em solidblack ;
181+ border-bottom : 0.25em solidvar ( --fg-color ) ;
153182 }
154183
155184header {
156185grid-template-columns : max-content1fr ;
157186 }
158-
187+
159188 .spacer {
160189display : none;
161190 }
@@ -165,7 +194,7 @@ header .icon {
165194grid-column : auto/ span2 ;
166195justify-self : left;
167196 }
168-
197+
169198header : not (.open ) .spacer ,
170199header : not (.open ) .navigation-block {
171200display : none;
273302/* FOOTER */
274303footer {
275304align-items : center;
276- background-color : var (--fg-color );
277- color : var (--bg-color );
305+ background-color : var (--light- fg-color );
306+ color : var (--light- bg-color );
278307display : flex;
279308flex-grow : 0 ;
280309flex-shrink : 1 ;
@@ -286,17 +315,23 @@ footer {
286315}
287316
288317.github-icon {
289- background-image : url ( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" );
318+ background-image : var ( --github-icon );
290319height : 1.25rem ;
291320width : 1.25rem ;
292321}
293322
294323.github-icon-black {
295- background-image : url ( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='000' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E" );
324+ background-image : var ( --github-icon-black );
296325height : 1em ;
297326width : 1em ;
298327}
299328
329+ @media (prefers-color-scheme : dark) {
330+ .github-icon-black {
331+ background-image : var (--github-icon );
332+ }
333+ }
334+
300335.projects {
301336display : flex;
302337flex-direction : column;
@@ -325,13 +360,13 @@ footer {
325360margin-bottom : 0 ;
326361}
327362
328- .project > span {
363+ .project > span {
329364color : transparent;
330365transition : color0.3s ;
331366}
332367
333- .project : hover > span {
334- color : black ;
368+ .project : hover > span {
369+ color : var ( --fg-color ) ;
335370}
336371
337372.project : hover {
@@ -342,6 +377,7 @@ footer {
342377font-size : 3em ;
343378font-weight : 900 ;
344379margin-bottom : 0.5em ;
380+ text-transform : capitalize;
345381}
346382
347383@media (min-width : 640px ) {
@@ -353,21 +389,21 @@ footer {
353389
354390.details {
355391margin-bottom : 1.5em ;
356- color : # 333 ;
392+ color : var ( --fg-color ) ;
357393}
358394
359395.post-thingy {
360396display : block;
361397padding : 1em ;
362- color : black ;
363- background : # e5e5e5 ;
398+ color : var ( --fg-color ) ;
399+ background : var ( --post-bg-color ) ;
364400border-radius : 0.3em ;
365- border : 0.2em solid# e5e5e5 ;
401+ border : 0.2em solidvar ( --post-bg-color ) ;
366402margin-bottom : 0.5em ;
367403}
368404
369405.post-thingy : hover {
370- border-color : # c04828 ;
406+ border-color : var ( --link-text-color ) ;
371407background : transparent;
372408}
373409
@@ -391,8 +427,14 @@ blockquote {
391427
392428.links > a {
393429padding : 0.2em 1em ;
394- color : # c04828 ;
430+ color : var ( --link-text-color ) ;
395431border : 2px solid# c04828 ;
396432flex : 1 ;
397433text-align : center;
398434}
435+
436+ .links > a : hover {
437+ color : var (--dark-fg-color );
438+ background-color : # c04828 ;
439+ border-color : # c04828 ;
440+ }