add: some styles and more organization

src/styles/main.scss

@@ -1,3 +1,5 @@
+@import './typography.scss';
+
 *,
 *::before,
 *::after {
@@ -17,10 +19,10 @@ body {
     color: #222;
 }
 
-html {
-    scroll-snap-type: y proximity;
-    scroll-padding-top: 4rem;
-}
+// html {
+//    scroll-snap-type: y proximity;
+//    scroll-padding-top: 4rem;
+// }
 
 img {
     display: block;
@@ -100,6 +102,7 @@ header {
     border-bottom: 4px solid #222;
     background: #fff;
 
+    top: 0;
     position: fixed;
     width: 100%;
 
@@ -142,7 +145,11 @@ footer {
     font-size: 20px;
 }
 
-.page-homepage {
+//
+// Custom Page Styles
+//
+
+.homepage {
     header .logo {
         visibility: hidden;
     }
@@ -231,8 +238,8 @@ footer {
 
             img {
                 width: 100%;
-                filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222)
-                    drop-shadow(0 -4px 0 #222);
+                filter: drop-shadow(6px 6px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222)
+                    drop-shadow(-4px 0 0 #222) drop-shadow(0 -4px 0 #222);
             }
         }
 
@@ -359,9 +366,9 @@ footer {
                 background: #f8e8b1;
                 color: #000d;
 
-                &:hover {
-                    // background: #8e5ddd;
-                }
+                // &:hover {
+                //     // background: #8e5ddd;
+                // }
             }
         }
     }
@@ -383,7 +390,7 @@ footer {
             .project {
                 // background: #fcddff;
                 // background: #ffa89c;
-                background: #a2d4f3;
+                background: var(--card-bg, #a2d4f3);
                 color: #000e;
 
                 border: 3px solid #222;

src/styles/typography.scss

@@ -0,0 +1,53 @@
+.text-content {
+    $base-font-size: 22px;
+    $heading-scale: 1.33;
+
+    @function pow($number, $exponent) {
+        $value: 1;
+
+        @if $exponent > 0 {
+            @for $i from 1 through $exponent {
+                $value: $value * $number;
+            }
+        }
+
+        @return $value;
+    }
+
+    @for $i from 1 through 5 {
+        h#{$i} {
+            $factor: pow($heading-scale, 5 - $i);
+            font-size: $base-font-size * $factor;
+        }
+    }
+
+    & > * {
+        max-width: 100ch;
+        margin: 0 auto;
+    }
+
+    pre,
+    code {
+        background: #f0f0f0 !important;
+
+        font-family: 'Source Code Pro', monospace;
+        font-weight: 400;
+    }
+
+    pre {
+        margin: 1rem auto;
+
+        padding: 0.5rem;
+
+        max-width: 90ch;
+
+        border-radius: 0.5rem;
+
+        box-shadow: 0.25rem 0.25rem 0 0 #777;
+    }
+
+    code {
+        border-radius: 0.25rem;
+        padding: 0 0.125rem;
+    }
+}