add h2 for site title

artists/hawke/index.html

@@ -46,7 +46,13 @@
           <h2>Get in touch...</h2>
           <ul>
             <li>
-              <a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio on instagram</a>
+              <a href="https://www.instagram.com/jenniferhawkestudio">@jenniferhawkestudio</a> and <a href="https://www.instagram.com/montana_hawke">@montana_hawke</a> on instagram
+            </li>
+            <li>
+              <a href="https://www.facebook.com/pugetsoundgypsy">Jennifer Hawke on facebook</a>
+            </li>
+            <li>
+              <a href="mailto:montanahawke@gmail.com?subject=Beall%20Greenhouses">email Jennifer Hawke</a>
             </li>
           </ul>
         </div>

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)) {
@@ -39,6 +64,13 @@ nav a:not(:has(img)):focus-visible {
 	height: 1px;
 	overflow: hidden;
 	z-index: -99;
+  background-color: var(--color-bg);
+}
+
+@media (any-hover: hover) {
+  #skip:hover {
+    background-color: var(--color-text-alt);
+  }
 }
 
 #skip:focus-visible {
@@ -49,9 +81,9 @@ nav a:not(:has(img)):focus-visible {
 	z-index: 999;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   #skip:focus-visible {
-    left: 6rem;
+    left: 5rem;
   }
 }
 
@@ -82,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;