bunch of styling and filelr content as well as nav generation

assets/scripts/nav.js

@@ -0,0 +1,87 @@
+// Top nav
+const skipLink = {
+	href: "#main",
+	title: "skip to main content",
+	text: "skip to main content"
+}
+
+const homeLink = {
+	href: "/",
+	title: "home page",
+	text: "Firstname Lastname"
+}
+
+const navLinks = [
+	{
+		href: "/one",
+		title: "dummy link one",
+		text: "nav one"
+	},
+	{
+		href: "/two",
+		title: "dummy link two",
+		text: "nav two"
+	},
+	{
+		href: "/three",
+		title: "dummy link three",
+		text: "nav three"
+	}
+]
+
+const createLink = function(link, currentPath) {
+	const a = document.createElement("a");
+	a.href = link.href;
+	a.title = link.title;
+	a.innerHTML = link.text;
+
+	if (link.href === currentPath) a.classList.add("current-page");
+
+	return a;
+}
+
+const createSkipLink = function(path) {
+	const a = createLink(skipLink, path);
+	a.id = "skip";
+	return a;
+}
+
+const createTitle = function(path) {
+	const h2 = document.createElement("h2");
+	h2.append(createLink(homeLink, path));
+	return h2;
+}
+
+const createNavLink = function(link) {
+	const li = document.createElement("li");
+	li.append(createLink(link));
+	return li;
+}
+
+const populateNav = function() {
+	nav = document.getElementById("top-nav");
+	let path = window.location.pathname;
+
+	nav.append(createSkipLink(path));
+	nav.append(createTitle(path));
+
+	const ul = document.createElement("ul");
+	for (const link of navLinks) ul.append(createNavLink(link, path));
+	nav.append(ul);
+}
+
+populateNav();
+
+// Footer
+const footerHTML = `
+	<p>2026</p>
+	<p>Firstname Lastname</p>
+	<p><a href="/attribution">attribution</a></p>
+`
+
+const populateFooter = function() {
+	const footer = document.getElementById("footer");
+	footer.innerHTML = footerHTML;
+}
+
+populateFooter();

assets/styles/main.css

@@ -28,7 +28,13 @@ body {
 	background-color: var(--color-bg);
 	font-family: Verdana, sans-serif;
 	width: 65%;
-	margin: 0 auto 4rem;
+	margin: 0 auto;
+}
+
+@media (max-width: 1050px) {
+	body {
+		width: 85%;
+	}
 }
 
 @media (max-width: 650px) {
@@ -44,7 +50,7 @@ h4,
 h5,
 h6 {
 	line-height: 2.5;
-	color: var(--color-pink);
+	color: var(--color-purple);
 	font-family: Courier, monospace;
 }
 
@@ -80,30 +86,78 @@ h3 {
 
 img {
 	width: 100%;
+	padding: .5rem 0;
 }
 
-p {
+p,
-	line-height: 1.3;
+ul {
+	line-height: 1.5;
 }
 
 @media (max-width: 650px) {
-	p {
+	p,
-		font-size: .8rem;
+	ul {
+		font-size: .85rem;
 	}
 }
 
+ul {
+	margin: .5rem 0 .5rem 2rem;
+}
+
+li {
+	list-style: square;
+}
+
+li::marker {
+	color: var(--color-orange);
+}
+
 a {
-	color: var(--color-purple);
+	color: var(--color-pink);
+	transition: text-decoration-thickness .5s;
+	text-decoration-thickness: .15rem;
+	text-decoration-color: var(--color-orange);
+	outline-offset: .05rem;
+	border-radius: .1rem;
 }
 
-.float-left {
+@media (any-hover: hover) {
-	float: left;
+	a:hover {
-	width: 45%;
+		text-decoration-thickness: .25rem;
-	padding: .65rem 1rem .65rem 0;
+	}
 }
 
-.float-right {
+a:focus-visible {
-	float: right;
+	outline: solid .15rem var(--color-orange);
-	width: 45%;
+	text-decoration: none;
-	padding: .65rem 0 .65rem 1rem;
+}
+
+@media (max-width: 650px) {
+	a {
+		text-decoration-thickness: .12rem;
+		outline-offset: .04rem;
+	}
+
+	@media (any-hover: hover) {
+		a:hover {
+			text-decoration-thickness: .18rem;
+		}
+	}
+
+	a:focus-visible {
+		outline-width: .12rem;
+	}
+}
+
+.two-col {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 1rem;
+}
+
+@media (max-width: 650px) {
+	.two-col {
+		grid-template-columns: auto;
+	}
 }

assets/styles/nav.css

@@ -1,25 +1,93 @@
 nav {
-	display: flex;
+	display: grid;
-	flex-flow: row wrap;
+	grid-template-columns: auto auto;
-	justify-content: space-between;
 	align-items: center;
 	margin: 1rem auto;
 }
 
 nav a {
+	font-family: Courier, monospace;
 	text-decoration: none;
+	border-radius: 0 1rem 0 1rem;
+	outline-offset: .2rem;
+	padding: 0 .2rem;
+	line-height: 1;
+	font-weight: bold;
+	color: var(--color-purple);
+}
+
+nav a.current-page::before {
+	content: "> " / "";
+	color: var(--color-orange);
+}
+
+nav a.current-page::after {
+	content: " <" / "";
+	color: var(--color-orange);
+}
+
+nav a:focus-visible {
+	outline: solid .2rem var(--color-orange);
+}
+
+#skip {
+	left: -999px;
+	position: absolute;
+	top: auto;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	z-index: -99;
+	background-color: var(--color-bg);
+	border-radius: 0 .65rem 0 .65rem;
+	font-weight: bold;
+	font-size: 1.15rem;
+}
+
+#skip:focus-visible {
+	left: 10rem;
+	top: 1.5rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
+}
+
+@media (max-width: 1050px) {
+	#skip:focus-visible {
+		left: 2rem;
+	}
+}
+
+@media (max-width: 650px) {
+	#skip:focus-visible {
+		left: 1rem;
+	}
 }
 
 nav h2 {
 	display: inline;
 	margin: 0;
 	font-size: 1.8rem;
+	line-height: 1;
+}
+
+@media (any-hover: hover) {
+	nav h2:hover {
+		text-decoration: underline .25rem var(--color-orange);
+	}
 }
 
 @media (max-width: 650px) {
 	nav h2 {
 		font-size: 1.5rem;
 	}
+
+	@media (any-hover: hover) {
+		nav h2:hover {
+			text-decoration: underline .2rem var(--color-orange);
+		}
+	}
 }
 
 nav ul {
@@ -32,17 +100,45 @@ nav ul {
 
 nav li {
 	list-style: none;
+	padding: .3rem 0;
 }
 
 nav li a {
-	display: block;
-	padding: .3rem 0;
-	font-family: Courier, monospace;
 	font-size: 1.3rem;
 }
 
+@media (any-hover: hover) {
+	nav li a:hover {
+		text-decoration: underline .2rem var(--color-orange);
+	}
+}
+
 @media (max-width: 650px) {
 	nav li a {
-		font-size: 1.2rem;
+		font-size: 1.18rem;
+	}
+
+	@media (any-hover: hover) {
+		nav li a:hover {
+			text-decoration: underline .17rem var(--color-orange);
+		}
+	}
+}
+
+footer {
+	display: flex;
+	gap: .5rem;
+	justify-content: space-around;
+	margin: 4rem 0 1rem;;
+	border-top: solid .5rem var(--color-orange);
+	padding-top: 1rem;
+	font-size: .85rem;
+}
+
+@media (max-width: 650px) {
+	footer {
+		font-size: .7rem;
+		flex-flow: column;
+		align-items: center;
 	}
 }

attribution/index.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>{{title}}</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta charset="utf-8">
+		<!-- Meta -->
+		<!-- <link rel="icon" type="image/x-icon" href="/favicon.ico"> -->
+		<link rel="canonical" href="/" />
+		<meta name="description" content="{{description}}" />
+		<meta name="robots" content="index,follow" />
+		<meta property="og:title" content="{{title}}" />
+		<meta property="og:type" content="article" />
+		<meta property="og:url" content="/" />
+		<meta property="og:description" content="{{description}}" />
+		<!-- <meta property="og:image" content="/assets/img/logo.jpg" />
+		<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" /> -->
+
+		<!-- JS -->
+		<script src="/assets/scripts/nav.js" defer></script>
+
+		<!-- CSS -->
+		<link rel="stylesheet" href="/assets/styles/main.css">
+		<link rel="stylesheet" href="/assets/styles/palette.css">
+		<link rel="stylesheet" href="/assets/styles/nav.css">
+	</head>
+	<body>
+		<header>
+			<nav id="top-nav"><!-- auto-generated by nav.js --></nav>
+		</header>
+		<main id="main">
+			<h1>Attribution</h1>
+			<p>Built by <a href="https://leecat.art" target="_blank">Lee Cattarin</a> for Firstname Lastname.</p>
+		</main>
+		<footer id="footer"><!-- auto-generated by nav.js --></footer>
+	</body>
+</html>

index.html

@@ -16,64 +16,72 @@
 		<!-- <meta property="og:image" content="/assets/img/logo.jpg" />
 		<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" /> -->
 
+		<!-- JS -->
+		<script src="/assets/scripts/nav.js" defer></script>
+
 		<!-- CSS -->
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<link rel="stylesheet" href="/assets/styles/nav.css">
 	</head>
 	<body>
 		<header>
-			<nav>
+			<nav id="top-nav"><!-- auto-generated by nav.js --></nav>
-				<h2>
-					<a href="/" title="home page">Andie Lastname</a>
-				</h2>
-				<ul>
-					<li>
-						<a href="/1" title="dummy link 1">one</a>
-					</li>
-					<li>
-						<a href="/2" title="dummy link 2">two</a>
-					</li>
-					<li>
-						<a href="/3" title="dummy link 3">three</a>
-					</li>
-				</ul>
-			</nav>
 		</header>
 		<main id="main">
 			<h1>header level 1</h1>
-			<img class="float-left" src="/assets/img/filler0.jpg">
+			<div class="two-col">
-			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+				<img src="/assets/img/filler0.jpg">
-				Fusce libero neque, sollicitudin id scelerisque in, congue ut leo.
+				<div>
-				Morbi vehicula sem quis mauris lobortis tempor quis ac eros.
+					<p>
-				Nam in elit eu quam pulvinar cursus id ut magna.
+						Lorem <a href="/ipsum">ipsum</a> dolor sit amet, consectetur adipiscing elit.
-				Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+						Fusce libero neque, sollicitudin id scelerisque in, congue ut leo.
-				Pellentesque convallis nec erat blandit eleifend.
+						Morbi vehicula sem quis mauris lobortis tempor quis ac eros.
-				Nam tincidunt, quam a mollis tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla.
+						Nam in elit eu quam pulvinar cursus id ut magna.
-				In convallis enim vel luctus lobortis.
+						Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
-				Praesent et tincidunt dolor.
+						Pellentesque convallis nec erat blandit eleifend.
-			</p>
+						Nam tincidunt, quam a <a href="/mollis">mollis</a> tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla.
+						In convallis enim vel luctus lobortis.
+						Praesent et tincidunt dolor.
+					</p>
+					<ul>
+						<li>Duis in dui ut tortor ultricies pretium</li>
+						<li>Aliquam feugiat bibendum tellus vel bibendum</li>
+						<li>Donec eget mi sit amet lectus ultrices vulputate</li>
+						<li>Fusce sodales arcu non diam porttitor interdum</li>
+						<li>Vestibulum sit amet suscipit ex</li>
+						<li>Cras consequat metus justo, tempus ullamcorper nibh tempor sit amet</li>
+						<li>Duis in urna neque</li>
+						<li>Cras tempus malesuada orci</li>
+						<li>Pellentesque diam magna, mattis non auctor eget, finibus non neque</li>
+					</ul>
+				</div>
+			</div>
 
 			<h2>header level 2</h2>
-			<img class="float-right" src="/assets/img/filler1.jpg">
+			<div class="two-col">
-			<p>Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus.
+				<p>
-				Vestibulum eget justo in ante feugiat varius.
+					Vestibulum dignissim tortor et tellus rutrum, quis dignissim orci rhoncus.
-				Donec efficitur nulla non mollis facilisis.
+					Vestibulum eget justo in ante feugiat varius.
-				Duis vitae feugiat tortor.
+					Donec efficitur nulla non mollis facilisis.
-				Morbi ac tempor leo.
+					Duis vitae feugiat tortor.
-				Nunc pharetra est et dui malesuada, nec auctor nisi pulvinar.
+					Morbi ac tempor leo.
-				In hac habitasse platea dictumst.
+					Nunc pharetra est et dui malesuada, nec <a href="/auctor">auctor</a> nisi pulvinar.
-				Donec magna velit, consequat non dignissim at, commodo a enim.
+					In hac habitasse platea dictumst.
-				Duis accumsan nunc at tellus vulputate consequat.
+					Donec magna velit, consequat non dignissim at, commodo a enim.
-				Nam nec lectus eget nisi venenatis condimentum sed ac massa.
+					Duis accumsan nunc at tellus vulputate consequat.
-				Interdum et malesuada fames ac ante ipsum primis in faucibus.
+					Nam nec lectus eget nisi venenatis condimentum sed ac massa.
-				Integer sem tortor, blandit non tellus ut, elementum cursus libero.
+					Interdum et malesuada fames ac ante ipsum primis in faucibus.
-				Duis fringilla aliquet justo eu interdum.
+					Integer sem tortor, blandit non tellus ut, elementum cursus libero.
-				Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor.
+					Duis fringilla aliquet justo eu interdum.
-				Vestibulum vitae euismod metus, non varius quam.
+					Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor.
-			</p>
+					Vestibulum vitae euismod metus, non varius quam.
+				</p>
+				<img src="/assets/img/filler1.jpg">
+			</div>
 
 			<h3>header level 3</h3>
-			<p>Vestibulum quis rhoncus risus, sit amet volutpat velit.
+			<p>
+				Vestibulum quis rhoncus risus, sit amet volutpat velit.
 				Cras finibus, leo vitae feugiat faucibus, sem nulla hendrerit est, elementum aliquam ligula tellus eu risus.
 				Cras tincidunt mauris ut purus vulputate aliquam ac sit amet lectus.
 				Donec maximus pretium ligula, in ultricies enim rutrum sed.
@@ -90,5 +98,6 @@
 				Proin vitae erat a nisi lobortis gravida ac vel est.
 			</p>
 		</main>
+		<footer id="footer"><!-- auto-generated by nav.js --></footer>
 	</body>
 </html>

palette/index.html

@@ -16,6 +16,9 @@
 		<!-- <meta property="og:image" content="/assets/img/logo.jpg" />
 		<meta property="og:image:alt" content="block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'" /> -->
 
+		<!-- JS -->
+		<script src="/assets/scripts/nav.js" defer></script>
+
 		<!-- CSS -->
 		<link rel="stylesheet" href="/assets/styles/main.css">
 		<link rel="stylesheet" href="/assets/styles/palette.css">
@@ -23,9 +26,7 @@
 	</head>
 	<body>
 		<header>
-			<nav>
+			<nav id="top-nav"><!-- auto-generated by nav.js --></nav>
-
-			</nav>
 		</header>
 		<main id="main">
 			<h1>Site palette</h1>
@@ -38,5 +39,6 @@
 			<p class="color" id="orange-dark">#ba4f1d</p>
 			<p class="color" id="orange-light">#e88a5c</p>
 		</main>
+		<footer id="footer"><!-- auto-generated by nav.js --></footer>
 	</body>
 </html>