build out skip link

about/index.html

@@ -31,7 +31,7 @@
         <img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
         <img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
       </header>
-      <main>
+      <main id="main">
         <h1>About the Beall Greenhouses</h1>
 
         <h2 id="past">Past</h2>

assets/scripts/nav.js

@@ -2,35 +2,51 @@
 const navItems = [
   {
     href: "/about/",
-    title: "ⓘ about"
+    title: "ⓘ about",
+    tooltip: "about the Beall Greenhouses"
   },
   {
     href: "/events/",
-    title: "🗓 events"
+    title: "🗓 events",
+    tooltip: "events at the Beall Greenhouses"
+  },
+  {
+    href: "/artists/",
+    title: "🖌 artists",
+    tooltip: "artists in residence at the Beall Greenhouses"
   }
 ];
 
-const populateNav = function() {
+const createMenuLink = function(title, href, tooltip) {
-  let nav = document.getElementById("top-nav");
   let path = window.location.pathname;
 
-  let home = document.createElement("a");
+  let a = document.createElement("a");
-  home.href = "/";
+  a.href = href;
-  home.innerHTML = "↩ home";
+  a.innerHTML = title;
-  if (path === "/") home.id = "current-page";
+  a.title = tooltip;
-  nav.append(home);
+  a.ariaLabel = tooltip;
+  if (path === href) a.id = "current-page";
+
+  return a;
+}
+
+const createSkipLink = function() {
+  let a = createMenuLink("skip ↷", "#main", "skip to main content");
+  a.id = "skip";
+  return a;
+}
+
+const populateNav = function() {
+  let nav = document.getElementById("top-nav");
+
+  nav.append(createSkipLink());
+  nav.append(createMenuLink("↩ home", "/", "home page for the Beall Greenhouses"));
 
   let ul = document.createElement("ul");
 
   for (const item of navItems) {
     let li = document.createElement("li");
-    let a = document.createElement("a");
+    li.append(createMenuLink(item.title, item.href, item.tooltip));
-    a.href = item.href;
-    a.innerHTML = item.title;
-
-    if (item.href === path) a.id = "current-page";
-
-    li.append(a);
     ul.append(li);
   }
 

assets/styles/nav.css

@@ -1,12 +1,14 @@
 /* top nav */
 nav {
+  position: relative;
   margin: 0 auto 1.5rem;
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
 }
 
 nav a {
-  display: block;
+  display: inline-block;
   text-decoration: none;
   font-size: 1.2rem;
   padding: 0 .25rem;
@@ -27,10 +29,37 @@ nav a:focus-visible {
   outline: solid .25rem 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: 3rem;
+  top: 1.5rem;
+	width: auto;
+	height: auto;
+	overflow: auto;
+	z-index: 999;
+}
+
 nav ul {
   display: flex;
   justify-content: flex-end;
   gap: .5rem;
+  align-items: flex-end;
+}
+
+@media (max-width: 450px) {
+  nav ul {
+    flex-flow: column nowrap;
+  }
 }
 
 nav li {

events/2025-solstice/index.html

@@ -33,7 +33,7 @@
         <img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
         <img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
       </header>
-      <main>
+      <main id="main">
         <h1>Solstice 2025 Market at the Beall Greenhouses</h1>
 
         <h2>When?</h2>

events/index.html

@@ -32,7 +32,7 @@
         <img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
         <img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
       </header>
-      <main>
+      <main id="main">
         <h1>Events at the Beall Greenhouses</h1>
 
         <ol id="events">

index.html

@@ -32,7 +32,7 @@
         <img class="dark-mode" src="/assets/img/logo-dark.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
         <img class="light-mode" src="/assets/img/logo-light.png" alt="Linework icon depicting a sunrise or sunset with two clouds, in a blue and orange color scheme">
       </header>
-      <main>
+      <main id="main">
         <h1>Markets at the Beall Greenhouses</h1>
 
         <h2>Status</h2>