feat: new header

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