:3

static/js/navigation.js

@@ -0,0 +1,30 @@
+let navRotate = 0;
+let increment = 45;
+
+function toggleNav() {
+    let nav = document.querySelector('nav');
+    let button = document.querySelector('.nav-toggle');
+
+    navRotate += increment;
+    button.style.transform = `rotate(${navRotate}deg)`;
+
+    if (nav.classList.contains('open')) {
+        document.querySelector('body').style.overflow = 'auto';
+
+        nav.classList.remove('open');
+        setTimeout(() => {
+            nav.style.display = 'none';
+        }, 100);
+
+        button.classList.remove('open');
+    } else {
+        document.querySelector('body').style.overflow = 'hidden';
+
+        nav.style.display = 'flex';
+        setTimeout(() => {
+            nav.classList.add('open');
+        }, 3);
+
+        button.classList.add('open');
+    }
+}

static/js/scroll.js

@@ -0,0 +1,11 @@
+const scroll = document.querySelector('.scroll');
+
+function setScroll() {
+    let scrollPercentage = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
+    scroll.style.width = scrollPercentage + '%';
+}
+
+if (scroll) {
+    setScroll();
+    window.onscroll = () => { setScroll(); };
+}

static/sass/styles.sass

@@ -0,0 +1,225 @@
+$dark: #261f1b
+$light: #f0e7e4
+$accent: #f2672c
+
+$radius: 2px
+
+$font: 'DM Serif Display', serif
+$font-mono: 'IBM Plex Mono', monospace
+
+@import "styles/navigation"
+@import "styles/footer"
+@import "styles/markdown"
+@import "styles/table"
+@import "styles/art-block"
+@import "styles/button-array"
+
+*
+    font-family: $font
+    box-sizing: border-box
+
+    -ms-overflow-style: none // for Internet Explorer, Edge
+    scrollbar-width: none // for Firefox
+
+    &::-webkit-scrollbar
+        display: none // for Chrome, Safari, and Opera
+
+html
+    font-size: 1rem
+    background-color: $light
+
+body
+    margin: 0
+    padding: 0
+    min-height: 100vh
+    display: flex
+    flex-direction: column
+    color: $dark
+
+.back
+    padding: 0
+    width: 3rem
+    height: 3rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    position: fixed
+    right: 1.3rem
+    bottom: 1.3rem
+
+    border: 0 solid transparent
+    border-radius: 50%
+    background: $dark
+    box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
+
+    cursor: pointer
+    z-index: 10
+
+    svg
+        display: block
+        width: 1.4rem
+        height: 1.4rem
+        color: $light
+
+    &:hover
+        text-decoration: none
+
+.scroll
+    width: 0
+    height: 0.3rem
+
+    position: fixed
+    bottom: 0
+    left: 0
+
+    background: $accent
+    z-index: 4
+
+header
+    width: 100%
+    height: 20rem
+
+    position: relative
+
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+    background-color: $dark
+    color: $light
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.2)
+    z-index: 2
+    overflow: hidden
+
+    img
+        width: 100%
+        height: 100%
+        position: absolute
+        inset: 0
+        object-fit: cover
+
+    h1
+        margin: 0 0 0.5rem 0
+        padding: 0 1rem
+        position: relative
+        font-size: 4rem
+        text-align: center
+        background: inherit
+        color: inherit
+        border-radius: $radius
+        z-index: +1
+
+    p
+        margin: 0
+        padding: 0.3rem 1rem
+        position: relative
+        text-align: center
+        background: inherit
+        color: inherit
+        border-radius: $radius
+        z-index: +1
+
+@media (max-width: 900px)
+    header
+        height: 13rem
+
+        h1
+            font-size: 3rem
+
+main
+    margin: 0 auto
+    padding: 1rem 1rem 0 1rem
+
+    font-size: 1.1rem
+
+    flex-grow: 1
+
+    width: 100%
+    max-width: 900px
+    height: 100%
+
+    img
+        max-width: 100%
+        object-fit: cover
+        border-radius: $radius
+
+    h1
+        margin: 0 0 0.5rem 0
+        font-size: 2.5rem
+        color: $accent
+
+    a
+        color: $accent
+        text-decoration: none
+        &:hover
+            text-decoration: underline
+
+.article
+    margin: 0 0 0.5rem 0
+    display: flex
+    justify-content: space-between
+    align-items: baseline
+
+    position: relative
+
+    text-decoration: none
+    background: $light
+    color: $dark
+
+    h2
+        margin: 0 0.5rem 0.2rem 0
+        padding-right: 0.75rem
+
+        font-size: 1.69rem
+        white-space: nowrap
+        text-overflow: ellipsis
+
+        background: inherit
+        color: inherit
+
+        overflow: hidden
+        transition: color 0.1s ease-in-out
+        z-index: +1
+
+    p
+        margin: 0
+        padding-left: 0.75rem
+
+        font-size: 1rem
+        white-space: nowrap
+
+        background: inherit
+        color: inherit
+
+        transition: color 0.1s ease-in-out
+        z-index: +1
+
+    &::after
+        content: ""
+        width: 100%
+
+        display: block
+        position: absolute
+        top: 50%
+        left: 0
+
+        border-top: 1px $dark dotted
+
+        opacity: 0.5
+        transition: background 0.1s ease-in-out
+
+    &:hover
+        color: $accent
+        text-decoration: none
+
+@media (max-width: 600px)
+    .article
+        h2
+            font-size: 1.4rem
+@media (max-width: 400px)
+    .article
+        h2
+            font-size: 1.1rem

static/sass/styles/art-block.sass

@@ -0,0 +1,34 @@
+.art-block
+    height: auto
+    display: grid
+    grid-template-columns: repeat(3, 1fr)
+    gap: 0.5rem
+
+    .art
+        display: flex
+        flex-direction: column
+
+        span
+            margin-bottom: 0.2rem
+            width: 100%
+            height: 100%
+            position: relative
+            background: $light
+            border-radius: $radius
+
+        img
+            max-width: 100%
+            max-height: 100%
+            position: absolute
+            top: 50%
+            left: 50%
+            transform: translate(-50%, -50%)
+
+@media (max-width: 621px)
+    .art-block
+        grid-template-columns: 1fr 1fr
+        grid-template-rows: 1fr 1fr
+@media (max-width: 420px)
+    .art-block
+        grid-template-columns: 1fr
+        grid-template-rows: 1fr

static/sass/styles/button-array.sass

@@ -0,0 +1,53 @@
+.button-array
+    display: flex
+    flex-wrap: wrap
+    justify-content: start
+
+    p
+        margin: 0 0.2rem 0 0
+        padding: 0 0.5rem
+
+        height: 2rem
+
+        display: flex
+        align-items: center
+
+        font-size: 0.9rem
+        font-family: $font-mono
+
+        background: $dark
+        color: $light
+        border-radius: $radius
+
+    button, a
+        margin: 0 0.2rem 0.2rem 0
+        padding: 0
+
+        width: 2rem
+        height: 2rem
+
+        display: flex
+        justify-content: center
+        align-items: center
+
+        font-size: 0.9rem
+        font-family: $font-mono
+        text-decoration: none
+
+        background-color: $accent
+        color: $dark
+        border: 0 solid transparent
+        border-radius: $radius
+
+        transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
+
+        svg
+            width: 1.1rem
+            height: 1.1rem
+            color: inherit
+
+        &:hover, &:focus-visible
+            text-decoration: none
+            background-color: $dark
+            color: $light
+            outline: none

static/sass/styles/footer.sass

@@ -0,0 +1,28 @@
+footer
+    width: 100%
+    height: 5.6rem
+
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+    background-color: $light
+    color: $dark
+
+    p
+        margin: 0
+        font-size: 0.9rem
+        text-align: center
+        color: inherit
+
+    a
+        margin: 0
+        font-size: 0.9rem
+
+        text-decoration: none
+        color: $accent
+        cursor: pointer
+
+        &:hover
+            text-decoration: underline

static/sass/styles/markdown.sass

@@ -0,0 +1,47 @@
+.markdown
+    a
+        text-decoration: none
+        color: $accent
+        transition: all 0.1s ease-in-out
+
+        &:hover
+            text-decoration: underline
+
+    hr
+        margin: 1rem 0
+        border: 0
+        border-top: 1px solid $dark
+
+    code
+        padding: 0.2rem
+
+        font-family: $font-mono
+        font-size: 0.8rem
+
+        background-color: $dark
+        color: $light
+        border-radius: $radius
+
+        overflow-x: auto
+
+    pre
+        margin: 0
+        padding: 0.6rem
+
+        white-space: pre-wrap
+        word-wrap: break-word
+        font-family: $font-mono
+
+        background-color: $dark
+        border-radius: $radius
+
+        overflow-x: scroll
+
+        > code
+            padding: 0
+
+    blockquote
+        margin: 1rem 0 1rem 1.5rem
+        padding: 0 0.6rem
+        font-style: italic
+        border-left: 0.2rem solid $accent

static/sass/styles/navigation.sass

@@ -0,0 +1,101 @@
+nav
+    padding-bottom: 1rem
+
+    position: fixed
+    right: 0
+    left: 0
+
+    width: 100%
+    height: calc(100vh + 1rem)
+
+    display: none
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+    border-radius: 0
+    background-color: $dark
+    color: $light
+
+    opacity: 0
+    transform: translateY(-1rem)
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+    z-index: 9998
+
+    a
+        margin: 0 0 1rem 0
+        padding: 0.3rem 1rem
+
+        position: relative
+
+        text-decoration: none
+        font-weight: bold
+        font-size: 1.5rem
+
+        color: $light
+
+        transition: color 0.1s ease-in-out
+
+        &::before
+            content: ""
+            display: block
+
+            position: absolute
+            bottom: 0
+            left: 0
+
+            width: 100%
+            height: 0
+
+            background-color: $accent
+            border-radius: $radius
+
+            z-index: -1
+            transition: height 0.1s ease-in-out
+
+        &:hover, &:focus-visible
+            color: $dark
+            border: 0 solid transparent
+            outline: 0 solid transparent
+
+            &::before
+                height: 100%
+
+    &.open
+        opacity: 1
+        transform: translateY(0)
+
+.nav-toggle
+    margin: 0
+    padding: 0
+
+    position: fixed
+    left: 1.3rem
+    bottom: 1.3rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    width: 3rem
+    height: 3rem
+
+    border: 0 solid transparent
+    border-radius: 50%
+    background: $dark
+    color: $light
+    box-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.4)
+
+    transition: all 0.2s ease-in-out
+    cursor: pointer
+    z-index: 9999
+
+    svg
+        display: block
+        width: 1.4rem
+        height: 1.4rem
+        color: inherit
+
+    &.open
+        background: $light
+        color: $dark

static/sass/styles/table.sass

@@ -0,0 +1,35 @@
+.table
+    width: 100%
+    border-radius: $radius
+    overflow: hidden
+    border: 1px solid $dark
+
+    table
+        border: none
+        border-collapse: collapse
+        width: 100%
+
+        tr
+            border: none
+            border-bottom: 1px solid $dark
+
+            &:last-child
+                border: none
+
+        th, td
+            padding: 0.5rem
+            text-align: left
+            vertical-align: top
+            border-right: 1px solid $dark
+
+            &:last-child
+                border: none
+
+        th
+            background: $dark
+            color: $light
+
+@media (max-width: 768px)
+    .table table
+        th, td
+            padding: 0.25rem