diff --git a/assets/scripts/nav.js b/assets/scripts/nav.js index a678e04..0af8aad 100644 --- a/assets/scripts/nav.js +++ b/assets/scripts/nav.js @@ -37,8 +37,6 @@ 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"; @@ -59,14 +57,7 @@ const createNav = function() { let nav = document.createElement("nav"); nav.append(createMenuLink("skip ↷", "#main", "skip to main content")); - - let div = document.createElement("div"); - - let h2 = document.createElement("h2"); - h2.innerHTML = "Beall Greenhouses"; - div.append(h2); - - div.append(createHomeLink()); + nav.append(createHomeLink()); let ul = document.createElement("ul"); @@ -76,8 +67,7 @@ const createNav = function() { ul.append(li); } - div.append(ul); - nav.append(div); + nav.append(ul); return nav; } diff --git a/assets/styles/main.css b/assets/styles/main.css index 1dac74c..6720f65 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -58,7 +58,7 @@ main { margin: 0 auto 1rem; } -@media (max-width: 750px) { +@media (max-width: 650px) { header, main { width: 92%; diff --git a/assets/styles/nav.css b/assets/styles/nav.css index cbbb8ee..5a932fc 100644 --- a/assets/styles/nav.css +++ b/assets/styles/nav.css @@ -2,34 +2,9 @@ nav { position: relative; margin: 0 auto 1.5rem; -} - -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; + display: flex; + justify-content: space-between; + align-items: flex-start; } nav a:not(:has(img)) { @@ -81,7 +56,7 @@ nav a:not(:has(img)):focus-visible { z-index: 999; } -@media (max-width: 750px) { +@media (max-width: 650px) { #skip:focus-visible { left: 5rem; } @@ -114,8 +89,6 @@ nav a:has(img):focus img { } nav ul { - grid-area: links; - justify-self: end; display: flex; justify-content: flex-end; gap: .6rem;