From f17d48030c6c6a1a8aeeac278b9b8500fb9ef29b Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Fri, 2 Jan 2026 17:52:59 -0800
Subject: [PATCH] skip link

---
 card-one/index.html |  2 +-
 card-two/index.html |  2 +-
 index.html          |  2 +-
 scripts/nav.js      |  9 +++++++++
 styles/main.css     |  1 +
 styles/nav.css      | 35 +++++++++++++++++++++++++++--------
 6 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/card-one/index.html b/card-one/index.html
index 94cc6ff..01f82c2 100644
--- a/card-one/index.html
+++ b/card-one/index.html
@@ -31,7 +31,7 @@
       <img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
-    <main>
+    <main id="main">
       <h1>The Travels of <span class="card">Card One</span></h1>
 
       <p><span class="card">Card one</span> has 16 total recipients. Its journey began in late December, 2025.</p>
diff --git a/card-two/index.html b/card-two/index.html
index 5b476e1..eb641b5 100644
--- a/card-two/index.html
+++ b/card-two/index.html
@@ -31,7 +31,7 @@
       <img id="logo-light" src="/img/logo-light.png" alt="blue and gold icon showing a greeting card with wings" />
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
-    <main>
+    <main id="main">
       <h1>The Travels of <span class="card">Card Two</span></h1>
 
       <p><span class="card">Card two</span> has 16 total recipients.</p>
diff --git a/index.html b/index.html
index ba11ab4..d1bfb3c 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
       <img id="logo-dark" src="/img/logo-dark.png" alt="blue and gold icon showing a greeting card with wings" />
     </header>
 
-    <main>
+    <main id="main">
       <h1>Siblinghood of the Traveling Greeting Card</h1>
 
       <p id="author">a community-building project by <a target="_blank" href="https://leecat.art">lee</a>.</p>
diff --git a/scripts/nav.js b/scripts/nav.js
index 16996ca..ecdbb80 100644
--- a/scripts/nav.js
+++ b/scripts/nav.js
@@ -22,6 +22,13 @@ const constructMenuLink = function(title, href) {
   return a;
 }
 
+const constructSkipLink = function() {
+  const a = constructMenuLink("skip", "#main");
+  a.id = "skip";
+
+  return a;
+}
+
 const constructDropdown = function() {
   const div = document.createElement("div");
   div.id = "dropdown";
@@ -31,6 +38,7 @@ const constructDropdown = function() {
   button.id="drop-button";
   button.ariaLabel = "card submenu";
   button.ariaExpanded = "false";
+  button.type = "button";
   button.setAttribute("aria-controls", "drop-content");
   div.append(button);
 
@@ -50,6 +58,7 @@ const constructDropdown = function() {
 
 const constructNav = function() {
   const nav = document.getElementById("top-nav");
+  nav.append(constructSkipLink());
   nav.append(constructMenuLink("home", "/"));
   nav.append(constructDropdown());
 }
diff --git a/styles/main.css b/styles/main.css
index e055a53..cc45f9b 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -26,6 +26,7 @@ body {
 main {
   width: 65%;
   margin: 0 auto 2rem;
+  scroll-margin-top: 1.5rem;
 }
 
 @media (max-width: 650px) {
diff --git a/styles/nav.css b/styles/nav.css
index 5a416b7..b46f73d 100644
--- a/styles/nav.css
+++ b/styles/nav.css
@@ -1,5 +1,6 @@
 nav {
   display: flex;
+  position: relative;
   gap: 1rem;
   justify-content: center;
   margin: 1rem auto;
@@ -8,16 +9,18 @@ nav {
 nav a,
 nav button {
   font-size: 1.4rem;
-  border: 1px solid;
+  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 a,
+  nav button {
     font-size: 1.1rem;
   }
 }
@@ -33,10 +36,26 @@ nav button {
 
 nav a:focus-visible,
 nav button:focus-visible {
-  outline: none;
-  color: var(--color-bg);
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
+  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;
 }
 
 #current-page {
@@ -50,7 +69,7 @@ nav ul {
   position: absolute;
   z-index: 1;
   margin: 0 0 0 1rem;
-  min-width: 8rem;
+  min-width: 10rem;
 }
 
 #dropdown {
@@ -64,7 +83,7 @@ nav ul.show {
 }
 
 nav ul li {
-  margin: .25rem;
+  margin: .5rem;
 }
 
 nav ul a {