57 lines
1.1 KiB
SCSS
57 lines
1.1 KiB
SCSS
@media (max-width: $responsive-small) {
|
|
main {
|
|
flex-direction: column;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-bottom: none;
|
|
margin: 0;
|
|
}
|
|
|
|
sidebar {
|
|
width: auto;
|
|
border-left: none;
|
|
border-top: 1px dashed $color-main-border;
|
|
}
|
|
|
|
header#banner {
|
|
grid-template-columns: min-content auto;
|
|
grid-template-rows: min-content auto;
|
|
grid-template-areas:
|
|
"logo actions"
|
|
"nav nav";
|
|
|
|
// Use vertical navbar under header
|
|
section.navbar {
|
|
display: none;
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
|
|
ul li a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
section.actions .navbar-toggle {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $responsive-mini) {
|
|
content {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
}
|
|
|
|
body > header {
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $responsive-tiny) {
|
|
header#banner .links {
|
|
flex-direction: column;
|
|
}
|
|
}
|