switch nav to grid to hopefully fix safari layout

This commit is contained in:
2026-01-16 11:10:54 -08:00
parent 5748937739
commit a52b6f7ef4
2 changed files with 13 additions and 7 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 183 KiB

After

Width:  |  Height:  |  Size: 182 KiB

View File

@ -2,9 +2,10 @@
nav { nav {
position: relative; position: relative;
margin: 0 auto 1.5rem; margin: 0 auto 1.5rem;
display: flex; display: grid;
justify-content: space-between; grid-template: "logo nav";
align-items: flex-start; grid-template-rows: 6.75rem;
grid-template-columns: 6.75rem auto;
background-image: url("/assets/img/greenhouse.jpg"); background-image: url("/assets/img/greenhouse.jpg");
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -65,9 +66,8 @@ nav a:not(:has(img)):focus-visible {
} }
nav img { nav img {
max-height: 6.75rem; max-height: 100%;
max-width: 100%; margin: 0;
margin: 0 auto;
border-radius: 2rem; border-radius: 2rem;
border: .2rem solid var(--color-accent); border: .2rem solid var(--color-accent);
} }
@ -80,6 +80,11 @@ nav img {
} }
} }
nav a:has(img) {
grid-area: logo;
justify-self: start;
}
nav a:has(img):focus { nav a:has(img):focus {
border-radius: 2rem; border-radius: 2rem;
outline-offset: .2rem; outline-offset: .2rem;
@ -91,8 +96,9 @@ nav a:has(img):focus img {
} }
nav ul { nav ul {
grid-area: nav;
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
gap: .6rem; gap: .6rem;
align-items: flex-end; align-items: flex-end;
flex-flow: column nowrap; flex-flow: column nowrap;