Daniel Siepmann
e5ec51161d
This provides info on mobile and desktop, but allows mobile users to easily collapse to jump to content.
127 lines
1.9 KiB
SCSS
127 lines
1.9 KiB
SCSS
body {
|
|
word-break: break-word;
|
|
}
|
|
// Basic layout of content
|
|
body > main {
|
|
@extend .row;
|
|
|
|
& > header {
|
|
@extend .col-12;
|
|
@extend .order-xl-1;
|
|
margin-bottom: $spacer * 2;
|
|
}
|
|
|
|
& > aside {
|
|
@extend .col-xl-4;
|
|
@extend .col-12;
|
|
@extend .order-xl-3;
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
& > section {
|
|
@extend .col-xl-8;
|
|
@extend .col-12;
|
|
@extend .order-xl-2;
|
|
}
|
|
|
|
& article > aside {
|
|
margin-bottom: $spacer * 2;
|
|
}
|
|
}
|
|
|
|
aside,
|
|
main > header {
|
|
h1, h2, h3, h4, h5, h6 {
|
|
padding : 0;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
section > article {
|
|
margin-bottom: 4rem;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
article {
|
|
&:first-of-type {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
margin-top: 2.75em;
|
|
|
|
main {
|
|
h1:first-of-type {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
& > header {
|
|
font-size: 1.25em;
|
|
margin-bottom: $spacer * 2;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.75em;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
main > article > main > h2:first-of-type,
|
|
main > section > h2:first-of-type,
|
|
main article h1 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
aside,
|
|
nav {
|
|
details > summary > h2 {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1439px) {
|
|
body > main > aside {
|
|
padding-bottom: 0;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
li {
|
|
margin-right: $spacer;
|
|
line-height: $spacer * 2;
|
|
}
|
|
|
|
nav li {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
article {
|
|
padding-top: 0;
|
|
|
|
header h1 {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body > main > aside {
|
|
nav li {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|