switch nav to grid to hopefully fix safari layout
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB After Width: | Height: | Size: 182 KiB |
@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user