feat: add first pass of navbar

eleventy.config.js

@@ -21,7 +21,7 @@ module.exports = (eleventyConfig) => {
   eleventyConfig.addFilter("values", values);
 
   // 	--------------------- Passthrough File Copy -----------------------
-  ["src/assets/fonts/"].forEach((path) =>
+  ["src/assets/fonts/", "src/assets/images"].forEach((path) =>
     eleventyConfig.addPassthroughCopy(path),
   );
 

src/_includes/partials/header.html

@@ -1,3 +1,14 @@
-<header>
-    {% include "partials/menu.html" %}
+<header class="navbar">
+    <nav class="wrapper flex items-center">
+        <div class="[ flex items-center ] [ site-logo ]">
+            <a class="[ flex items-center justify-center ] [ logo ]" href="#">
+                <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
+            </a>
+            <a class="[ flex ] [ wordmark ]" href="#">
+                <span>wonderful</span>
+                <span>frog</span>
+            </a>
+        </div>
+        {% include "partials/menu.html" %}
+    </nav>
 </header>

src/_includes/partials/menu.html

@@ -1,10 +1,7 @@
-<nav aria-label="Main">
-    Menu.
-    <ul>
-        {% for item in navigation.top %}
-            <li>
-                <a class="nav" href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url, page.url) | safe }}>{{ item.text }}</a>
-            </li>
-        {% endfor %}
-    </ul>
-</nav>
+<ul>
+    {% for item in navigation.top %}
+        <li>
+            <a class="nav" href="{{ item.url }}" {{ helpers.getLinkActiveState(item.url, page.url) | safe }}>{{ item.text }}</a>
+        </li>
+    {% endfor %}
+</ul>

src/assets/css/blocks/navbar.css

@@ -0,0 +1,9 @@
+.navbar {
+  backdrop-filter: blur(3px);
+  background-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
+  background-image: linear-gradient(var(--color-bg) 20%, transparent);
+  padding-block: 1.5rem;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}

src/assets/css/blocks/site-logo.css

@@ -0,0 +1,51 @@
+.site-logo {
+  gap: 0.5rem;
+}
+
+.site-logo .logo {
+  background-color: var(--color-light);
+  border-radius: 50%;
+  width: 52px;
+  height: 52px;
+  border-color: var(--color-dark);
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: 0 2px 0 var(--color-dark);
+}
+
+.site-logo .wordmark {
+  text-decoration: none;
+}
+
+.site-logo .wordmark > span {
+  text-shadow:
+    -1px 1px 0 var(--shadow-color),
+    0 1px 0 var(--shadow-color),
+    -1px -1px 0 var(--shadow-color),
+    1px -1px 0 var(--shadow-color),
+    1px 1px 0 var(--shadow-color),
+    -1px 2px 0 var(--shadow-color),
+    0px 2px 0 var(--shadow-color),
+    1px 2px 0 var(--shadow-color),
+    -1px 3px 0 var(--shadow-color),
+    0px 3px 0 var(--shadow-color),
+    1px 3px 0 var(--shadow-color);
+  color: white;
+  font-family: var(--font-family-display);
+  font-size: 1.5rem;
+  letter-spacing: -0.05em;
+  transition: transform var(--transition-duration);
+}
+
+.site-logo .wordmark > span:hover {
+  transform: translateY(-2px);
+}
+
+.site-logo .wordmark > :nth-child(1) {
+  --shadow-color: var(--color-dark);
+}
+
+.site-logo .wordmark > :nth-child(2) {
+  --shadow-color: var(--color-primary-faded);
+  z-index: 1;
+}

src/assets/css/utils/flex.css

@@ -0,0 +1,16 @@
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}