fix: responsive

Author: barelyhuman

www/pages/_layout.html

@@ -93,10 +93,10 @@
 
 		<nav
 			aria-label="Primary navigation"
-			class="flex items-center justify-between mx-auto animate-kids fade-in-y h-header-height max-w-content px-page-gutter"
+			class="flex flex-wrap items-center justify-between mx-auto animate-kids fade-in-y h-header-height max-w-content px-page-gutter"
 			style="--from: -10px; --delay: 5"
 		>
-			<a href="#" aria-label="Goto top of the page">
+			<a href="#" aria-label="Goto top of the page" class="mt-12 xs:mt-0">
 				<span class="sr-only">Goblin</span>
 				<svg
 					width="37"
@@ -131,7 +131,7 @@
 				</svg>
 			</a>
 
-			<div class="flex items-center gap-2">
+			<div class="flex flex-col items-end gap-2 mt-4 ml-auto xs:flex-row xs:items-center">
 				<a
 					href="https://github.com/barelyhuman/goblin/issues"
 					class="flex gap-1.5 items-center px-1 py-0.5 text-sm font-medium rounded transition text-subtle hover:bg-surface hover:text-text"

www/tailwind.config.js

@@ -3,6 +3,9 @@ module.exports = {
 	content: ["./pages/**/*.{html,md}"],
 	theme: {
 		extend: {
+			screens: {
+				xs: "420px",
+			},
 			spacing: {
 				"page-top": "var(--page-top)",
 				"page-gutter": "var(--page-gutter)",