CSS/design Improvements (#51)

* center nav

* move span to nest under .nav-link

The span hover rules were under .nav-link already, and <span> is inside
.nav-link, so it makes more sense to nest it under .nav-link.

* make nav link background color full width on mobile

* don't change margin/padding of nav links on mobile

Hover effects are barely seen on mobile anyway, and it makes the mobile
nav menu look weird.

* make desktop nav fill the screen

* right-align cta buttons in footer on desktop

Looks a little nicer.

Author: punkfairie

src/lib/components/Footer.svelte

@@ -83,9 +83,11 @@
     }
 
     .ctas {
+        text-align: right;
+
         > :global(*) {
             margin-bottom: 1em;
         }
     }
 
-</style>
+</style>

src/lib/components/Header.svelte

@@ -121,12 +121,10 @@
     .nav {
         --nav-border: solid 1px var(--color-nav-border);
 
-        display: block;
-        position: relative;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 
         @media screen and (width >= 1024px) {
-            padding: 0.5em 2em;
+            padding: 0.5em 0;
         }
     }
 
@@ -159,20 +157,14 @@
         }
 
         @media screen and (width >= 1024px) {
-            display: inline-block;
+            display: flex;
+            justify-content: center;
+            width: 100%;
             padding: 0;
             position: unset;
             background: unset;
             border: none;
         }
-
-        span {
-            display: inline-block;
-            padding: 0.5em 1em;
-            margin: 0 1em;
-
-            transition: margin 200ms, padding 200ms;
-        }
     }
 
     .nav-link {
@@ -182,19 +174,34 @@
         text-decoration: none;
 
         @media screen and (width >= 1024px) {
+            flex-grow: 1;
+            text-align: center;
             border-right: var(--nav-border);
 
-            &:first-child {
-                border-left: var(--nav-border);
+            &:last-child {
+                border-right: none;
+            }
+        }
+
+        span {
+            display: block;
+            padding: 0.5em 1em;
+            margin: 0 1em;
+
+            @media screen and (width >= 1024px) {
+              transition: margin 200ms, padding 200ms;
             }
         }
 
         &:hover span {
-            padding: 0.5em 2em;
-            margin: 0;
             text-shadow: 0 0 1px var(--color-nav-text);
 
             background-color: var(--color-nav-background);
+
+            @media screen and (width >= 1024px) {
+              padding: 0.5em 2em;
+              margin: 0;
+            }
         }
 
         &.active span {