A charming Jekyll theme.
linus.arthr.dev/
jekyll-theme
feat(theme): adds support for custom styles and fonts
+87
-35
+2
_layouts/default.html
+2
_layouts/default.html
···
31
31
<link rel="stylesheet" href="{%- link assets/css/base.css -%}" />
32
32
<link rel="stylesheet" href="{%- link assets/css/layout.css -%}" />
33
33
<link rel="stylesheet" href="{%- link assets/css/syntax.css -%}" />
34
+
<link rel="stylesheet" href="{%- link assets/css/theme.css -%}" />
35
+
<link rel="stylesheet" href="{%- link assets/css/fonts.css -%}" />
34
36
</head>
35
37
<body>
36
38
<div class="site">
+4
-35
assets/css/base.css
+4
-35
assets/css/base.css
···
1
-
:root {
2
-
--font-headings: ui-serif, serif;
3
-
--font-body: ui-sans-serif, sans-serif;
4
-
--font-code: ui-monospace, monospace;
5
-
6
-
--text-size: 1.4rem;
7
-
--text-line-height: 1.65;
8
-
--spacing: 2rem;
9
-
10
-
--transition-duration: 250ms;
11
-
12
-
--site-width: 700px;
13
-
--content-width: 420px;
14
-
--headings-width: 480px;
15
-
16
-
--color-background: #F5EDD8;
17
-
--color-text: #3B2A1A;
18
-
--color-link: #2D5438;
19
-
--color-link-hover: #1E3826;
20
-
--color-support: #D9634E;
21
-
--color-shadows: color-mix(in srgb, var(--color-text), transparent 75%);
22
-
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 50%);
23
-
--color-border: color-mix(in srgb, currentcolor, transparent 50%);
24
-
}
25
-
26
-
@media (prefers-color-scheme: dark) {
27
-
:root {
28
-
--color-background: #3B2A1A;
29
-
--color-text: #F5EDD8;
30
-
--color-link: #E8A054;
31
-
--color-link-hover: #F5C880;
32
-
--color-support: #D9634E;
33
-
}
34
-
}
35
-
36
1
/* Quotes */
37
2
q {
38
3
quotes: "“" "”" "‘" "’";
···
230
195
img, video, audio, iframe {
231
196
border-radius: .3rem;
232
197
box-shadow: 1rem .5rem 0 var(--color-shadows);
198
+
}
199
+
200
+
video, audio, iframe {
201
+
display: block;
233
202
}
234
203
235
204
iframe[src*="youtube"],
+35
assets/css/fonts.css
+35
assets/css/fonts.css
···
1
+
/*
2
+
You can add your custom fonts by replacing this file in your own website.
3
+
*/
4
+
5
+
@font-face {
6
+
font-family: 'Atkinson Hyperlegible Next';
7
+
font-style: italic;
8
+
font-weight: 200 800;
9
+
font-display: swap;
10
+
src: url('/assets/fonts/next.woff2') format('woff2');
11
+
}
12
+
13
+
@font-face {
14
+
font-family: 'Atkinson Hyperlegible Next';
15
+
font-style: normal;
16
+
font-weight: 200 800;
17
+
font-display: swap;
18
+
src: url('/assets/fonts/next.woff2') format('woff2');
19
+
}
20
+
21
+
@font-face {
22
+
font-family: 'Atkinson Hyperlegible Mono';
23
+
font-style: italic;
24
+
font-weight: 200 800;
25
+
font-display: swap;
26
+
src: url('/assets/fonts/mono.woff2') format('woff2');
27
+
}
28
+
29
+
@font-face {
30
+
font-family: 'Atkinson Hyperlegible Mono';
31
+
font-style: normal;
32
+
font-weight: 200 800;
33
+
font-display: swap;
34
+
src: url('/assets/fonts/mono.woff2') format('woff2');
35
+
}
+38
assets/css/layout.css
+38
assets/css/layout.css
···
1
1
2
2
3
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 75%);
28
+
--color-shadows-hover: color-mix(in srgb, var(--color-text), transparent 50%);
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
+
4
42
html {
5
43
box-sizing: border-box;
6
44
color-scheme: light dark;
+8
assets/css/theme.css
+8
assets/css/theme.css
assets/fonts/atkinson.ttf
assets/fonts/atkinson.ttf
This is a binary file and will not be displayed.
assets/fonts/atkinson.woff2
assets/fonts/atkinson.woff2
This is a binary file and will not be displayed.
assets/fonts/mono.ttf
assets/fonts/mono.ttf
This is a binary file and will not be displayed.
assets/fonts/mono.woff2
assets/fonts/mono.woff2
This is a binary file and will not be displayed.