feat: new header

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 ]">

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>

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;
+}

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;
 }

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>');
 }