From 6098393e422b0bbfb3d56e7bcfe6938a4baca8ca Mon Sep 17 00:00:00 2001
From: cupcakearmy <hi@nicco.io>
Date: Mon, 28 Sep 2020 15:24:50 +0200
Subject: [PATCH] styling

---
 src/components/Nav.svelte       |  7 ++++++-
 src/components/WPAdapter.svelte | 10 ++++++++++
 src/routes/_layout.svelte       |  3 +--
 static/global.css               |  5 ++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 78d71a5..242c231 100644
--- a/src/components/Nav.svelte
+++ b/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 {
diff --git a/src/components/WPAdapter.svelte b/src/components/WPAdapter.svelte
index 18ae57c..1ff9b45 100644
--- a/src/components/WPAdapter.svelte
+++ b/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%;
diff --git a/src/routes/_layout.svelte b/src/routes/_layout.svelte
index dc30f37..82553a5 100644
--- a/src/routes/_layout.svelte
+++ b/src/routes/_layout.svelte
@@ -23,13 +23,12 @@
 
   @media (max-width: 30em) {
     main {
-      padding: 2em;
+      padding: 1em;
     }
   }
 </style>
 
 <div>
-
   <Nav {segment} />
   <main>
     <slot />
diff --git a/static/global.css b/static/global.css
index dd4138b..e76343b 100644
--- a/static/global.css
+++ b/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;