Simplified media queries

This commit is contained in:
Sasha Koshka 2022-10-09 14:40:18 -04:00
parent f4818a5a31
commit aeb2e68f34

View File

@ -100,8 +100,11 @@ header .buttonList {
padding: 1rem; padding: 1rem;
} }
/* smallest */ @media screen and not (min-width: 60rem) {
@media screen and not (min-width: 67rem) { aside {
margin-bottom: 1rem;
}
nav .buttonListWrap { nav .buttonListWrap {
position: relative; position: relative;
} }
@ -127,35 +130,31 @@ header .buttonList {
var(--background) 100%); var(--background) 100%);
} }
nav > .buttonListWrap:first-child {
text-align: center;
}
nav > .buttonListWrap:last-child { nav > .buttonListWrap:last-child {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@media screen and (min-width: 67rem) {
nav {
display: grid;
grid-grid: 1rem;
grid-template-columns: auto auto;
}
nav > .buttonListWrap:last-child {
text-align: right;
}
}
@media screen and not (min-width: 60rem) {
aside {
margin-bottom: 1rem;
}
}
@media screen and (min-width: 60rem) { @media screen and (min-width: 60rem) {
#contentWrap { #contentWrap {
display: grid; display: grid;
grid-gap: 2rem; grid-gap: 2rem;
grid-template-columns: 24rem auto; grid-template-columns: 24rem auto;
} }
nav {
display: grid;
grid-grid: 1rem;
grid-template-columns: auto auto;
}
nav > .buttonListWrap:last-child {
text-align: right;
}
} }
@media screen and not (min-width: 80rem) { @media screen and not (min-width: 80rem) {