reorg files to put things in assets dir

assets/scripts/nav.js

@@ -0,0 +1,137 @@
+/* Nav construction */
+const cards = [
+	{
+		title: "card one",
+		href: "/card-one/"
+	},
+	{
+		title: "card two",
+		href: "/card-two/"
+	},
+	{
+		title: "card three",
+		href: "/card-three/"
+	}
+]
+
+const constructMenuLink = function(title, href) {
+	const path = window.location.pathname;
+
+	const a = document.createElement("a");
+	a.href = href;
+	a.title = title;
+	a.innerHTML = title;
+	if (path === href) a.id = "current-page";
+
+	return a;
+}
+
+const constructSkipLink = function() {
+	const a = constructMenuLink("skip to main", "#main");
+	a.id = "skip";
+
+	return a;
+}
+
+const constructDropdown = function() {
+	const div = document.createElement("div");
+	div.id = "dropdown";
+
+	const button = document.createElement("button");
+	button.innerHTML = "cards ⮷";
+	button.id="drop-button";
+	button.ariaLabel = "card submenu";
+	button.ariaExpanded = "false";
+	button.type = "button";
+	button.setAttribute("aria-controls", "drop-content");
+	div.append(button);
+
+	const ul = document.createElement("ul");
+	ul.id = "drop-content";
+	ul.ariaHidden = "true";
+
+	for (const card of cards) {
+		const li = document.createElement("li");
+		li.append(constructMenuLink(card.title, card.href));
+		ul.append(li);
+	}
+
+	div.append(ul);
+	return div;
+}
+
+const constructNav = function() {
+	const nav = document.getElementById("top-nav");
+	nav.append(constructSkipLink());
+	nav.append(constructMenuLink("home", "/"));
+	nav.append(constructDropdown());
+}
+
+constructNav();
+
+/* Dropdown handling */
+
+const dropdown = document.getElementById("dropdown");
+const dropdownButton = document.getElementById("drop-button");
+const dropdownContent = document.getElementById("drop-content");
+
+const dropdownItems = dropdownContent.querySelectorAll("a");
+const firstDropdownItem = dropdownItems[0];
+const lastDropdownItem = dropdownItems[dropdownItems.length - 1];
+
+const openDropdown = function() {
+	dropdownContent.classList.add("show");
+	dropdownContent.setAttribute("aria-hidden", "false");
+	dropdownButton.setAttribute("aria-expanded", "true");
+}
+
+const closeDropdown = function() {
+	if (dropdownButton.ariaExpanded === "true") {
+		dropdownContent.classList.remove("show");
+		dropdownContent.setAttribute("aria-hidden", "true");
+		dropdownButton.setAttribute("aria-expanded", "false");
+	}
+}
+
+dropdownButton.addEventListener("click", (event) => {
+	if (dropdownButton.ariaExpanded === "false") openDropdown();
+	else closeDropdown();
+});
+
+dropdownButton.addEventListener("keydown", (event) => {
+	if (event.key === "Enter" || event.key === " ") { // Space or Enter key
+		event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
+		if (dropdownButton.ariaExpanded === "false") {
+			openDropdown();
+		} else {
+			closeDropdown();
+		}
+	}
+});
+
+firstDropdownItem.addEventListener("keydown", (event) => {
+	if (event.key === "Tab" && event.shiftKey) closeDropdown();
+});
+
+lastDropdownItem.addEventListener("keydown", (event) => {
+	if (event.key === "Tab" && !event.shiftKey) closeDropdown();
+});
+
+document.addEventListener("keydown", (event) => {
+	if (event.key === "Escape") {
+		closeDropdown();
+		dropdownButton.focus();
+	}
+});
+
+window.addEventListener("click", (event) => {
+	if (!event.target.matches("#drop-button")) closeDropdown();
+});
+
+/* footer */
+
+let footerHTML = `
+	<p>brought to you in 2026 by
+		<a href="https://leecat.art">lee</a>
+	</p>`;
+document.getElementById("footer").innerHTML = footerHTML;

assets/styles/cards.css

@@ -0,0 +1,57 @@
+.card {
+	color: var(--color-accent);
+}
+
+p .card {
+	text-transform: uppercase;
+	font-weight: 700;
+}
+
+.stop {
+	color: var(--color-accent);
+	position: relative;
+	list-style: none;
+	padding-left: 1.5rem;
+}
+
+.stop:not(:last-child) {
+	padding-bottom: 2rem;
+}
+
+.stop:before {
+	background-color: var(--color-accent);
+	width: .1rem;
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+svg {
+	margin-left: -2.2rem;
+	width: 2rem;
+	fill: var(--color-accent);
+	float: left;
+	padding: .4rem .5rem 0 0;
+}
+
+@media (max-width: 650px) {
+	svg {
+		padding-top: .2rem;
+	}
+}
+
+.stop h2 {
+	margin: 0;
+}
+
+.stop img {
+	width: 100%;
+}
+
+.stop p {
+	margin: 0;
+	color: var(--color-text);
+	padding-top: .5rem;
+}

assets/styles/main.css

@@ -0,0 +1,161 @@
+:root {
+	color-scheme: light dark;
+
+	--color-blue-light: #c8e5f5;
+	--color-gold-light: #ecd399;
+	--color-blue-dark: #02293e;
+	--color-gold-dark: #715511;
+
+	--color-bg: light-dark(var(--color-blue-light), var(--color-blue-dark));
+	--color-text: light-dark(var(--color-blue-dark), var(--color-blue-light));
+	--color-accent: light-dark(var(--color-gold-dark), var(--color-gold-light));
+}
+
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	color: var(--color-text);
+	background-color: var(--color-bg);
+	font-family: sans-serif;
+}
+
+main {
+	width: 65%;
+	margin: 0 auto 2rem;
+	scroll-margin-top: 1.5rem;
+	min-height: 50vh;
+}
+
+@media (max-width: 650px) {
+	main {
+		width: 92%;
+	}
+}
+
+img {
+	display: block;
+}
+
+h1 {
+	margin: 3rem auto 1rem;
+	text-align: center;
+	font-size: 2.2rem;
+}
+
+h2, h3 {
+	margin: 3rem auto .5rem;
+	color: var(--color-accent);
+	border-bottom: solid;
+}
+
+h2 {
+	font-size: 1.8rem;
+}
+
+h3 {
+	font-size: 1.35rem;
+	text-align: right;
+}
+
+@media (max-width: 650px) {
+	h1 {
+		font-size: 1.8rem;
+	}
+
+	h2 {
+		font-size: 1.5rem;
+	}
+
+	h3 {
+		font-size: 1.2rem;
+	}
+}
+
+p {
+	margin: 0 auto 1.5rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	p {
+		font-size: .9rem;
+		line-height: 1.3rem;
+	}
+}
+
+a {
+	color: var(--color-text);
+	text-decoration: underline;
+	text-decoration-style: solid;
+	text-decoration-thickness: .2rem;
+	text-decoration-color: var(--color-accent);
+	transition: text-decoration-thickness .5s;
+	padding: 0 .15rem;
+	border-radius: .15rem;
+}
+
+@media (any-hover: hover) {
+	a:hover {
+		text-decoration-thickness: .4rem;
+	}
+}
+
+a:focus-visible {
+	text-decoration: none;
+	outline: var(--color-accent) solid .15rem;
+}
+
+ul {
+	margin: 0 auto 1.5rem 2rem;
+	line-height: 1.5rem;
+}
+
+@media (max-width: 650px) {
+	ul {
+		font-size: .9rem;
+		line-height: 1.3rem;
+	}
+}
+
+time {
+	font-weight: 700;
+}
+
+button {
+	cursor: pointer;
+	background-color: var(--color-bg);
+}
+
+header img {
+	max-height: 25vh;
+	max-width: 100%;
+	margin: 0 auto;
+}
+
+@media (max-width: 650px) {
+	header img {
+		max-height: 20vh;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	#logo-dark {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	#logo-light {
+		display: none;
+	}
+}
+
+#author {
+	text-align: right;
+	margin-bottom: 3rem;
+	font-style: italic;
+}

assets/styles/nav.css

@@ -0,0 +1,119 @@
+nav {
+	display: flex;
+	position: relative;
+	gap: 1rem;
+	justify-content: center;
+	margin: 1rem auto;
+}
+
+nav a,
+nav button {
+	font-size: 1.4rem;
+	border: .1rem solid;
+	border-radius: .15rem;
+	padding: .15rem .3rem;
+	color: var(--color-accent);
+	text-decoration: none;
+	line-height: 2rem;
+	outline-offset: .1rem;
+}
+
+@media (max-width: 650px) {
+	nav a,
+	nav button {
+		font-size: 1.1rem;
+	}
+}
+
+@media (any-hover: hover) {
+	nav a:hover,
+	nav button:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+}
+
+nav a:focus-visible,
+nav button:focus-visible {
+	outline: .1rem solid var(--color-accent);
+}
+
+#skip {
+	left: -999px;
+	position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+	background-color: var(--color-bg);
+}
+
+#skip:focus-visible {
+	left: 1rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
+}
+
+@media (any-hover: hover) {
+	#skip:hover {
+		color: var(--color-bg);
+		background-color: var(--color-accent);
+	}
+}
+
+#current-page {
+	border-right-width: .5rem;
+	border-left-width: .5rem;
+}
+
+nav ul {
+	list-style: none;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	margin: 0 0 0 1rem;
+	min-width: 10rem;
+}
+
+#dropdown {
+	position: relative;
+	display: inline-block;
+	min-width: 3rem;
+}
+
+nav ul.show {
+	display: block;
+}
+
+nav ul li {
+	margin: .5rem;
+}
+
+nav ul a {
+	display: inline-block;
+	background-color: var(--color-bg);
+}
+
+footer {
+	color: var(--color-bg);
+	background-color: var(--color-text);
+	padding: 1rem;
+}
+
+footer p {
+	text-align: center;
+	margin: 0;
+}
+
+footer a {
+	color: var(--color-bg);
+	text-decoration-color: var(--color-bg);
+}
+
+footer a:focus-visible {
+	outline-color: var(--color-bg);
+}