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

src/lib/banner-title-alt.svelte

@@ -159,4 +159,30 @@
         font-size: 1.3rem;
         margin-top: 0;
     }
+
+    @media screen and (max-width: 800px) {
+        .subcontainer {
+            height: fit-content;
+            flex-direction: column;
+        }
+        .text-container-wide {
+            bottom: 0;
+            left: 0;
+            top: initial;
+            width: 100%;
+        }
+        .text-container {
+            width: initial;
+        }
+        .img-container {
+            width: 100%;
+        }
+        .img-container img {
+            height: 200px;
+        }
+        .subtitle {
+            font-size: 1.0rem;
+            line-height: 1.1rem;
+        }
+    }
 </style>

src/lib/banner-title.svelte

@@ -27,17 +27,18 @@
 <style>
     .container {
         position: relative;
-        width: 100%;
-        height: 500px;
     }
 
     .container img {
         position: absolute;
         left: 0;
         top: 0;
+        object-fit: cover;
+    }
+
+    .container, .container img {
         height: 500px;
         width: 100%;
-        object-fit: cover;
     }
 
     .title {
@@ -61,4 +62,20 @@
         font-size: 2.2rem;
         line-height: 2.5rem;
     }
+    
+    @media screen and (max-width: 800px) {
+        .container, .container img {
+            height: 300px;
+        }
+        
+        .title {
+            font-size: 1.6rem;
+            line-height: 1.8rem;
+        }
+        
+        .subtitle {
+            font-size: 1.2rem;
+            line-height: 1.4rem;
+        }
+    }
 </style>

src/lib/content-sidebar.svelte

@@ -10,7 +10,7 @@
 <style>
     .content {
         max-width: 2000px;
-        margin: 0 auto 228px;
+        margin: 0 auto;
         display: flex;
         flex-direction: row;
         padding: 0 24px;
@@ -18,4 +18,16 @@
     .side {
         min-width: 400px;
     }
+
+    @media screen and (max-width: 800px) {
+        .content {
+            padding: 0 8px;
+            flex-direction: column;
+        }
+
+        .side {
+            min-width: 0;
+            width: 100%;
+        }
+    }
 </style>

src/lib/content.svelte

@@ -4,8 +4,15 @@
 
 <style>
     .content {
+        width: 100%;
         max-width: var(--page-width);
-        margin: 0 auto 228px;
+        margin: 0 auto;
         padding: 0 24px;
     }
+
+    @media screen and (max-width: 800px) {
+        .content {
+            padding: 0 8px;
+        }
+    }
 </style>

src/lib/footer.svelte

@@ -46,10 +46,7 @@
 <style>
     footer {
         background-color: var(--color-background-highlight);
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        /* height: 120px; */
+        margin-top: 40px;
         width: 100%;
         backdrop-filter: blur(6px);
     }
@@ -100,4 +97,19 @@
     .center-box {
         margin: auto 0;
     }
+
+    @media screen and (max-width: 800px) {
+        .content-container {
+            flex-direction: column;
+            gap: 0;
+        }
+
+        .content-box {
+            margin: 8px 0;
+        }
+
+        .center-box {
+            margin: 16px 0 8px;
+        }
+    }
 </style>