Re-add nav menu to footer

src/lib/components/Footer.svelte

@@ -1,11 +1,9 @@
 <script>
-	import MainNav from './MainNav.svelte'
-	import { siteAuthor } from '$lib/config'
+	import { siteAuthor } from '$lib/config';
+	import NavItems from './NavItems.svelte';
 </script>
 
 <footer>
-	<MainNav />
-
 	<nav>
 		<ul>
 			<li>
@@ -16,6 +14,9 @@
 			</li>
 		</ul>
 	</nav>
+	<nav>
+		<NavItems />
+	</nav>
 
 	<p>&copy;{new Date().getFullYear()} {siteAuthor}</p>
-</footer>
+</footer>

src/lib/components/MainNav.svelte

@@ -1,18 +1,11 @@
 <script>
-	import { navItems } from '$lib/config';
 	import { isMenuOpen } from '../assets/js/store';
-	import NavItem from './NavItem.svelte';
 	import HamburgerMenuButton from './HamburgerMenuButton.svelte';
+	import NavItems from './NavItems.svelte';
 </script>
 
 <!-- Contents of this file will be used in the header and the responsive hamburger menu. -->
 <nav class="main-nav" class:open={$isMenuOpen}>
-	<ul>
-		{#each navItems as page}
-			<NavItem href={page.route}>
-				{page.title}
-			</NavItem>
-		{/each}
-	</ul>
+	<NavItems />
 	<HamburgerMenuButton closeOnly="true" />
 </nav>

src/lib/components/NavItems.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { navItems } from '$lib/config';
+	import NavItem from './NavItem.svelte';
+</script>
+
+<ul>
+	{#each navItems as page}
+		<NavItem href={page.route}>
+			{page.title}
+		</NavItem>
+	{/each}
+</ul>

static/css/header-and-footer.css

@@ -40,7 +40,6 @@ header {
 
 @media (min-width: 48rem) {
 	header {
-
 		justify-content: center;
 		flex-wrap: wrap;
 		height: auto;
@@ -75,7 +74,6 @@ header {
 
 @media (min-width: 48rem) {
 	.menu-button {
-
 		display: none;
 	}
 }
@@ -96,7 +94,7 @@ header {
 	align-items: center;
 	background: var(--darker);
 	color: var(--paper);
-	transition: all .25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+	transition: all 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
 }
 
 .main-nav.open {
@@ -109,43 +107,43 @@ header {
 .main-nav.open li {
 	--delay: 0.1s;
 	opacity: 0;
-	animation: slide_in_left .2s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
+	animation: slide_in_left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
 }
 
 .main-nav a {
 	color: inherit;
 }
 
 .main-nav li:nth-of-type(1) {
-	animation-delay: calc(var(--delay) * 1)
+	animation-delay: calc(var(--delay) * 1);
 }
 
 .main-nav li:nth-of-type(2) {
-	animation-delay: calc(var(--delay) * 2)
+	animation-delay: calc(var(--delay) * 2);
 }
 
 .main-nav li:nth-of-type(3) {
-	animation-delay: calc(var(--delay) * 3)
+	animation-delay: calc(var(--delay) * 3);
 }
 
 .main-nav li:nth-of-type(4) {
-	animation-delay: calc(var(--delay) * 4)
+	animation-delay: calc(var(--delay) * 4);
 }
 
 .main-nav li:nth-of-type(5) {
-	animation-delay: calc(var(--delay) * 5)
+	animation-delay: calc(var(--delay) * 5);
 }
 
 .main-nav li:nth-of-type(6) {
-	animation-delay: calc(var(--delay) * 6)
+	animation-delay: calc(var(--delay) * 6);
 }
 
 .main-nav li:nth-of-type(7) {
-	animation-delay: calc(var(--delay) * 7)
+	animation-delay: calc(var(--delay) * 7);
 }
 
 .main-nav li:nth-of-type(8) {
-	animation-delay: calc(var(--delay) * 8)
+	animation-delay: calc(var(--delay) * 8);
 }
 
 .menu-button {
@@ -159,7 +157,7 @@ header {
 	display: block;
 	width: 100%;
 	text-align: center;
-	margin-bottom: calc(.2rem + 2vh);
+	margin-bottom: calc(0.2rem + 2vh);
 }
 
 @media (min-width: 48rem) {
@@ -233,15 +231,15 @@ footer ul {
 	display: initial;
 }
 
-footer ul li+li {
+footer ul li + li {
 	margin-top: 0.5rem;
 }
 
 .skip-to-content-link {
 	position: absolute;
 	top: -6rem;
 	left: 0;
-	padding: .5em;
+	padding: 0.5em;
 	opacity: 0;
 	display: flex;
 	justify-content: center;