@ -37,8 +37,6 @@ const createHomeLink = function() {
|
|||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = "/";
|
a.href = "/";
|
||||||
a.ariaLabel = "Beall Greenhouses home";
|
a.ariaLabel = "Beall Greenhouses home";
|
||||||
a.id = "home";
|
|
||||||
|
|
||||||
if (path === "/") {
|
if (path === "/") {
|
||||||
a.id = "current-page";
|
a.id = "current-page";
|
||||||
a.title = "Beall Greenhouses home";
|
a.title = "Beall Greenhouses home";
|
||||||
@ -59,14 +57,7 @@ const createNav = function() {
|
|||||||
let nav = document.createElement("nav");
|
let nav = document.createElement("nav");
|
||||||
|
|
||||||
nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
|
nav.append(createMenuLink("skip ↷", "#main", "skip to main content"));
|
||||||
|
nav.append(createHomeLink());
|
||||||
let div = document.createElement("div");
|
|
||||||
|
|
||||||
let h2 = document.createElement("h2");
|
|
||||||
h2.innerHTML = "Beall Greenhouses";
|
|
||||||
div.append(h2);
|
|
||||||
|
|
||||||
div.append(createHomeLink());
|
|
||||||
|
|
||||||
let ul = document.createElement("ul");
|
let ul = document.createElement("ul");
|
||||||
|
|
||||||
@ -76,8 +67,7 @@ const createNav = function() {
|
|||||||
ul.append(li);
|
ul.append(li);
|
||||||
}
|
}
|
||||||
|
|
||||||
div.append(ul);
|
nav.append(ul);
|
||||||
nav.append(div);
|
|
||||||
|
|
||||||
return nav;
|
return nav;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -58,7 +58,7 @@ main {
|
|||||||
margin: 0 auto 1rem;
|
margin: 0 auto 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 650px) {
|
||||||
header,
|
header,
|
||||||
main {
|
main {
|
||||||
width: 92%;
|
width: 92%;
|
||||||
|
|||||||
@ -2,34 +2,9 @@
|
|||||||
nav {
|
nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto 1.5rem;
|
margin: 0 auto 1.5rem;
|
||||||
}
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
nav div {
|
align-items: flex-start;
|
||||||
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)) {
|
nav a:not(:has(img)) {
|
||||||
@ -81,7 +56,7 @@ nav a:not(:has(img)):focus-visible {
|
|||||||
z-index: 999;
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 750px) {
|
@media (max-width: 650px) {
|
||||||
#skip:focus-visible {
|
#skip:focus-visible {
|
||||||
left: 5rem;
|
left: 5rem;
|
||||||
}
|
}
|
||||||
@ -114,8 +89,6 @@ nav a:has(img):focus img {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
grid-area: links;
|
|
||||||
justify-self: end;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: .6rem;
|
gap: .6rem;
|
||||||
|
|||||||
Reference in New Issue
Block a user