even better layout

src/pages/shop/_art_test.svelte

@@ -1,4 +1,8 @@
 <div class="grid grid-cols-4 w-full h-full">
-  <div class="bg-blue-200 col-start-2">test1</div>
+  <div class="bg-blue-200 h-full col-start-2">
-  <div class="bg-violet-600 col-start-3">test2</div>
+    <div class="flex flex-col items-center w-full h-full">
+      <div class="w-10 h-10 bg-lime-200"></div>
+    </div>
+  </div>
+  <div class="bg-violet-600 h-full col-start-3">test2</div>
 </div>

src/routes/+layout.svelte

@@ -82,7 +82,7 @@
   bind:matches={isMobile}
 />
 
-<div class="flex flex-col min-h-screen bg-base-200 p-0">
+<div class="flex flex-col justify-between min-h-screen bg-base-200 p-0">
   <header class="{hideOnPrint ? 'hide-on-print' : ''} bg-base-300">
     <div class="nav-bar pr-4">
       {#if !isMobile}
@@ -155,8 +155,10 @@
     </div>
   </header>
 
-  <!-- Page content -->
+  <div class="flex-1">
-  {@render children?.()}
+    <!-- Page content -->
+    {@render children?.()}
+  </div>
 
   <Zooter bind:hideOnPrint />
 </div>
@@ -176,7 +178,7 @@
   </style>
 {/if}
 
-<style lang="scss">
+<style>
   /* Nav bar. */
   header {
     display: flex;
@@ -222,20 +224,6 @@
     gap: 10px;
   }
 
-  #logo-link {
-    width: 64px;
-    aspect-ratio: 1 / 1;
-  }
-
-  #logo-text {
-    font-size: 24px;
-    color: oklch(var(--bc));
-    font-family: var(--title-font);
-    margin: 0;
-
-    min-width: 200px;
-  }
-
   .nav-spacer {
     width: 100%;
   }
@@ -246,71 +234,8 @@
 
     font-size: 22px;
     font-family: var(--title-font);
-    // Text color
     color: oklch(var(--bc));
   }
-
-  /* Footer. */
-  footer {
-    margin-top: 50px;
-    padding: 25px 0;
-    background-color: oklch(var(--b3));
-
-    height: 100%;
-
-    display: flex;
-    justify-content: center;
-  }
-
-  .about-container {
-    width: 80%;
-    height: 100%;
-
-    color: oklch(var(--bc));
-
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-
-    & h3 {
-      font-size: larger;
-    }
-  }
-
-  .about-container > div {
-    align-items: center;
-    text-align: center;
-  }
-
-  .credits {
-    line-height: 2;
-  }
-
-  .contact {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .social {
-    display: flex;
-    align-content: center;
-    gap: 10px;
-  }
-
-  .social > img {
-    width: 24px;
-  }
-
-  footer h3 {
-    margin-top: 0px;
-    color: var(--text2);
-  }
-
-  footer a {
-    color: var(--text2);
-    text-decoration-line: underline;
-  }
-
   a:hover {
     filter: brightness(130%);
   }

src/routes/comps/Zooter.svelte

@@ -155,7 +155,7 @@
   on:resize={onResize}
 />
 
-<div class="{hideOnPrint ? 'hide-on-print' : ''} mt-auto w-full">
+<div class="{hideOnPrint ? 'hide-on-print' : ''} w-full">
   <!-- Keep scrolling thing -->
   <div class="hidden h-64 w-full flex flex-col justify-center items-center">
     <div>Keep scrolling to veiw Zhen's portfolio site!</div>
@@ -179,9 +179,7 @@
   </div>
 
   <!-- About footer -->
-  <div
+  <div class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300">
-    class="sticky bottom-0 flex flex-col justify-center pt-8 bg-base-300 mt-8"
-  >
     <div class="flex justify-center">
       <div class="grid gap-8 sm:grid-cols-3 items-center w-full">
         <div class="flex flex-col items-center">