Use fluid scale custom properties and make everything mobile friendly

web-app/src/lib/components/WebsiteEditor.svelte

@@ -17,14 +17,27 @@
   }>();
 </script>
 
+<input type="checkbox" id="toggle-mobile-preview" hidden />
+<label for="toggle-mobile-preview">Preview</label>
+
 <div class="operations">
   <h1>{title}</h1>
 
   <nav class="operations__nav">
-    <a href="/website/{id}">Settings</a>
-    <a href="/website/{id}/articles">Articles</a>
-    <a href="/website/{id}/collaborators">Collaborators</a>
-    <a href="/website/{id}/publish">Publish</a>
+    <ul>
+      <li>
+        <a href="/website/{id}">Settings</a>
+      </li>
+      <li>
+        <a href="/website/{id}/articles">Articles</a>
+      </li>
+      <li>
+        <a href="/website/{id}/collaborators">Collaborators</a>
+      </li>
+      <li>
+        <a href="/website/{id}/publish">Publish</a>
+      </li>
+    </ul>
   </nav>
 
   {@render children()}
@@ -39,27 +52,36 @@
 </div>
 
 <style>
+  label[for="toggle-mobile-preview"] {
+    position: absolute;
+    inset-block-start: -0.0625rem;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: var(--space-2xs);
+  }
+
+  #toggle-mobile-preview:checked ~ .operations {
+    display: none;
+  }
+
+  #toggle-mobile-preview:checked ~ .preview {
+    display: flex;
+  }
+
   .operations,
   .preview {
-    padding: 1rem;
+    padding: var(--space-s);
+    padding-block-start: var(--space-xl);
     overflow-y: auto;
   }
 
-  .operations {
-    border-inline-end: var(--border-primary);
-  }
-
-  .operations__nav {
-    margin-block: 1rem 2rem;
+  .operations__nav > ul {
+    margin-block: var(--space-s) var(--space-m);
     display: flex;
-    gap: 1rem;
-    overflow-x: auto;
-  }
-
-  .preview {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
+    flex-wrap: wrap;
+    column-gap: var(--space-s);
+    row-gap: var(--space-3xs);
   }
 
   iframe {
@@ -67,4 +89,26 @@
     block-size: 100%;
     border: var(--border-primary);
   }
+
+  .preview {
+    display: none;
+    flex-direction: column;
+    gap: var(--space-s);
+  }
+
+  @media (min-width: 640px) {
+    label[for="toggle-mobile-preview"] {
+      display: none;
+    }
+
+    .operations {
+      border-inline-end: var(--border-primary);
+      padding-block-start: var(--space-s);
+    }
+
+    .preview {
+      display: flex;
+      padding-block-start: var(--space-s);
+    }
+  }
 </style>