new logo and new header generation

assets/scripts/nav.js

@@ -25,22 +25,39 @@ const createMenuLink = function(title, href, tooltip) {
   a.innerHTML = title;
   a.title = tooltip;
   a.ariaLabel = tooltip;
-  if (path === href) a.id = "current-page";
+  if (href === "#main") a.id = "skip";
+  else if (href === path) a.id = "current-page";
 
   return a;
 }
 
-const createSkipLink = function() {
-  let a = createMenuLink("skip ↷", "#main", "skip to main content");
-  a.id = "skip";
+const createHomeLink = function() {
+  let path = window.location.pathname;
+
+  let a = document.createElement("a");
+  a.href = "/";
+  a.ariaLabel = "Beall Greenhouses home";
+  if (path === "/") {
+    a.id = "current-page";
+    a.title = "Beall Greenhouses home";
+  } else {
+    a.title = "↩ Beall Greenhouses home"
+  }
+
+  let logo = document.createElement("img");
+  logo.src = "/assets/img/logo.jpg";
+  logo.alt = "block print in black and orange of a rufous hummingbird in flight with tail flared. the hummingbird holds a banner that reads 'become ungovernable.'"
+
+  a.append(logo);
+
   return a;
 }
 
-const populateNav = function() {
-  let nav = document.getElementById("top-nav");
+const createNav = function() {
+  let nav = document.createElement("nav");
 
-  nav.append(createSkipLink());
-  nav.append(createMenuLink("↩ home", "/", "home page for the Beall Greenhouses"));
+  nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
+  nav.append(createHomeLink());
 
   let ul = document.createElement("ul");
 
@@ -51,9 +68,12 @@ const populateNav = function() {
   }
 
   nav.append(ul);
+
+  return nav;
 }
 
-populateNav();
+let header = document.querySelector("header");
+header.append(createNav());
 
 /* Footer */
 const footerHTML = `

assets/styles/nav.css

@@ -7,7 +7,7 @@ nav {
   align-items: flex-start;
 }
 
-nav a {
+nav a:not(:has(img)) {
   display: inline-block;
   text-decoration: none;
   font-size: 1.2rem;
@@ -17,7 +17,7 @@ nav a {
 }
 
 @media (any-hover: hover) {
-  nav a:hover {
+  nav a:not(:has(img)):hover {
     color: var(--color-bg);
     background-color: var(--color-text-alt);
     border-color: var(--color-accent-flipped);
@@ -26,7 +26,7 @@ nav a {
   }
 }
 
-nav a:focus-visible {
+nav a:not(:has(img)):focus-visible {
   outline: solid .125rem var(--color-accent);
   outline-offset: .125rem;
 }
@@ -55,35 +55,44 @@ nav a:focus-visible {
   }
 }
 
+nav img {
+  max-height: 6.75rem;
+  max-width: 100%;
+  margin: 0 auto;
+  border-radius: 2rem;
+  border: .2rem solid var(--color-accent);
+}
+
+@media (any-hover: hover) {
+  nav img:hover {
+    border-color: var(--color-accent-flipped);
+    outline-offset: 0;
+    outline: .2rem solid var(--color-accent);
+  }
+}
+
+nav a:has(img):focus {
+  border-radius: 2rem;
+  outline-offset: .2rem;
+  outline: .2rem solid var(--color-accent);
+}
+
+nav a:has(img):focus img {
+  outline: none;
+}
+
 nav ul {
   display: flex;
   justify-content: flex-end;
-  gap: .5rem;
+  gap: .6rem;
   align-items: flex-end;
-}
-
-@media (max-width: 450px) {
-  nav ul {
-    flex-flow: column nowrap;
-  }
+  flex-flow: column nowrap;
 }
 
 nav li {
   list-style: none;
 }
 
-/* this specifically handles the home button
-we want it taking up flex container space */
-nav > #current-page {
-  visibility: hidden;
-}
-
-header img {
-  max-height: 25vh;
-  max-width: 100%;
-  margin: 0 auto;
-}
-
 /* footer */
 footer {
   width: 95%;