Use fluid scale custom properties and make everything mobile friendly

web-app/src/routes/+layout.svelte

@@ -3,7 +3,6 @@
   import { page } from "$app/stores";
   import type { LayoutServerData } from "./$types";
   import type { Snippet } from "svelte";
-  import { dev } from "$app/environment";
 
   const { data, children } = $props<{ data: LayoutServerData; children: Snippet }>();
 
@@ -17,13 +16,23 @@
 
 <nav>
   <strong>archtika</strong>
-  {#if data.user}
-    <a href="/">Dashboard</a>
-    <a href="/account">Account</a>
-  {:else}
-    <a href="/register">Register</a>
-    <a href="/login">Login</a>
-  {/if}
+  <ul class="link-wrapper">
+    {#if data.user}
+      <li>
+        <a href="/">Dashboard</a>
+      </li>
+      <li>
+        <a href="/account">Account</a>
+      </li>
+    {:else}
+      <li>
+        <a href="/register">Register</a>
+      </li>
+      <li>
+        <a href="/login">Login</a>
+      </li>
+    {/if}
+  </ul>
 </nav>
 
 {#if !isProjectRoute}
@@ -38,7 +47,9 @@
 
 <footer>
   <p>
-    <small>archtika is a free, open, modern, performant and lightweight CMS</small>
+    <small
+      >&copy; {new Date().getFullYear()} &mdash; <a href="https://archtika.com">archtika</a></small
+    >
   </p>
 </footer>
 
@@ -47,20 +58,24 @@
   header,
   main,
   footer {
-    padding-block: 1rem;
-    inline-size: min(100% - 2rem, 1024px);
+    padding-block: var(--space-s);
+    inline-size: min(100% - var(--space-m), 1024px);
     margin-inline: auto;
   }
 
   nav {
     display: flex;
     align-items: center;
-    gap: 1rem;
-    overflow-x: auto;
+    column-gap: var(--space-m);
+    row-gap: var(--space-3xs);
+    flex-wrap: wrap;
+    justify-content: space-between;
   }
 
-  nav > *:first-child {
-    margin-inline-end: auto;
+  nav > .link-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-s);
   }
 
   footer {
@@ -69,11 +84,17 @@
   }
 
   .editor {
-    inline-size: min(100% - 2rem, 1536px);
-    block-size: calc(100vh - 7rem);
-    border-block-start: var(--border-primary);
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    block-size: calc(100vh - (4 * var(--space-s) + 2 * 1.5rem));
+    inline-size: min(100% - var(--space-m), 1536px);
+    border-block-start: var(--border-primary);
     padding-block: 0;
+    position: relative;
+  }
+
+  @media (min-width: 640px) {
+    .editor {
+      grid-template-columns: 1fr 1fr;
+    }
   }
 </style>