.site-header {
grid-area: header;
}
.site-sidebar {
grid-area: sidebar; max-width: 350px;
}
.site-content {
grid-area: content; max-width: 800px;
}
.site-footer {
grid-area: footer;
}
.footer-area1 {
grid-area: footer1;
}
.footer-area2 {
grid-area: footer2;
}
.footer-area3 {
grid-area: footer3;
}
.footer-area4 {
grid-area: footer4;
}
.site-wrapper {
display: grid; grid-template-areas: "header" "sidebar" "content" "footer"; justify-content: center;
}
.footer-wrapper {
display: grid; grid-template-areas: "footer1" "footer2" "footer3" "footer4"; justify-content: flex-start;
}
@media (min-width: 800px) {
.site-wrapper { grid-template-areas: "header" "sidebar" "content" "footer"; grid-template-columns: 800px; grid-template-rows: auto; } .footer-wrapper { display: grid; grid-template-areas: "footer1" "footer2" "footer3" "footer4"; grid-template-columns: auto; grid-template-rows: auto; }
}
@media (min-width: 800px) {
.site-wrapper { grid-template-areas: "header header header" "content content sidebar" "footer footer footer"; grid-template-columns: auto; grid-template-rows: auto; } .footer-wrapper { display: grid; grid-template-areas: "footer1 footer2 footer3" "footer4 footer4 footer4"; grid-template-columns: auto; grid-template-rows: auto; }
}
@media screen and (max-width: 799px) {
.site-nav a:not(:first-child) { display: none; } .site-nav a.navbar-hamburger { display: block; float: right; } .dropdown { display: none; } .dropdown-list { width: 100vw; } .site-sidebar { margin-bottom: 0; max-width: 100%; } .sidebar-content { margin-bottom: 0 !important; } .site-content { margin-right: 30px; margin-top: 30px; max-width: 100%; } .site-footer { left: 0; } .footer-paragraph { width: 100%; }
}
@media screen and (max-width: 799px) {
.site-nav.responsive { width: 100vw; } .site-nav.responsive a.navbar-hamburger { position: absolute; right: 0; top: 0; } .site-nav.responsive a { display: block; float: none; text-align: left; } .dropdown.responsive { display: block; width: 100vw; }
}