From 8538c41d2a7ef19478429315888ea9c43b8b1433 Mon Sep 17 00:00:00 2001
From: Daniel Vinci <me@danielvinci.com>
Date: Fri, 30 Apr 2021 12:43:27 -0600
Subject: [PATCH] prepare to redo the nav

---
 src/components/OldNav.svelte | 99 ++++++++++++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/components/OldNav.svelte

diff --git a/src/components/OldNav.svelte b/src/components/OldNav.svelte
new file mode 100644
index 0000000..17c931a
--- /dev/null
+++ b/src/components/OldNav.svelte
@@ -0,0 +1,99 @@
+<script>
+  export let segment;
+</script>
+
+<nav>
+  <ul>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === undefined ? "page" : undefined}
+        href=".">home</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "global-open-infrastructure" ? "page" : undefined}
+        href="./global-open-infrastructure">global open infrastructure</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "privacy-by-design" ? "page" : undefined}
+        href="./privacy-by-design">privacy by design</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "free-open-source" ? "page" : undefined}
+        href="./free-open-source">free and open-source</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "faq" ? "page" : undefined}
+        href="./faq">faq</a
+      >
+    </li>
+    <li>
+      <a
+        rel="prefetch"
+        aria-current={segment === "about-contact" ? "page" : undefined}
+        href="./about-contact">about & contact</a
+      >
+    </li>
+  </ul>
+</nav>
+
+<style>
+  nav {
+    font-weight: 300;
+    background-color: #00111d;
+    color: white;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* clearfix */
+  ul::after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  li {
+    display: block;
+  }
+
+  [aria-current] {
+    position: relative;
+    display: inline-block;
+    font-weight: bold;
+  }
+
+  [aria-current]::after {
+    position: absolute;
+    content: "";
+    width: calc(100% - 1em);
+    height: 3px;
+    background-color: white;
+    display: block;
+    bottom: -1px;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1em 0.5em;
+    display: block;
+    line-height: 1em;
+  }
+</style>