Add darkmode

Prettier titles

static/sass/styles/art-block.sass

@@ -13,7 +13,6 @@
             width: 100%
             height: 100%
             position: relative
-            background: $light
             border-radius: $radius
 
         img

static/sass/styles/back-button.sass

@@ -0,0 +1,39 @@
+.back
+    padding: 0
+    width: 3rem
+    height: 3rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    position: fixed
+    right: 1.3rem
+    bottom: 1.3rem
+
+    outline: 0.5rem solid $light
+    border: 0 solid transparent
+    border-radius: 50%
+    background: $dark
+
+    transition: transform 0.2s ease-in-out
+    cursor: pointer
+    z-index: 10
+
+    svg
+        display: block
+        width: 1.4rem
+        height: 1.4rem
+        color: $light
+
+    &:hover, &:focus-visible
+        text-decoration: none
+        transform: translateY(-0.2rem)
+
+@media (prefers-color-scheme: dark)
+    .back
+        outline-color: $dark
+        background: $light
+
+        svg
+            color: $dark

static/sass/styles/button-array.sass

@@ -3,6 +3,10 @@
     flex-wrap: wrap
     justify-content: start
 
+    font-size: 0.9rem
+    font-family: $font-mono
+    text-decoration: none
+
     p
         margin: 0 0.2rem 0 0
         padding: 0 0.5rem
@@ -11,9 +15,7 @@
 
         display: flex
         align-items: center
-
-        font-size: 0.9rem
-        font-family: $font-mono
+        font-family: inherit
 
         background: $dark
         color: $light
@@ -30,24 +32,31 @@
         justify-content: center
         align-items: center
 
-        font-size: 0.9rem
-        font-family: $font-mono
-        text-decoration: none
+        font-family: inherit
 
         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
+        // 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
+            background-color: transparent
+            color: $dark
+            outline: 0 solid transparent
+
+@media (prefers-color-scheme: dark)
+    .button-array
+        p
+            background: $light
+            color: $dark
+
+        button, a
+            &:hover, &:focus-visible
+                color: $light

static/sass/styles/footer.sass

@@ -6,23 +6,17 @@ footer
     flex-direction: column
     justify-content: center
     align-items: center
+    text-align: center
+    font-size: 0.9rem
 
-    background-color: $light
-    color: $dark
-
-    p
+    p, a
         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
+        &:hover, &:focus-visible
             text-decoration: underline
+            outline: 0 solid transparent

static/sass/styles/markdown.sass

@@ -45,3 +45,15 @@
         padding: 0 0.6rem
         font-style: italic
         border-left: 0.2rem solid $accent
+@media (prefers-color-scheme: dark)
+    .markdown
+        code
+            background-color: $light
+            color: $dark
+
+        pre
+            border: 1px solid $light
+
+            > code
+                background-color: $dark
+                color: $light

static/sass/styles/navigation.sass

@@ -15,7 +15,6 @@ nav
 
     border-radius: 0
     background-color: $dark
-    color: $light
 
     opacity: 0
     transform: translateY(-1rem)
@@ -80,13 +79,13 @@ nav
     width: 3rem
     height: 3rem
 
+    outline: 0.5rem solid $light
     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
+    transition: transform 0.2s ease-in-out, outline-color 0.2s ease-in-out
     cursor: pointer
     z-index: 9999
 
@@ -95,7 +94,19 @@ nav
         width: 1.4rem
         height: 1.4rem
         color: inherit
+        transition: transform 0.2s ease-in-out
 
     &.open
+        outline-color: $dark
         background: $light
         color: $dark
+
+    &:hover, &:focus-visible
+        text-decoration: none
+        transform: translateY(-0.2rem)
+
+@media (prefers-color-scheme: dark)
+    .nav-toggle
+        outline-color: $dark
+        background-color: $light
+        color: $dark

static/sass/styles/table.sass

@@ -33,3 +33,18 @@
     .table table
         th, td
             padding: 0.25rem
+
+@media (prefers-color-scheme: dark)
+    .table
+        border: 1px solid $light
+
+        table
+            tr
+                border-bottom: 1px solid $light
+
+            th, td
+                border-right: 1px solid $light
+
+            th
+                background: $light
+                color: $dark