Updated styles for mobile compatibility; removed live update column from devlog overview

src/routes/+layout.svelte

@@ -5,12 +5,14 @@
 	let { children } = $props();
 </script>
 
-<Header />
-
 <div class="waters"></div>
-{@render children()}
+<div class="all-content-container">
+    <Header />
 
-<Footer />
+    {@render children()}
+
+    <Footer />
+</div>
 
 <style>
     @import url('https://fonts.upset.dev/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@@ -41,6 +43,8 @@
             --font-mono: 'IBM Plex Mono', monospace;
 
             --page-width: 1200px;
+
+            --screen-width-mobile: 800px;
         }
 
         html {
@@ -58,6 +62,12 @@
             background-color: var(--color-background);
         }
 
+        .all-content-container {
+            display: flex;
+            flex-direction: column;
+            /* max-width: 100%; */
+        }
+
         .waters {
             position: fixed;
             z-index: -99;
@@ -281,5 +291,32 @@
         .pixelated-img {
             image-rendering: pixelated;
         }
+
+        @media screen and (max-width: 800px) {
+            h1 {
+                font-size: 2.3rem;
+                line-height: 2.4rem;
+            }
+
+            h2 {
+                font-size: 1.8rem;
+                line-height: 1.8rem;
+            }
+
+            h3 {
+                font-size: 1.6rem;
+                line-height: 1.6rem;
+            }
+
+            h4, h5, h6 {
+                font-size: 1.4rem;
+                line-height: 1.4rem;
+            }
+
+            p, span, li, pre, a {
+                font-size: 1.1rem;
+                line-height: 1.7rem;
+            }
+        }
     }
 </style>