package layouts

templ Page(title string) {
	<!DOCTYPE html>
	<html lang="en-US" class="scroll-smooth motion-reduce:scroll-auto">
		<head>
			<!-- TODO: improve a11y for zoomed states -->
			<meta
				name="viewport"
				content={ "width=device-width, " +
							"initial-scale=1.0, " +
							"maximum-scale=1.0, " +
							"user-scalable=no" }
			/>
			<link rel="stylesheet" href="/uno.css"/>
			<link rel="stylesheet" href="/global.css"/>
			<title>{ title }</title>
		</head>
		<body
			class={ "flex flex-col justify-center items-center " +
			"w-screen overflow-x-hidden text-white bg-black font-sans m-0" }
			style="--anim-slide-from-y: 10px; --anim-delay: 120ms; --anim-duration: 0.6s;"
		>
			{ children... }
		</body>
	</html>
}
