:3

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