fix: adjust margins around body

1 files changed, 31 insertions, 41 deletions

diff --git a/sass/style.scss b/sass/style.scss
index 06712a9..58c8e05 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -8,7 +8,6 @@ html {
 
   display: flex;
   flex-direction: column;
-  height: 100%;
 }
 
 ::selection {
@@ -50,57 +49,52 @@ footer {
 }
 
 body {
-  height: 100%;
-  width: 100%;
+  height: calc(100vh - 1rem);
+  width: calc(100vw - 4rem);
   max-width: 900px;
   display: flex;
   flex-direction: column;
-  padding: 1rem;
-  margin: 0 auto 1;
+  margin: 0 2rem 1rem;
   line-height: 1.4;
   align-self: center;
 
-  & > header > {
-    padding: 1rem;
-    nav {
+  & > header > nav {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    column-gap: 1rem;
+
+    & > * {
       display: flex;
+      align-items: center;
+    }
+
+    & > span {
+      margin-right: auto;
+    }
+
+    & > ul {
+      margin-left: auto;
+      column-gap: 1rem;
+      list-style: none;
+      padding-left: 0;
       flex-wrap: wrap;
       justify-content: space-around;
-      column-gap: 1rem;
 
-      & > * {
+      & > li {
         display: flex;
         align-items: center;
       }
+    }
 
-      & > span {
-        margin-right: auto;
-        // flex-grow: 1;
-      }
-
-      & > ul {
-        margin-left: auto;
-        column-gap: 1rem;
-        list-style: none;
-        padding-left: 0;
-        flex-wrap: wrap;
-        justify-content: space-around;
-
-        & > li {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      a,
-      a:visited {
-        font-size: 1.2rem;
-        color: var(--gray);
-        font-weight: bold;
+    a,
+    a:visited {
+      font-size: 1.2rem;
+      color: var(--gray);
+      font-weight: bold;
 
-        &.active {
-          color: var(--orange-dim);
-        }
+      &.active {
+        color: var(--orange-dim);
       }
     }
   }
@@ -110,8 +104,6 @@ body {
   main,
   nav,
   section {
-    padding: 1rem;
-
     & > header {
       & > hgroup > {
         :first-child {
@@ -156,8 +148,6 @@ body {
   }
 
   & > footer {
-    padding: 1rem;
-
     text-align: center;
     margin-top: auto;
   }