Simplified media queries
This commit is contained in:
parent
f4818a5a31
commit
aeb2e68f34
@ -100,8 +100,11 @@ header .buttonList {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* smallest */
|
||||
@media screen and not (min-width: 67rem) {
|
||||
@media screen and not (min-width: 60rem) {
|
||||
aside {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
nav .buttonListWrap {
|
||||
position: relative;
|
||||
}
|
||||
@ -127,35 +130,31 @@ header .buttonList {
|
||||
var(--background) 100%);
|
||||
}
|
||||
|
||||
nav > .buttonListWrap:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav > .buttonListWrap:last-child {
|
||||
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) {
|
||||
#contentWrap {
|
||||
display: grid;
|
||||
grid-gap: 2rem;
|
||||
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) {
|
||||
|
Loading…
Reference in New Issue
Block a user