A charming Jekyll theme.
jekyll-theme

feat(theme): adds support for custom styles and fonts

+87 -35
+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
··· 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
··· 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
··· 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
··· 1 + /* 2 + You can add your custom styles by replacing this file in your own website. 3 + */ 4 + 5 + :root { 6 + --font-body: "Atkinson Hyperlegible Next", sans-serif; 7 + --font-code: "Atkinson Hyperlegible Mono", monospace; 8 + }
assets/fonts/atkinson.ttf

This is a binary file and will not be displayed.

assets/fonts/atkinson.woff2

This is a binary file and will not be displayed.

assets/fonts/mono.ttf

This is a binary file and will not be displayed.

assets/fonts/mono.woff2

This is a binary file and will not be displayed.