Fix bug main content not centered

Closes #494

A bit hacky but seems to work. Play with negative margins
to get the content centered and set them to
0 before the menu overlaps with the content.
This commit is contained in:
Kalle (Sendou) 2021-05-11 12:39:45 +03:00
parent eb72e234f6
commit a1b34698e1
2 changed files with 10 additions and 3 deletions

View File

@ -21,6 +21,7 @@ const Nav = () => {
return (
<Box
width={expanded ? "175px" : "60px"}
marginRight={expanded ? "-175px" : "-60px"}
as="nav"
flexShrink={0}
position="sticky"

View File

@ -29,19 +29,25 @@ header {
row-gap: 1.5rem;
column-gap: 1.5rem;
grid-template-rows: 37px 1fr 100px;
grid-template-columns: auto 1fr 175px;
grid-template-columns: auto 1fr;
min-height: 100vh;
}
@media (max-width: 1365px) {
nav {
margin-right: 0 !important;
}
}
@media (max-width: 1200px) {
#__next {
grid-template-columns: auto 1fr 0px;
grid-template-columns: auto 1fr;
}
}
@media (max-width: 991px) {
#__next {
grid-template-columns: 0px 1fr 0px;
grid-template-columns: 0px 1fr;
}
}