fix: improve header flex layout on small viewports

1 files changed, 38 insertions, 19 deletions

diff --git a/sass/style.scss b/sass/style.scss
index b80a9a1..06712a9 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -55,37 +55,52 @@ body {
   max-width: 900px;
   display: flex;
   flex-direction: column;
+  padding: 1rem;
   margin: 0 auto 1;
   line-height: 1.4;
   align-self: center;
 
-  & > header > nav {
-    display: flex;
-
-    & > * {
+  & > header > {
+    padding: 1rem;
+    nav {
       display: flex;
-      align-items: center;
-    }
-
-    & > ul {
-      margin-left: auto;
+      flex-wrap: wrap;
+      justify-content: space-around;
       column-gap: 1rem;
-      list-style: none;
 
-      & > li {
+      & > * {
         display: flex;
         align-items: center;
       }
-    }
 
-    a,
-    a:visited {
-      font-size: 1.2rem;
-      color: var(--gray);
-      font-weight: bold;
+      & > 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;
 
-      &.active {
-        color: var(--orange-dim);
+        &.active {
+          color: var(--orange-dim);
+        }
       }
     }
   }
@@ -95,6 +110,8 @@ body {
   main,
   nav,
   section {
+    padding: 1rem;
+
     & > header {
       & > hgroup > {
         :first-child {
@@ -139,6 +156,8 @@ body {
   }
 
   & > footer {
+    padding: 1rem;
+
     text-align: center;
     margin-top: auto;
   }