build out skip link

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() {
-  let nav = document.getElementById("top-nav");
+const createMenuLink = function(title, href, tooltip) {
   let path = window.location.pathname;
 
-  let home = document.createElement("a");
-  home.href = "/";
-  home.innerHTML = "↩ home";
-  if (path === "/") home.id = "current-page";
-  nav.append(home);
+  let a = document.createElement("a");
+  a.href = href;
+  a.innerHTML = title;
+  a.title = tooltip;
+  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");
-    a.href = item.href;
-    a.innerHTML = item.title;
-
-    if (item.href === path) a.id = "current-page";
-
-    li.append(a);
+    li.append(createMenuLink(item.title, item.href, item.tooltip));
     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 {