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,51 +16,56 @@
 		<!-- <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">
+				<div>
+					<p>
+						Lorem <a href="/ipsum">ipsum</a> dolor sit amet, consectetur adipiscing elit.
 						Fusce libero neque, sollicitudin id scelerisque in, congue ut leo.
 						Morbi vehicula sem quis mauris lobortis tempor quis ac eros.
 						Nam in elit eu quam pulvinar cursus id ut magna.
 						Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
 						Pellentesque convallis nec erat blandit eleifend.
-				Nam tincidunt, quam a mollis tincidunt, urna urna malesuada massa, id faucibus arcu lectus sit amet nulla.
+						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 dignissim tortor et tellus rutrum, quis dignissim orci rhoncus.
 					Vestibulum eget justo in ante feugiat varius.
 					Donec efficitur nulla non mollis facilisis.
 					Duis vitae feugiat tortor.
 					Morbi ac tempor leo.
-				Nunc pharetra est et dui malesuada, nec auctor nisi pulvinar.
+					Nunc pharetra est et dui malesuada, nec <a href="/auctor">auctor</a> nisi pulvinar.
 					In hac habitasse platea dictumst.
 					Donec magna velit, consequat non dignissim at, commodo a enim.
 					Duis accumsan nunc at tellus vulputate consequat.
@@ -71,9 +76,12 @@
 					Aenean fermentum leo dignissim leo pulvinar, eu ornare mauris porttitor.
 					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>