feat(header): add responsiveness

Author: EricRovell

packages/escapist-marginalia/src/components/header/header.module.css

@@ -52,3 +52,24 @@
 		--button-bg: hsl(from var(--button-bg-accent-fill) h s l / 30%);
 	}
 }
+
+@media screen and (width <= 770px) {
+	.header {
+		display: grid;
+		grid-template: repeat(2, min-content) / 1fr;
+		width: 100%;
+		grid-column: 1 / span 3;
+	}
+
+	.logo {
+		margin-inline-start: 2rem;
+	}
+
+	.navigation {
+		overflow-x: auto;
+	}
+
+	.items {
+		margin-inline: 2rem;
+	}
+}

packages/escapist-marginalia/src/layouts/work-in-progress/work-in-progress.module.css

@@ -6,4 +6,8 @@
 	place-items: center;
 	justify-self: center;
 	margin-block-start: 7.2rem;
+
+	& h2 {
+		text-align: center;
+	}
 }