adjusted bottom margin of footer; images on projects page now shrink on mobile

src/lib/lists/gallery.svelte

@@ -28,11 +28,11 @@
         <img class="gallery-img" src="{entry.img}" alt="{entry.imgAlt}">
         <div class="gallery-text-container">
             {#if reverseTextOrder}
-                <p class="gallery-date">{@html entry.subtitle}</p>
+                <p class="gallery-subtitle">{@html entry.subtitle}</p>
                 <p class="gallery-title">{entry.title}</p>
             {:else}
                 <p class="gallery-title">{entry.title}</p>
-                <p class="gallery-date">{@html entry.subtitle}</p>
+                <p class="gallery-subtitle">{@html entry.subtitle}</p>
             {/if}
         </div>
     </a>
@@ -62,6 +62,7 @@
 
     .gallery-img {
         width: 145px;
+        min-width: 145px;
         height: 100%;
         margin: 0;
         object-fit: cover;
@@ -83,20 +84,20 @@
         transition: border-color 0.1s ease-out;
     }
 
-    .gallery-date, .gallery-title {
+    .gallery-title, .gallery-subtitle {
         margin: 0;
         transition: color 0.1s ease-out;
     }
 
-    .gallery-date {
-        font-size: 1.0rem;
-    }
-
     .gallery-title {
         font-family: var(--font-mono);
         font-weight: 700;
     }
 
+    .gallery-subtitle {
+        font-size: 1.0rem;
+    }
+
     .gallery-container:hover .gallery-text-container {
         border-color: var(--color-highlight);
     }
@@ -106,4 +107,21 @@
     .gallery-container:hover p {
         color: var(--color-highlight);
     }
+
+    @media screen and (max-width: 700px) {
+        .gallery-title {
+            font-size: 1.0rem;
+            line-height: 1.1rem;
+        }
+        .gallery-subtitle {
+            font-size: 0.9rem;
+            line-height: 1.1rem;
+        }
+    }
+
+    @media screen and (max-width: 500px) {
+        .gallery-subtitle {
+            display: none;
+        }
+    }
 </style>

src/lib/table-of-contents.svelte

@@ -134,5 +134,11 @@
         .toc-level-1::before, .toc-level-2::before, .toc-level-3::before {
             content: "└ ";
         }
+
+        @media screen and (max-width: 550px) {
+            .toc-container {
+                width: 95%;
+            }
+        }
     }
 </style>

src/lib/viewport/footer.svelte

@@ -90,6 +90,7 @@
         gap: 16px;
         justify-content: space-evenly;
         align-items: flex-start;
+        padding-bottom: 16px;
     }
 
     .content-box {

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
-    import Header from "$lib/header.svelte";
+    import Header from "$lib/viewport/header.svelte";
-    import Footer from "$lib/footer.svelte";
+    import Footer from "$lib/viewport/footer.svelte";
 
 	let { children } = $props();
 </script>

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     import GamedevWebring from "$lib/webrings/gamedev.svelte";
     import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";
-    import LinkList from "$lib/link-list.svelte";
+    import LinkList from "$lib/lists/link-list.svelte";
     import { quotes, type Quote } from "./quotes";
 
     import { posts } from "./projects/projectn5/devlog/posts";

src/routes/about/+page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
-    import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
+    import LinkList, { type LinkEntry } from "$lib/lists/link-list.svelte";
 
     let favouriteAlbums: LinkEntry[] = [
         {

src/routes/blog/[year]/[date]/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 
 	export let data;

src/routes/feeds/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
-    import List, { type ListEntry } from "$lib/link-list.svelte";
+    import List, { type LinkEntry } from "$lib/lists/link-list.svelte";
 
-	let feeds: ListEntry[] = [
+	let feeds: LinkEntry[] = [
 		{
 			text: "Project N5 devlog",
 			link: "/projects/projectn5/devlog/feed.xml",

src/routes/privacy/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
 </script>
 
 <svelte:head>

src/routes/projects/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
-    import type { Project } from './projects';
+    import { type Project, projects } from './projects';
-    import { projects } from './projects';
+    import LinkList from "$lib/lists/link-list.svelte";
-    import LinkList from "$lib/link-list.svelte";
+    import Content from "$lib/viewport/content.svelte";
-    import Content from "$lib/content.svelte";
 </script>
 
 <svelte:head>
@@ -86,15 +85,14 @@
     .project-banner-container {
         position: relative;
         width: fit-content;
-        height: 300px;
         margin-left: auto;
         margin-right: auto;
-        display: flex;
     }
     
     .project-banner {
         margin: 0; /* reset left/right margins */
         width: 100%;
+        max-height: 300px;
     }
 
     .project-icon {

src/routes/projects/daisyfm/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 </script>
 

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     // import type { DevlogPost } from "./devlog-posts";
     import { posts, type DevlogPost } from "./posts";
     import Gallery, { type GalleryEntry } from "$lib/lists/gallery.svelte";

src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 
 	export let data;

src/routes/uses/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Banner2 from "$lib/banner2.svelte";
-    import Content from "$lib/content.svelte";
+    import Content from "$lib/viewport/content.svelte";
 </script>
 
 <svelte:head>

src/routes/what-is-this/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import Content from "$lib/viewport/content.svelte";
+    import Banner2 from "$lib/banner2.svelte";
+</script>
+
+<svelte:head>
+    <title>what is this space? | denizk0461</title> 
+</svelte:head>
+
+<Content>
+    <Banner2
+        title="what is this space?" />
+
+    <p>Inspired by <a href="https://blog.avas.space/what-is-this/">this</a></p>
+
+</Content>