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

AGENTS.md

@@ -0,0 +1 @@
+go fuck yourself

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>

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>

src/routes/+page.svelte

@@ -171,4 +171,18 @@
             transform: translateX( -100% );
         }
     }
+
+    @media screen and (max-width: 800px) {
+        .container {
+            flex-direction: column-reverse;
+        }
+        
+        .subcontainer {
+            max-width: 100%;
+        }
+
+        .subcontainer:last-child {
+            margin-left: 0px;
+        }
+    }
 </style>

src/routes/projects/projectn5/devlog/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
-    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import Content from "$lib/content.svelte";
     import type { DevlogPost } from "./devlog-posts";
     import { posts } from "./devlog-posts";
     import { onMount } from 'svelte';
@@ -51,30 +51,17 @@
     wide
 />
 
-<ContentSidebar>
+<Content>
+    <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
 
-    <div slot="side-left" class="live-devlog-panel">
-        <h2>*New* Small Updates!</h2>
-        <p>Here I'll post some smaller text only updates about the game's progress!</p>
-        <div class="live-devlog-container">
-            {#each entries as entry}
-                {@render liveUpdate({entry})}
-            {/each}
-        </div>
+    <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
+
+    <div class="post-container">
+        {#each posts as post, index}
+        {@render devlogPost({post, index})}
+        {/each}
     </div>
-
-    <div slot="main">
-        <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
-
-        <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>
-
-        <div class="post-container">
-            {#each posts as post, index}
-            {@render devlogPost({post, index})}
-            {/each}
-        </div>
-    </div>
-</ContentSidebar>
+</Content>
 
 {#snippet liveUpdate({entry}: {entry: DevlogLiveEntry})}
 <div class="live-devlog-entry notched-small">
@@ -88,10 +75,14 @@
     <a href="/projects/projectn5/devlog/{post.date}/" class="post">
         <div class="post-img-container">
             <img class="post-img" src="/projects/projectn5/devlog/previews/{post.date}.webp" alt="Preview image for devlog {post.title}">
-            <p class="post-number">#{posts.length - index}</p>
+            <!-- <p class="post-number">#{posts.length - index}</p> -->
         </div>
         <div class="post-text-container">
-            <p class="post-date">{post.subtitle}</p>
+            {#if post.subtitle}
+                <p class="post-date">#{posts.length - index} // {post.subtitle}</p>
+            {:else}
+                <p class="post-date">#{posts.length - index} ~</p>
+            {/if}
             <p class="post-title">{post.title}</p>
         </div>
     </a>
@@ -189,7 +180,7 @@
         position: relative;
         height: fit-content;
         width: fit-content;
-        background-color: var(--color-background-highlight-hover);
+        /* background-color: var(--color-background-highlight-hover); */
         
         transition: background-color 0.16s ease-in-out;
         clip-path: polygon(
@@ -267,4 +258,25 @@
             width: 100% !important;
         }
     }
+
+    @media screen and (max-width: 800px) {
+        .post {
+            --notch-size-devlog: 24px;
+            --notch-size-devlog-img: 18px;
+        }
+        .post-img {
+            width: 100px;
+            height: 70px;
+        }
+
+        .post-date {
+            font-size: 0.8rem;
+            line-height: 0.9rem;
+        }
+        
+        .post-title {
+            font-size: 1.0rem;
+            line-height: 1.1rem;
+        }
+    }
 </style>