86 lines
1.5 KiB
SCSS
86 lines
1.5 KiB
SCSS
@media (max-width: $responsive-small) {
|
|
main {
|
|
margin: 0;
|
|
}
|
|
|
|
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 {
|
|
margin-left: 0;
|
|
display: none;
|
|
&.visible {
|
|
display: block;
|
|
}
|
|
|
|
ul li a {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
section.actions .navbar-toggle {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
header#headertron {
|
|
font-size: 1.6em;
|
|
|
|
.nav {
|
|
display: block;
|
|
}
|
|
|
|
.links {
|
|
justify-content: space-evenly;
|
|
|
|
a {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $responsive-mini) {
|
|
content,
|
|
body > footer {
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
|
|
ul {
|
|
display: block;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
body > footer ul {
|
|
display: block;
|
|
margin-left: 0;
|
|
}
|
|
|
|
header#banner,
|
|
header#headertron {
|
|
padding: 0 1em 0 1em;
|
|
}
|
|
|
|
header#headertron {
|
|
font-size: 1.2em;
|
|
}
|
|
}
|
|
|
|
@media (max-width: $responsive-tiny) {
|
|
header#headertron .links {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (min-width: $responsive-big) {
|
|
header#headertron {
|
|
font-size: 3em;
|
|
}
|
|
}
|