Added Header Component

src/components/Page/Header/Header.module.css

@@ -0,0 +1,93 @@
+.header {
+  @mixin py var(--spacing-tight);
+
+  width: var(--dim-full);
+  color: var(--color-text-inverse);
+  background-color: var(--color-surface-inverse);
+}
+
+.inner {
+  @mixin responsive-wrapper;
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-cozy);
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.logo {
+  font-family: var(--font-mono);
+  animation:
+      logo-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite,
+      logo-glitch 15s linear infinite;
+  animation-delay: 0s, 3s;
+
+  &:hover {
+    transform: translate(0, 0);
+
+    color: var(--color-secondary);
+
+    opacity: 1;
+
+    transition: all 0.2s ease;
+    animation: none;
+  }
+}
+
+.pagename {
+  font-family: var(--font-mono);
+
+  & .bracket {
+    color: var(--color-secondary);
+  }
+}
+
+.menutoggle {
+  @mixin ml auto;
+
+  & button {
+    cursor: pointer;
+    font-family: var(--font-mono);
+    transition: color 0.2s ease-out;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+
+    &:active {
+      transform: scale(0.95);
+      transition: transform 0.1s ease-out;
+    }
+  }
+}
+
+@keyframes logo-pulse {
+  0% { opacity: 1; }
+  25% { opacity: 0.66; }
+  50% { opacity: 0.33; }
+  75% { opacity: 0.66; }
+  100% { opacity: 1; }
+}
+
+@keyframes logo-glitch {
+  0% {
+    transform: translate(0, 0);
+    color: inherit;
+  }
+
+  2% {
+    transform: translate(-2px, -2px);
+    color: var(--color-primary);
+  }
+
+  4% {
+    transform: translate(0, 0);
+    color: inherit;
+  }
+
+  100% {
+    transform: translate(0, 0);
+    color: inherit;
+  }
+}