feat: appunti and guide prototype page styling

src/styles/typography.scss

@@ -1,29 +1,41 @@
-.text-content {
-    $base-font-size: 22px;
+
+@function pow($number, $exponent) {
+    $value: 1;
+
+    @if $exponent > 0 {
+        @for $i from 1 through $exponent {
+            $value: $value * $number;
+        }
+    }
+
+    @return $value;
+}
+
+@mixin geometric-headings {
+    $base-font-size: 16px;
     $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 {
+        $factor: pow($heading-scale, 5 - $i);
+        
         h#{$i} {
-            $factor: pow($heading-scale, 5 - $i);
             font-size: $base-font-size * $factor;
+            font-family: 'Source Sans Pro', monospace;
+            font-weight: 400;
+            margin-bottom: 0.25rem;
+        }
+
+        p + h#{$i} {
+            margin-top: 0.5rem * $factor;
         }
     }
+}
 
+@include geometric-headings;
+
+.text-content {
     & > * {
-        max-width: 100ch;
-        margin: 0 auto;
+        max-width: 46rem;
     }
 
     pre,
@@ -32,6 +44,12 @@
 
         font-family: 'Source Code Pro', monospace;
         font-weight: 400;
+        font-size: 16px;
+    }
+
+    code {
+        border-radius: 0.25rem;
+        padding: 0.125rem;
     }
 
     pre {
@@ -39,15 +57,38 @@
 
         padding: 0.5rem;
 
-        max-width: 90ch;
+        width: 100%;
+        max-width: 80ch;
+
+        line-height: 1.5;
 
         border-radius: 0.5rem;
 
         box-shadow: 0.25rem 0.25rem 0 0 #777;
+
+        code {
+            padding: 0;
+        }
     }
 
-    code {
-        border-radius: 0.25rem;
-        padding: 0 0.125rem;
+
+    p {
+        line-height: 1.65;
+        margin: 0.5rem auto;
     }
-}
+
+    @include geometric-headings;
+
+    h1 {
+        margin-bottom: 2rem;
+        text-align: center;
+    }
+
+    padding: 2rem 0 3rem;
+
+    @media screen and (max-width: 1024px) {
+        & > * {
+            margin: 0 0.75rem;
+        }
+    }
+}