update style

sass/style.sass

@@ -1,16 +1,20 @@
-@import reasonable-colors
+@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")
+@font-face 
+    font-family: "CMU Typewriter Text Roman"
+    src: local("CMU Typewriter Text Roman"), url("cmuntt-webfont.woff") format("woff")
 
-@import url("iosevka.css")
+@font-face
+    font-family: "CMU Serif Roman"
+    src: local("CMU Serif Roman"), url("cmunrm-webfont.woff") format("woff")
 
-@import url("iosevka-etoile.css")
+@font-face
+    font-family: "CMU Serif Bold"
+    src: url("cmunbx-webfont.woff")
 
 body
     display: grid
@@ -28,8 +32,8 @@ body
 
     background-color: #e9e9dc
 
-    font-family: "Iosevka Etoile Web", sans-serif
-    font-size: 13pt
+    font-family: "CMU Serif Bold", serif
+    font-size: 14pt
 
     div.debug
         padding-left: 2ch 
@@ -65,7 +69,7 @@ body
             max-width: 100%
             object-fit: cover
         
-        > div
+        > *:nth-child(2) // todo: clean this up maybe
             display: flex
             flex-flow: row nowrap
             justify-content: space-between
@@ -78,6 +82,20 @@ body
             a
                 white-space: nowrap
 
+        @for $i from 2 through 5 
+            > .gallery#{$i}
+                display: grid
+                grid-template-columns: repeat(#{$i}, 1fr)
+                gap: 1rem
+                width: 100%
+
+                img
+                    aspect-ratio: 1 / 1
+                    object-fit: cover
+                    height: 100%
+                    min-width: 100%
+        
+
     article
         @include padding-horiz(2rem)
         margin: 1rem 0
@@ -86,13 +104,13 @@ body
         background-color: #f9f9e8
         background-image: url("/paper53.png"), url("/paper89.png"), url("/paper59.png"), url("/paper67.png")
         background-attachment: local
-        max-width: 60rem
+        max-width: 80rem
         box-shadow: 0.2rem 0.2rem 1rem 0 rgba(0, 0, 0, 0.3)
 
-        font-family: "TT2020", serif
+        font-family: "CMU Typewriter Text Roman", serif
         font-size: 16pt
 
-        pre
+        > pre
             padding: 1rem
             font-size: 13pt
             max-height: 40rem
@@ -125,16 +143,39 @@ body
                 font-weight: bold
 
             code
-                font-family: "Iosevka Web", monospace
-                font-stretch: extended
-                font-feature-settings: "ss05" 1, "cv89" 2
-                @import code-highlight-light
+                font-family: "CMU Typewriter Text Roman", monospace
+                @import "code-highlight-light"
         
         blockquote
             border-left: 1px solid silver
             margin-left: 2rem
             padding-left: 0.5rem
 
+        .inset-box
+            background-color: rgba(0, 0, 0, 0.02)
+            box-shadow: 0 0 0.75rem 0 rgba(0, 0, 0, 0.1) inset
+            max-width: 100%
+            padding: 1rem
+            margin: 1rem 0
+
+        .note
+            display: flex
+            flex-flow: row nowrap
+            justify-content: left
+            gap: 2rem
+
+        .shark
+            padding: 0
+            display: grid
+            grid-template-columns: 5rem 1fr
+            
+            .shonk
+                width: 100%
+            
+            div
+                padding: 1rem
+                
+
     aside
         @include padding-horiz(1rem)
         padding-top: 1rem
@@ -144,6 +185,10 @@ body
         border-bottom: 2px solid rgba(0, 0, 0, 0.1)
         display: flex
         flex-flow: column nowrap
+        gap: 0.5em
+
+        ul
+            margin: 0
 
     footer
         grid-area: footer
@@ -153,6 +198,11 @@ body
         background-color: #f2f2e1
         height: 50px
 
+    .sidebyside
+        display: flex
+        flex-flow: row nowrap
+        justify-content: space-between
+
     #theme-toggle
         cursor: pointer
     
@@ -161,6 +211,33 @@ body
     body
         grid-template-areas: "sidebar" "content" "footer"
         grid-template-columns: 1fr
+        grid-template-rows: min-content 1fr auto
+
+        aside
+            break-after: always
+
+        article
+            overflow-y: visible
+            box-shadow: none
+
+            pre
+                overflow: visible
+                max-height: none
+
+        figure
+            break-inside: avoid
+        
+        #page-external-reading
+            display: none
+
+        #page-toc::marker
+            content: ""
+
+
+@media screen and (max-width: 1800px) 
+    body
+        article
+            max-width: 60rem
 
 
 @media screen and (max-width: 1400px)