From 0581f7aa7b09f7e84ca5312cabf73222f102f39f Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Sun, 13 Dec 2020 12:33:13 +0000
Subject: [PATCH] Remove container from nav - Replaced container for the nav
 component with a custom style instead using max-width and margin: 0 auto.

---
 src/components/Nav.svelte | 40 +++++++++++++++++++--------------------
 static/css/global.css     |  5 +++++
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 5f5eae7..41ba2af 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -17,26 +17,24 @@
     }
 </style>
 <header>
-    <div class="container">
-        <nav class="navbar navbar-expand-md">
-            <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
-                <ul class="navbar-nav mr-auto">
-                    <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
-                    <li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
+    <nav class="navbar navbar-expand-md">
+        <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
+            <ul class="navbar-nav mr-auto">
+                <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
+                <li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>
 
-                    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-                         the blog data when we hover over the link or tap it on a touchscreen -->
-                    <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
-                    </li>
-                </ul>
-            </div>
-            <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
-                <ul class="navbar-nav ml-auto">
-                    <li>
-                        <svelte:component this={rightComponent}/>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-    </div>
+                <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+                        the blog data when we hover over the link or tap it on a touchscreen -->
+                <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
+                </li>
+            </ul>
+        </div>
+        <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
+            <ul class="navbar-nav ml-auto">
+                <li>
+                    <svelte:component this={rightComponent}/>
+                </li>
+            </ul>
+        </div>
+    </nav>
 </header>
\ No newline at end of file
diff --git a/static/css/global.css b/static/css/global.css
index 400b2d9..7545434 100755
--- a/static/css/global.css
+++ b/static/css/global.css
@@ -44,6 +44,11 @@ hr {
   background-color: var(--line-color);
 }
 
+nav {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
 li a:hover {
   border-bottom: 3px solid var(--line-color);
   text-decoration: none;