styling

src/components/Nav.svelte

@@ -13,16 +13,21 @@
 </script>
 
 <style>
+  nav :global(*) {
+    box-sizing: initial;
+  }
+
   nav {
     padding-top: env(safe-area-inset-top);
     padding-bottom: env(safe-area-inset-bottom);
-    width: 3.5em;
+    width: 3em;
     height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     background-color: var(--clr-primary);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
+    border-right: 0.1em solid var(--clr-secondary);
   }
 
   ul {

src/components/WPAdapter.svelte

@@ -11,6 +11,16 @@
     width: calc(100% + 4em);
     margin-left: -2em;
   }
+  @media (max-width: 30em) {
+    div :global(.alignfull) {
+      width: calc(100vw - 4em);
+      margin-left: -1em;
+    }
+    div :global(.alignwide) {
+      width: calc(100% + 2em);
+      margin-left: -1em;
+    }
+  }
 
   div :global(figure img) {
     width: 100%;

src/routes/_layout.svelte

@@ -23,13 +23,12 @@
 
   @media (max-width: 30em) {
     main {
-      padding: 2em;
+      padding: 1em;
     }
   }
 </style>
 
 <div>
-
   <Nav {segment} />
   <main>
     <slot />

static/global.css

@@ -1,5 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400&family=Playfair+Display&display=swap');
 
+* {
+  box-sizing: border-box;
+}
+
 :root {
   --ff: 'Jost', Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
     Helvetica Neue, sans-serif;
@@ -11,7 +15,6 @@
 
 body {
   margin: 0;
-  box-sizing: border-box;
   overflow: hidden;
 
   background-color: #ffffff;