From 7cdd9725387b6d254be98bfe80f75c7de8b431f9 Mon Sep 17 00:00:00 2001
From: Devin Haska <wonderfulfrog@users.noreply.github.com>
Date: Fri, 1 Mar 2024 17:46:48 -0800
Subject: [PATCH] feat: new header

---
 src/_includes/partials/header.html |  2 +-
 src/_includes/partials/menu.html   |  4 ++--
 src/css/blocks/site-header.css     | 32 ++++++++++++++++++++++++++++++
 src/css/blocks/site-logo.css       |  5 +++--
 src/css/global/variables.css       |  2 ++
 5 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/css/blocks/site-header.css

diff --git a/src/_includes/partials/header.html b/src/_includes/partials/header.html
index aaea89b..a3e126f 100644
--- a/src/_includes/partials/header.html
+++ b/src/_includes/partials/header.html
@@ -1,4 +1,4 @@
-<header class="[ navbar ][ py-1 mb-1 ]">
+<header class="[ navbar ][ py-1 mb-2 ]">
     <div class="[ wrapper ]">
         <nav class="[ repel ]">
             <div class="[ site-logo ] [ flex items-center gap-0.5 ]">
diff --git a/src/_includes/partials/menu.html b/src/_includes/partials/menu.html
index 60e3804..d95d570 100644
--- a/src/_includes/partials/menu.html
+++ b/src/_includes/partials/menu.html
@@ -1,7 +1,7 @@
-<ul class="[ list-none cluster p-0 m-0 ]">
+<ul class="[ menu ] [ list-none cluster p-0 m-0 ]">
     {% for item in navigation.top %}
         <li>
-            <a href="{{ item.url }}">{{ item.text }}</a>
+            <a class="[ menu-button ]" href="{{ item.url }}">{{ item.text }}</a>
         </li>
     {% endfor %}
 </ul>
diff --git a/src/css/blocks/site-header.css b/src/css/blocks/site-header.css
new file mode 100644
index 0000000..f93e4c5
--- /dev/null
+++ b/src/css/blocks/site-header.css
@@ -0,0 +1,32 @@
+.navbar {
+  background-color: var(--color-primary);
+  position: relative;
+}
+
+.navbar::after {
+  content: "";
+  display: block;
+  mask-image: var(--triangles);
+  background-color: var(--color-primary);
+  mask-size: 1.5rem auto;
+  mask-repeat: repeat-x;
+  height: 24px;
+  transform: translateY(16px);
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.menu-button {
+  background-color: var(--color-white);
+  color: var(--color-black);
+  box-shadow:
+    1px 1px 0px var(--color-shadow),
+    2px 2px 0 var(--color-shadow);
+  padding-block: var(--spacing-0\.25);
+  padding-inline: var(--spacing-0\.5);
+  border-radius: var(--spacing-0\.25);
+  border: 1px solid var(--color-shadow);
+  text-decoration: none;
+  font-size: 0.8rem;
+}
diff --git a/src/css/blocks/site-logo.css b/src/css/blocks/site-logo.css
index 0ef5a5a..b9151b9 100644
--- a/src/css/blocks/site-logo.css
+++ b/src/css/blocks/site-logo.css
@@ -1,6 +1,7 @@
 .site-logo .wordmark {
   text-decoration: none;
   margin-block-start: -6px;
+  transform: skew(0deg, -1deg) translateY(2px);
 }
 
 .site-logo .wordmark > span {
@@ -27,11 +28,11 @@
   transform: translateY(-2px);
 }
 
-.site-logo .wordmark > :nth-child(1) {
+.site-logo .wordmark > * {
   --shadow-color: var(--color-shadow);
   z-index: 1;
 }
 
 .site-logo .wordmark > :nth-child(2) {
-  --shadow-color: var(--color-primary);
+  z-index: 0;
 }
diff --git a/src/css/global/variables.css b/src/css/global/variables.css
index b2e88a5..b917027 100644
--- a/src/css/global/variables.css
+++ b/src/css/global/variables.css
@@ -5,4 +5,6 @@
 
   --color-white: white;
   --color-black: black;
+
+  --triangles: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path stroke-width="0" d="M0,0 40,40 80,0z" /></svg>');
 }