Improve header links layout

JosephDuffy · Mar 16, 2020 · 43cd498 · 43cd498
1 parent 17a5fec
commit 43cd498
Showing 1 changed file with 32 additions and 24 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -6,27 +6,28 @@ const Header = () => (
   <Fragment>
     <header>
       <nav>
-        <Link href="/">
-          <a>Home</a>
-        </Link>
-        <Link href="/apps">
-          <a>Apps</a>
-        </Link>
-        <Link href="/posts">
-          <a>Blog Posts</a>
-        </Link>
-        <Link href="/open-source">
-          <a>Open Source</a>
-        </Link>
+        <div className="container">
+          <Link href="/">
+            <a>Home</a>
+          </Link>
+          <Link href="/apps">
+            <a>Apps</a>
+          </Link>
+          <Link href="/posts">
+            <a>Blog Posts</a>
+          </Link>
+          <Link href="/open-source">
+            <a>Open Source</a>
+          </Link>
+        </div>
       </nav>
-      <div className="horizontal-rule-container">
-        <HorizontalRule />
-      </div>
     </header>
+    <div className="horizontal-rule-container">
+      <HorizontalRule />
+    </div>
     <style jsx>{`
       header {
         width: 100vw;
-        padding-top: 8px;
         display: flex;
         flex-direction: column;
       }
@@ -38,23 +39,30 @@ const Header = () => (
         max-width: 100%;
       }
 
-      nav a:first-child {
-        margin-left: var(--content-padding-x);
+      a {
+        margin: 8px 12px;
+        font-size: 1.5em;
+        white-space: nowrap;
       }
 
-      nav a:last-child {
-        margin-right: var(--content-padding-x);
+      .container {
+        display: inline-block;
+        padding-top: 12px;
+        padding-bottom: 12px;
       }
 
-      a {
-        padding: 8px 16px;
-        font-size: 1.5em;
-        white-space: nowrap;
+      nav a:first-child {
+        margin-left: calc(var(--content-padding-x) + 4px);
+      }
+
+      nav a:last-child::after {
+        padding-right: calc(var(--content-padding-x) + 4px);
       }
 
       .horizontal-rule-container {
         width: var(--content-width);
         margin: 0 auto;
+        margin-top: -8px;
       }
     `}</style>
   </Fragment>