add h2 for site title

assets/scripts/nav.js

@@ -37,6 +37,8 @@ const createHomeLink = function() {
   let a = document.createElement("a");
   a.href = "/";
   a.ariaLabel = "Beall Greenhouses home";
+  a.id = "home";
+
   if (path === "/") {
     a.id = "current-page";
     a.title = "Beall Greenhouses home";
@@ -57,7 +59,13 @@ const createNav = function() {
   let nav = document.createElement("nav");
 
   nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
-  nav.append(createHomeLink());
+
+  let div = document.createElement("div");
+  div.append(createHomeLink());
+
+  let h2 = document.createElement("h2");
+  h2.innerHTML = "Beall Greenhouses";
+  div.append(h2);
 
   let ul = document.createElement("ul");
 
@@ -67,7 +75,8 @@ const createNav = function() {
     ul.append(li);
   }
 
-  nav.append(ul);
+  div.append(ul);
+  nav.append(div);
 
   return nav;
 }

assets/styles/main.css

@@ -58,7 +58,7 @@ main {
   margin: 0 auto 1rem;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   header,
   main {
     width: 92%;

assets/styles/nav.css

@@ -2,9 +2,34 @@
 nav {
   position: relative;
   margin: 0 auto 1.5rem;
-  display: flex;
+}
-  justify-content: space-between;
+
-  align-items: flex-start;
+nav div {
+  display: grid;
+  grid-template:
+    "home title links";
+  row-gap: 1rem;
+}
+
+@media (max-width: 650px) {
+  nav div {
+    grid-template:
+      "title title"
+      "home links";
+  }
+}
+
+#home {
+  grid-area: home;
+  justify-self: start;
+}
+
+nav h2 {
+  grid-area: title;
+  border: none;
+  text-align: center;
+  align-self: center;
+  margin: 0;
 }
 
 nav a:not(:has(img)) {
@@ -56,7 +81,7 @@ nav a:not(:has(img)):focus-visible {
 	z-index: 999;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   #skip:focus-visible {
     left: 5rem;
   }
@@ -89,6 +114,8 @@ nav a:has(img):focus img {
 }
 
 nav ul {
+  grid-area: links;
+  justify-self: end;
   display: flex;
   justify-content: flex-end;
   gap: .6rem;