initial commit

config.toml

@@ -0,0 +1,21 @@
+# The URL the site will be built for
+base_url = "https://example.com"
+
+# Whether to automatically compile all Sass files in the sass directory
+compile_sass = true
+
+# Whether to build a search index to be used later on by a JavaScript library
+build_search_index = false
+
+[markdown]
+# Whether to do syntax highlighting
+# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
+highlight_code = true
+highlight_theme = "css" # use this if you want code blocks to fit in with the theme
+
+[extra]
+# Put all your custom variables here
+
+image_vertical_crop_height = 768
+author = "example"
+default_dark = false

sass/code-highlight-dark.scss

@@ -0,0 +1,80 @@
+/*
+ * based on Monokai, modified to fit reasonable colors
+ */
+@import 'reasonable-colors';
+
+   
+.z-comment {
+color: $color-gray-3;
+}
+.z-string {
+color: $color-amber-2;
+}
+.z-constant.z-numeric {
+color: $color-purple-3;
+}
+.z-constant.z-language {
+color: $color-purple-3;
+}
+.z-constant.z-character, .z-constant.z-other {
+color: $color-purple-3;
+}
+.z-keyword {
+color: $color-raspberry-3;
+}
+.z-storage {
+color: $color-raspberry-3;
+}
+.z-storage.z-type {
+color: $color-powder-2;
+font-style: italic;
+}
+.z-entity.z-name.z-class {
+color: $color-green-2;
+font-style: underline;
+}
+.z-entity.z-other.z-inherited-class {
+color: $color-green-2;
+font-style: underline;
+font-style: italic;
+}
+.z-entity.z-name.z-function {
+color: $color-green-2;
+}
+.z-variable.z-parameter {
+color: $color-cinnamon-2;
+font-style: italic;
+}
+.z-entity.z-name.z-tag {
+color: $color-raspberry-3;
+}
+.z-entity.z-other.z-attribute-name {
+color: $color-green-2;
+}
+.z-support.z-function {
+color: $color-powder-2;
+}
+.z-support.z-constant {
+color: $color-powder-2;
+}
+.z-support.z-type, .z-support.z-class {
+color: $color-powder-2;
+font-style: italic;
+}
+.z-invalid {
+color: $color-gray-1;
+background-color: $color-raspberry-3;
+}
+.z-invalid.z-deprecated {
+color: $color-gray-1;
+background-color: $color-purple-3;
+}
+.z-path {
+color: $color-indigo-3;
+}
+.z-generic {
+color: $color-green-3;
+}
+.z-return-type {
+color: $color-green-2;
+}

sass/code-highlight-light.scss

@@ -0,0 +1,80 @@
+/*
+ * based on Monokai, modified to fit reasonable colors
+ */
+@import 'reasonable-colors';
+
+   
+.z-comment {
+color: $color-gray-4;
+}
+.z-string {
+color: $color-amber-3;
+}
+.z-constant.z-numeric {
+color: $color-purple-4;
+}
+.z-constant.z-language {
+color: $color-purple-4;
+}
+.z-constant.z-character, .z-constant.z-other {
+color: $color-purple-4;
+}
+.z-keyword {
+color: $color-raspberry-4;
+}
+.z-storage {
+color: $color-raspberry-4;
+}
+.z-storage.z-type {
+color: $color-powder-4;
+font-style: italic;
+}
+.z-entity.z-name.z-class {
+color: $color-green-3;
+font-style: underline;
+}
+.z-entity.z-other.z-inherited-class {
+color: $color-green-3;
+font-style: underline;
+font-style: italic;
+}
+.z-entity.z-name.z-function {
+color: $color-green-3;
+}
+.z-variable.z-parameter {
+color: $color-cinnamon-3;
+font-style: italic;
+}
+.z-entity.z-name.z-tag {
+color: $color-raspberry-4;
+}
+.z-entity.z-other.z-attribute-name {
+color: $color-green-3;
+}
+.z-support.z-function {
+color: $color-powder-4;
+}
+.z-support.z-constant {
+color: $color-powder-4;
+}
+.z-support.z-type, .z-support.z-class {
+color: $color-powder-4;
+font-style: italic;
+}
+.z-invalid {
+color: $color-gray-1;
+background-color: $color-raspberry-4;
+}
+.z-invalid.z-deprecated {
+color: $color-gray-1;
+background-color: $color-purple-4;
+}
+.z-path {
+color: $color-indigo-4;
+}
+.z-generic {
+color: $color-green-4;
+}
+.z-return-type {
+color: $color-green-3;
+}

sass/reasonable-colors.scss

@@ -0,0 +1,252 @@
+/*! reasonable colors v0.4.0 | MIT License | https://github.com/matthewhowell/reasonable-colors */
+
+/* ******
+
+Format for SCSS variables: $color-COLORNAME-SHADE
+
+Available values for COLORNAME:
+	gray,
+	rose, raspberry, red, orange, cinnamon, amber, yellow, lime,
+	chartreuse, green, emerald, aquamarine, teal, cyan, powder, sky
+	cerulean, azure, blue, indigo, violet, purple, magenta, pink
+
+Available values for SHADE:
+	1, 2, 3, 4, 5, 6
+
+Minimum contrast can be inferred by the difference between two SHADE numbers
+
+- Difference of 2: (3:1)
+- Difference of 3: (4.5:1)
+- Difference of 4: (7:1)
+
+reasonable-colors.css uses hex values. HSL, LCH, and RGB color spaces are available.
+
+For .scss friendly variable declarations, FILENAME.scss for each color space are provided.
+
+More information available at: https://www.reasonable.work/colors 
+
+****** */
+
+/* gray */
+$color-gray-1: #f6f6f6;
+$color-gray-2: #e2e2e2;
+$color-gray-3: #8b8b8b;
+$color-gray-4: #6f6f6f;
+$color-gray-5: #3e3e3e;
+$color-gray-6: #222222;
+
+/* rose */
+/* hue 1 */
+$color-rose-1: #fff7f9;
+$color-rose-2: #ffdce5;
+$color-rose-3: #ff3b8d;
+$color-rose-4: #db0072;
+$color-rose-5: #800040;
+$color-rose-6: #4c0023;
+
+/* raspberry */
+/* hue 2 */
+$color-raspberry-1: #fff8f8;
+$color-raspberry-2: #ffdddf;
+$color-raspberry-3: #ff426c;
+$color-raspberry-4: #de0051;
+$color-raspberry-5: #82002c;
+$color-raspberry-6: #510018;
+
+/* red */
+/* hue 3 */
+$color-red-1: #fff8f6;
+$color-red-2: #ffddd8;
+$color-red-3: #ff4647;
+$color-red-4: #e0002b;
+$color-red-5: #830014;
+$color-red-6: #530003;
+
+/* orange */
+/* hue 4 */
+$color-orange-1: #fff8f5;
+$color-orange-2: #ffded1;
+$color-orange-3: #fd4d00;
+$color-orange-4: #cd3c00;
+$color-orange-5: #752100;
+$color-orange-6: #401600;
+
+/* cinnamon */
+/* hue 5 */
+$color-cinnamon-1: #fff8f3;
+$color-cinnamon-2: #ffdfc6;
+$color-cinnamon-3: #d57300;
+$color-cinnamon-4: #ac5c00;
+$color-cinnamon-5: #633300;
+$color-cinnamon-6: #371d00;
+
+/* amber */
+/* hue 6 */
+$color-amber-1: #fff8ef;
+$color-amber-2: #ffe0b2;
+$color-amber-3: #b98300;
+$color-amber-4: #926700;
+$color-amber-5: #523800;
+$color-amber-6: #302100;
+
+/* yellow */
+/* hue 7 */
+$color-yellow-1: #fff9e5;
+$color-yellow-2: #ffe53e;
+$color-yellow-3: #9c8b00;
+$color-yellow-4: #7d6f00;
+$color-yellow-5: #463d00;
+$color-yellow-6: #292300;
+
+/* lime */
+/* hue 8 */
+$color-lime-1: #f7ffac;
+$color-lime-2: #d5f200;
+$color-lime-3: #819300;
+$color-lime-4: #677600;
+$color-lime-5: #394100;
+$color-lime-6: #222600;
+
+/* chartreuse */
+/* hue 9 */
+$color-chartreuse-1: #e5ffc3;
+$color-chartreuse-2: #98fb00;
+$color-chartreuse-3: #5c9b00;
+$color-chartreuse-4: #497c00;
+$color-chartreuse-5: #264500;
+$color-chartreuse-6: #182600;
+
+/* green */
+/* hue 10 */
+$color-green-1: #e0ffd9;
+$color-green-2: #72ff6c;
+$color-green-3: #00a21f;
+$color-green-4: #008217;
+$color-green-5: #004908;
+$color-green-6: #062800;
+
+/* emerald */
+/* hue 11 */
+$color-emerald-1: #dcffe6;
+$color-emerald-2: #5dffa2;
+$color-emerald-3: #00a05a;
+$color-emerald-4: #008147;
+$color-emerald-5: #004825;
+$color-emerald-6: #002812;
+
+/* aquamarine */
+/* hue 12 */
+$color-aquamarine-1: #daffef;
+$color-aquamarine-2: #42ffc6;
+$color-aquamarine-3: #009f78;
+$color-aquamarine-4: #007f5f;
+$color-aquamarine-5: #004734;
+$color-aquamarine-6: #00281b;
+
+/* teal */
+/* hue 13 */
+$color-teal-1: #d7fff7;
+$color-teal-2: #00ffe4;
+$color-teal-3: #009e8c;
+$color-teal-4: #007c6e;
+$color-teal-5: #00443c;
+$color-teal-6: #002722;
+
+/* cyan */
+/* hue 14 */
+$color-cyan-1: #c4fffe;
+$color-cyan-2: #00fafb;
+$color-cyan-3: #00999a;
+$color-cyan-4: #007a7b;
+$color-cyan-5: #004344;
+$color-cyan-6: #002525;
+
+/* powder */
+/* hue 15 */
+$color-powder-1: #dafaff;
+$color-powder-2: #8df0ff;
+$color-powder-3: #0098a9;
+$color-powder-4: #007987;
+$color-powder-5: #004048;
+$color-powder-6: #002227;
+
+/* sky */
+/* hue 16 */
+$color-sky-1: #e3f7ff;
+$color-sky-2: #aee9ff;
+$color-sky-3: #0094b4;
+$color-sky-4: #007590;
+$color-sky-5: #00404f;
+$color-sky-6: #001f28;
+
+/* cerulean */
+/* hue 17 */
+$color-cerulean-1: #e8f6ff;
+$color-cerulean-2: #b9e3ff;
+$color-cerulean-3: #0092c5;
+$color-cerulean-4: #00749d;
+$color-cerulean-5: #003c54;
+$color-cerulean-6: #001d2a;
+
+/* azure */
+/* hue 18 */
+$color-azure-1: #e8f2ff;
+$color-azure-2: #c6e0ff;
+$color-azure-3: #008fdb;
+$color-azure-4: #0071af;
+$color-azure-5: #003b5e;
+$color-azure-6: #001c30;
+
+/* blue */
+/* hue 19 */
+$color-blue-1: #f0f4ff;
+$color-blue-2: #d4e0ff;
+$color-blue-3: #0089fc;
+$color-blue-4: #006dca;
+$color-blue-5: #00386d;
+$color-blue-6: #001a39;
+
+/* indigo */
+/* hue 20 */
+$color-indigo-1: #f3f3ff;
+$color-indigo-2: #deddff;
+$color-indigo-3: #657eff;
+$color-indigo-4: #0061fc;
+$color-indigo-5: #00328a;
+$color-indigo-6: #001649;
+
+/* violet */
+/* hue 21 */
+$color-violet-1: #f7f1ff;
+$color-violet-2: #e8daff;
+$color-violet-3: #9b70ff;
+$color-violet-4: #794aff;
+$color-violet-5: #2d0fbf;
+$color-violet-6: #0b0074;
+	
+/* purple */
+/* hue 22 */
+$color-purple-1: #fdf4ff;
+$color-purple-2: #f7d9ff;
+$color-purple-3: #d150ff;
+$color-purple-4: #b01fe3;
+$color-purple-5: #660087;
+$color-purple-6: #3a004f;
+
+/* magenta */
+/* hue 23 */
+$color-magenta-1: #fff3fc;
+$color-magenta-2: #ffd7f6;
+$color-magenta-3: #f911e0;
+$color-magenta-4: #ca00b6;
+$color-magenta-5: #740068;
+$color-magenta-6: #44003c;
+
+/* pink */
+/* hue 24 */
+$color-pink-1: #fff7fb;
+$color-pink-2: #ffdcec;
+$color-pink-3: #ff2fb2;
+$color-pink-4: #d2008f;
+$color-pink-5: #790051;
+$color-pink-6: #4b0030;

sass/style.sass

@@ -0,0 +1,243 @@
+@import reasonable-colors
+    
+@mixin padding-horiz($amount) // this was probably unnecessary lmao
+    padding-left: $amount
+    padding-right: $amount
+
+@font-face
+    font-family: TT2020
+    src: url("TT2020StyleE-Regular.woff2")
+
+@import url("iosevka.css")
+
+@import url("iosevka-etoile.css")
+
+body
+    display: grid
+    grid-template-areas: "nav content" "sidebar content" "footer content"
+
+    grid-template-rows: 50px 1fr 50px
+    grid-template-columns: 20rem 1fr
+
+    grid-column-gap: 2rem
+
+    height: 100vh
+
+    margin: 0
+    padding-right: 1rem
+
+    background-color: #e9e9dc
+
+    font-family: "Iosevka Etoile Web", sans-serif
+    font-size: 13pt
+
+    a
+        color: #0053a7
+        text-decoration: underline 0.1em rgba(0, 83, 167, 0)
+        transition: text-decoration-color 300ms ease-in-out
+
+        &:hover
+            text-decoration-color: rgba(0, 83, 167, 0.5)
+        
+        &:visited
+            color: #4520f7
+
+        &:active
+            color: #db2b07
+
+        &.stealth
+            color: inherit
+    
+    figure
+        max-width: 100%
+        margin: -1px -1px 1rem -1px
+        border-bottom: 1px solid silver
+        padding-bottom: 1rem
+
+        img
+            max-width: 100%
+            object-fit: cover
+        
+        > div
+            display: flex
+            flex-flow: row nowrap
+            justify-content: space-between
+            gap: 2rem
+
+            a
+                white-space: nowrap
+
+    nav
+        @include padding-horiz(1rem)
+        grid-area: nav
+
+        height: 50px
+        display: flex
+        flex-flow: row nowrap
+        justify-content: space-between
+        align-items: center
+        background-color: #f2f2e1
+
+    
+    article
+        @include padding-horiz(2rem)
+        margin: 1rem 0
+        grid-area: content
+        overflow-y: scroll
+        background-color: #f9f9e8
+        background-image: url("/paper53.png"), url("/paper89.png"), url("/paper59.png"), url("/paper67.png")
+        background-attachment: local
+        max-width: 60rem
+        box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3)
+
+        font-family: "TT2020", serif
+        font-size: 16pt
+
+        pre
+            padding: 1rem
+            font-size: 13pt
+            max-height: 40rem
+            overflow: scroll
+
+            background-color: rgba(0, 0, 0, 0.007)
+            box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset
+
+            &[data-linenos]
+                padding: 1rem 0.5rem
+
+            table td
+                padding: 0
+
+                &:first-of-type
+                    text-align: right
+                    user-select: none
+                    padding-right: 0.5rem
+                    border-right: 2px solid rgba(0, 0, 0, 0.2)
+
+                    mark
+                        background: none
+                
+                &:last-of-type
+                    padding-left: 0.5rem
+
+            mark
+                display: block
+                background-color: rgba($color-yellow-2, 0.3)
+                font-weight: bold
+
+            code
+                font-family: "Iosevka Web", monospace
+                font-stretch: extended
+                font-feature-settings: "ss05" 1, "cv89" 2
+                @import code-highlight-light
+
+    aside
+        @include padding-horiz(1rem)
+        padding-top: 1rem
+        grid-area: sidebar
+        overflow-y: scroll
+        background-color: #f2f2e1
+        border-top: 2px solid rgba(0, 0, 0, 0.1)
+        border-bottom: 2px solid rgba(0, 0, 0, 0.1)
+        display: flex
+        flex-flow: column nowrap
+
+    footer
+        grid-area: footer
+        display: flex
+        justify-content: center
+        align-items: center
+        background-color: #f2f2e1
+        height: 50px
+
+    #theme-toggle
+        cursor: pointer
+    
+    
+
+
+body.dark
+    // todo: fix lmao
+    background-color: #232327
+    color: #e7e3d5
+
+    a
+        color: #207edb
+        text-decoration-color: rgba(30, 115, 201, 0)
+        &:hover
+            text-decoration-color: rgba(30, 115, 201, 0.5)
+        
+        &:visited
+            color: #aa99ff
+
+        &:active
+            color: #ed4523
+
+
+    article
+        font-family: "Iosevka Etoile Web"
+        color: #e9e3d3
+        background-color: #0a0b0c
+        background-image: url("rocky-wall-50.png")
+
+        pre
+            background-color: rgba(5, 5, 5, 0.6)
+            box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.5) inset
+
+            table td
+                mark
+                    color: #e9e3d3
+
+            code
+                @import code-highlight-dark
+        
+            mark
+                background-color: rgba($color-yellow-2, 0.1)
+
+    aside
+        background-color: #18181a
+
+    nav
+        background-color: #18181a
+
+    footer
+        background-color: #18181a
+
+
+@media print 
+    body
+        grid-template-areas: "sidebar" "content" "footer"
+        grid-template-columns: 1fr
+
+
+@media screen and (max-width: 1400px)
+    // at this point the page has roughly the same
+    // padding on the left and right side
+    body
+        grid-template-columns: 15rem 1fr
+
+
+@media screen and (max-width: 980px)
+    body
+        height: revert
+        display: flex
+        flex-flow: column nowrap
+        padding-right: 0
+
+        aside
+            overflow-y: revert
+            border-bottom: none
+    
+        article
+            margin: 0
+            overflow-y: revert
+            
+@media screen and (max-width: 480)
+    body
+        font-size: 12pt
+
+        article
+            font-size: 15pt
+            @include padding-horiz(1rem)
+
+    

static/iosevka-etoile.css

@@ -0,0 +1,315 @@
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-thin.ttf') format('truetype'), url('woff2/iosevka-etoile-thin.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-thinoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-thinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-thinoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-thinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-thinitalic.ttf') format('truetype'), url('woff2/iosevka-etoile-thinitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-extralight.ttf') format('truetype'), url('woff2/iosevka-etoile-extralight.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-extralightoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-extralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-extralightoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-extralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-extralightitalic.ttf') format('truetype'), url('woff2/iosevka-etoile-extralightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-light.ttf') format('truetype'), url('woff2/iosevka-etoile-light.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-lightoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-lightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-lightoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-lightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-lightitalic.ttf') format('truetype'), url('woff2/iosevka-etoile-lightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-regular.ttf') format('truetype'), url('woff2/iosevka-etoile-regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-oblique.ttf') format('truetype'), url('woff2/iosevka-etoile-oblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-oblique.ttf') format('truetype'), url('woff2/iosevka-etoile-oblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-italic.ttf') format('truetype'), url('woff2/iosevka-etoile-italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-medium.ttf') format('truetype'), url('woff2/iosevka-etoile-medium.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-mediumoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-mediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-mediumoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-mediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-mediumitalic.ttf') format('truetype'), url('woff2/iosevka-etoile-mediumitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-semibold.ttf') format('truetype'), url('woff2/iosevka-etoile-semibold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-semiboldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-semiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-semiboldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-semiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-semibolditalic.ttf') format('truetype'), url('woff2/iosevka-etoile-semibolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-bold.ttf') format('truetype'), url('woff2/iosevka-etoile-bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-boldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-boldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-boldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-boldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-bolditalic.ttf') format('truetype'), url('woff2/iosevka-etoile-bolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-extrabold.ttf') format('truetype'), url('woff2/iosevka-etoile-extrabold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-extraboldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-extraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-extraboldoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-extraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-extrabolditalic.ttf') format('truetype'), url('woff2/iosevka-etoile-extrabolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-etoile-heavy.ttf') format('truetype'), url('woff2/iosevka-etoile-heavy.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-etoile-heavyoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-heavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web Oblique';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	src: url('ttf/iosevka-etoile-heavyoblique.ttf') format('truetype'), url('woff2/iosevka-etoile-heavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Etoile Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-etoile-heavyitalic.ttf') format('truetype'), url('woff2/iosevka-etoile-heavyitalic.woff2') format('woff2');
+}

static/iosevka.css

@@ -0,0 +1,630 @@
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-thin.ttf') format('truetype'), url('woff2/iosevka-thin.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedthin.ttf') format('truetype'), url('woff2/iosevka-extendedthin.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-thinoblique.ttf') format('truetype'), url('woff2/iosevka-thinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	src: url('ttf/iosevka-thinoblique.ttf') format('truetype'), url('woff2/iosevka-thinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedthinoblique.ttf') format('truetype'), url('woff2/iosevka-extendedthinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedthinoblique.ttf') format('truetype'), url('woff2/iosevka-extendedthinoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-thinitalic.ttf') format('truetype'), url('woff2/iosevka-thinitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 100;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedthinitalic.ttf') format('truetype'), url('woff2/iosevka-extendedthinitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-extralight.ttf') format('truetype'), url('woff2/iosevka-extralight.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedextralight.ttf') format('truetype'), url('woff2/iosevka-extendedextralight.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-extralightoblique.ttf') format('truetype'), url('woff2/iosevka-extralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	src: url('ttf/iosevka-extralightoblique.ttf') format('truetype'), url('woff2/iosevka-extralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedextralightoblique.ttf') format('truetype'), url('woff2/iosevka-extendedextralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedextralightoblique.ttf') format('truetype'), url('woff2/iosevka-extendedextralightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-extralightitalic.ttf') format('truetype'), url('woff2/iosevka-extralightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 200;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedextralightitalic.ttf') format('truetype'), url('woff2/iosevka-extendedextralightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-light.ttf') format('truetype'), url('woff2/iosevka-light.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedlight.ttf') format('truetype'), url('woff2/iosevka-extendedlight.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-lightoblique.ttf') format('truetype'), url('woff2/iosevka-lightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	src: url('ttf/iosevka-lightoblique.ttf') format('truetype'), url('woff2/iosevka-lightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedlightoblique.ttf') format('truetype'), url('woff2/iosevka-extendedlightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedlightoblique.ttf') format('truetype'), url('woff2/iosevka-extendedlightoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-lightitalic.ttf') format('truetype'), url('woff2/iosevka-lightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 300;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedlightitalic.ttf') format('truetype'), url('woff2/iosevka-extendedlightitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-regular.ttf') format('truetype'), url('woff2/iosevka-regular.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extended.ttf') format('truetype'), url('woff2/iosevka-extended.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-oblique.ttf') format('truetype'), url('woff2/iosevka-oblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	src: url('ttf/iosevka-oblique.ttf') format('truetype'), url('woff2/iosevka-oblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedoblique.ttf') format('truetype'), url('woff2/iosevka-extendedoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedoblique.ttf') format('truetype'), url('woff2/iosevka-extendedoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-italic.ttf') format('truetype'), url('woff2/iosevka-italic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 400;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendeditalic.ttf') format('truetype'), url('woff2/iosevka-extendeditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-medium.ttf') format('truetype'), url('woff2/iosevka-medium.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedmedium.ttf') format('truetype'), url('woff2/iosevka-extendedmedium.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-mediumoblique.ttf') format('truetype'), url('woff2/iosevka-mediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	src: url('ttf/iosevka-mediumoblique.ttf') format('truetype'), url('woff2/iosevka-mediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedmediumoblique.ttf') format('truetype'), url('woff2/iosevka-extendedmediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedmediumoblique.ttf') format('truetype'), url('woff2/iosevka-extendedmediumoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-mediumitalic.ttf') format('truetype'), url('woff2/iosevka-mediumitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 500;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedmediumitalic.ttf') format('truetype'), url('woff2/iosevka-extendedmediumitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-semibold.ttf') format('truetype'), url('woff2/iosevka-semibold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedsemibold.ttf') format('truetype'), url('woff2/iosevka-extendedsemibold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-semiboldoblique.ttf') format('truetype'), url('woff2/iosevka-semiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	src: url('ttf/iosevka-semiboldoblique.ttf') format('truetype'), url('woff2/iosevka-semiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedsemiboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedsemiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedsemiboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedsemiboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-semibolditalic.ttf') format('truetype'), url('woff2/iosevka-semibolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 600;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedsemibolditalic.ttf') format('truetype'), url('woff2/iosevka-extendedsemibolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-bold.ttf') format('truetype'), url('woff2/iosevka-bold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedbold.ttf') format('truetype'), url('woff2/iosevka-extendedbold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-boldoblique.ttf') format('truetype'), url('woff2/iosevka-boldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	src: url('ttf/iosevka-boldoblique.ttf') format('truetype'), url('woff2/iosevka-boldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-bolditalic.ttf') format('truetype'), url('woff2/iosevka-bolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 700;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedbolditalic.ttf') format('truetype'), url('woff2/iosevka-extendedbolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-extrabold.ttf') format('truetype'), url('woff2/iosevka-extrabold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedextrabold.ttf') format('truetype'), url('woff2/iosevka-extendedextrabold.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-extraboldoblique.ttf') format('truetype'), url('woff2/iosevka-extraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	src: url('ttf/iosevka-extraboldoblique.ttf') format('truetype'), url('woff2/iosevka-extraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedextraboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedextraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedextraboldoblique.ttf') format('truetype'), url('woff2/iosevka-extendedextraboldoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-extrabolditalic.ttf') format('truetype'), url('woff2/iosevka-extrabolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 800;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedextrabolditalic.ttf') format('truetype'), url('woff2/iosevka-extendedextrabolditalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: normal;
+	src: url('ttf/iosevka-heavy.ttf') format('truetype'), url('woff2/iosevka-heavy.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: expanded;
+	font-style: normal;
+	src: url('ttf/iosevka-extendedheavy.ttf') format('truetype'), url('woff2/iosevka-extendedheavy.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: oblique;
+	src: url('ttf/iosevka-heavyoblique.ttf') format('truetype'), url('woff2/iosevka-heavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	src: url('ttf/iosevka-heavyoblique.ttf') format('truetype'), url('woff2/iosevka-heavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: expanded;
+	font-style: oblique;
+	src: url('ttf/iosevka-extendedheavyoblique.ttf') format('truetype'), url('woff2/iosevka-extendedheavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web Oblique';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: expanded;
+	src: url('ttf/iosevka-extendedheavyoblique.ttf') format('truetype'), url('woff2/iosevka-extendedheavyoblique.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: normal;
+	font-style: italic;
+	src: url('ttf/iosevka-heavyitalic.ttf') format('truetype'), url('woff2/iosevka-heavyitalic.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: 'Iosevka Web';
+	font-display: swap;
+	font-weight: 900;
+	font-stretch: expanded;
+	font-style: italic;
+	src: url('ttf/iosevka-extendedheavyitalic.ttf') format('truetype'), url('woff2/iosevka-extendedheavyitalic.woff2') format('woff2');
+}

static/script.js

@@ -0,0 +1,14 @@
+let placeholder = document.getElementById('theme-toggle-placeholder');
+
+if (placeholder) {
+    let toggle = document.createElement("span");
+    toggle.id = "theme-toggle";
+    toggle.addEventListener("click", () => {
+        toggle_theme_pref();
+        update_theme();
+        update_theme_toggle();
+    });
+    placeholder.replaceWith(toggle);
+
+    update_theme_toggle();
+}

templates/404.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+
+{% block title %}404 - that's an error{% endblock %}
+
+{% block content %}
+<h1>404!</h1>
+<p>uh oh, that page was not found. here's a kitten instead.</p>
+<p>todo: pic of a kitten</p>
+<p>now, head back to the <a href="/">main page</a></p>
+{% endblock %}

templates/base.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta charset="UTF-8">
+    <title>{% block title %}{{ config.title }}{% endblock %}</title>
+
+    {%- block page_meta %}
+        {% if config.description %}
+    <meta name="description" content="{{ config.description | truncate(length=150) }}"/>
+        {% endif %}
+        {% if config.extra.author%}
+    <meta name="author" content="{{ config.extra.author }}" />
+        {% endif %}
+    {% endblock -%}
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    {%- block css %}
+    <link href="{{ get_url(path='style.css', trailing_slash=false) | safe }}" rel="stylesheet"/>
+    {% endblock css -%}
+
+  </head>
+  <body {% if config.extra.default_dark %}class="dark"{% endif %}>
+    <script>
+        function get_theme_pref() {
+            let pref_dark = false
+            if(localStorage.getItem('prefers-color') === 'dark') {
+                pref_dark = true;
+            } else if(localStorage.getItem('prefers-color') === 'light') {
+                pref_dark = false;
+            } else {
+                pref_dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            }
+            return pref_dark;
+        }
+        function set_theme_pref(dark = false) {
+            localStorage.setItem('prefers-color', dark ? "dark" : "light");
+        }
+        function toggle_theme_pref() {
+            set_theme_pref(!get_theme_pref());
+        }
+        function update_theme() {
+            if (get_theme_pref()) {
+                document.body.classList.add("dark");
+            } else {
+                document.body.classList.remove("dark");
+            }
+        }
+        function update_theme_toggle() {
+            let toggle = document.getElementById('theme-toggle');
+            if (toggle) {
+                toggle.innerHTML = get_theme_pref() ? '☀️' : '🌙';
+            }
+        }
+
+        update_theme();
+    </script>
+    <nav>{% block nav %}{% endblock %}</nav>
+    <aside>{% block aside %}{% endblock %}</aside>
+    <article>
+        {%- block content %}<h1>override the content block in a template</h1>{% endblock -%}
+    </article>
+    <footer>{% block footer %}{% endblock %}</footer>
+
+  </body>
+  {% block js %}
+    <script src="{{ get_url(path='script.js', trailing_slash=false) | safe }}"></script>
+  {% endblock %}
+</html>

templates/index.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+
+{% block content %}
+{% for page in section.pages | reverse %}
+<h1><a href="{{ page.permalink }}" class="stealth">{{ page.title }}</a></h1>
+{% if page.date %}
+<span>{{ page.date | date(format="%Y-%m-%d") }}</span>
+{% endif %}
+{% if page.summary %}
+<p>{{ page.summary | safe }}</p>
+{% endif %}
+{% if not loop.last %}<hr>{% endif %}
+{% endfor %}
+{% endblock %}
+
+{% block footer %}
+<span>
+    &copy; {{ now() | date(format='%Y') }}
+    {% if section.extra.author %}
+    {{ section.extra.author }}
+    {% elif config.extra.author %}
+    {{ config.extra.author }}
+    {% endif %}
+</span>
+{% endblock %}
+
+{% block aside %}
+{% for k, thing in section %}
+{{ k }}: {{ thing }}<br>
+{% endfor %}
+{% endblock %}

templates/page.html

@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% block title %}
+    {{ page.title }} - {{ config.title }}
+{% endblock %}
+
+{% block page_meta %}
+    {% if page.description %}
+        <meta name="description" content="{{ page.description | safe | default(value='') | truncate(length=150) }}" />
+    {% endif %}
+    {% if page.extra.author or config.extra.author %}
+        <meta name="author" content="{% if page.extra.author %}{{ page.extra.author }}{% else %}{{ config.extra.author }}{% endif %}" />
+    {% endif %}
+{% endblock %}
+
+{% block nav %}
+    <span><a href="..">..</a>/{{ page.slug }}</span>
+    <noscript id="theme-toggle-placeholder"></noscript>
+{% endblock %}
+
+{% block content %}
+    <h1 id="page-title">{{ page.title }}</h1>
+    {{ page.content | safe }}
+{% endblock %}
+
+{% block aside %}
+    {% if page.date -%}
+    <span id="page-publish-date">Published: <time>{{ page.date }}</time>{% if page.updated %}, Updated: <time>{{ page.updated }}</time>{% endif %}</span>
+    {%- endif %}
+    {% if page.extra.author %}
+    <span id="page-author">By: {{ page.extra.author }}</span>
+    {% endif %}
+    <span id="page-read-time">Read time: <time>{{ page.reading_time }}</time> minutes</span>
+    {% if page.extra.external_reading %}
+    <span id="page-external-reading">
+        External reading:
+        <ul>
+        {% for extlink in page.extra.external_reading %}
+            <li><a href="{{ extlink.url }}">{{ extlink.text }}</a></li>    
+        {% endfor %}
+        </ul>
+    </span>
+    {% endif %}
+{% endblock %}
+
+{% block footer %}
+<span>
+    &copy; {{ now() | date(format='%Y') }}
+    {% if page.extra.author %}
+    {{ page.extra.author }}
+    {% elif config.extra.author %}
+    {{ config.extra.author }}
+    {% endif %}
+</span>
+{% endblock %}

templates/section.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+
+{% block content %}
+{% for page in section.pages | reverse %}
+<h1><a href="{{ page.permalink }}" class="stealth">{{ page.title }}</a></h1>
+{% if page.date %}
+<span>{{ page.date | date(format="%Y-%m-%d") }}</span>
+{% endif %}
+{% if page.summary %}
+<p>{{ page.summary | safe }}</p>
+{% endif %}
+{% if not loop.last %}<hr>{% endif %}
+{% endfor %}
+{% endblock %}
+
+{% block footer %}
+<span>
+    &copy; {{ now() | date(format='%Y') }}
+    {% if section.extra.author %}
+    {{ section.extra.author }}
+    {% elif config.extra.author %}
+    {{ config.extra.author }}
+    {% endif %}
+</span>
+{% endblock %}
+
+{% block aside %}
+{% for k, thing in section %}
+{{ k }}: {{ thing }}<br>
+{% endfor %}
+{% endblock %}

templates/shortcodes/img.html

@@ -0,0 +1,24 @@
+{# {{ img(url="", alt="", caption="", resize=false, allow_tall=false) }} #}
+
+{% set article_width = 960 %}
+
+{% if resize %}
+    {% set effective_image = resize_image(path=url, width=article_width, op="fit_width") %}
+{% else %}
+    {% set effective_image = get_image_metadata(path=url) %}
+{% endif %}
+
+{% set crop_height = config.extra.image_vertical_crop_height | default(value=768) %}
+
+{% set cropped = effective_image.height > crop_height and not allow_tall %}
+
+<figure>
+    <img src="{% if resize %}{{ effective_image.url }}{% else %}{{ url }}{% endif %}" alt="{{ alt }}"
+        {%- if cropped %}height="{{ crop_height }}" width="{{article_width}}"{% endif %}>
+    {% if caption or resize or cropped %}
+    <div>
+        {% if caption %}<figcaption>{{ caption | safe }}</figcaption>{% endif %}
+        {% if resize or cropped %}<a href="{{ url }}" target="_blank">↗️ full size</a>{% endif %}
+    </div>
+    {% endif %}
+</figure>

theme.toml

@@ -0,0 +1,21 @@
+name = "xscratch"
+description = "blog theme that tries to get out of the way as much as possible"
+license = "CNPLv7+"
+homepage = "https://git.xenua.me/xenua/xscratch"
+# The minimum version of Zola required
+min_version = "0.4.0"
+# An optional live demo URL
+demo = ""
+
+# Any variable there can be overridden in the end user `config.toml`
+# You don't need to prefix variables by the theme name but as this will
+# be merged with user data, some kind of prefix or nesting is preferable
+# Use snake_casing to be consistent with the rest of Zola
+[extra]
+
+default_dark = false
+
+# The theme author info: you!
+[author]
+name = "xenua"
+homepage = "https://xenua.me"