145 lines
2.3 KiB
SCSS
145 lines
2.3 KiB
SCSS
// Basic layout of content
|
|
body > main {
|
|
@extend .row;
|
|
|
|
& > header {
|
|
@extend .col-12;
|
|
margin-bottom: $spacer * 2;
|
|
}
|
|
|
|
& > section {
|
|
@extend .col-xl-8;
|
|
@extend .col-12;
|
|
}
|
|
|
|
& > aside {
|
|
@extend .col-xl-4;
|
|
@extend .col-12;
|
|
|
|
nav ul {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
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 {
|
|
h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
nav {
|
|
h1 {
|
|
font-size: 1.25em;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1439px) {
|
|
body > main > aside {
|
|
margin-top: $spacer * 4;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Make main text on pages and blog posts readable
|
|
article main,
|
|
main > section {
|
|
-webkit-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
|
|
li,
|
|
p {
|
|
// SOURCE: https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
|
|
/* Warning: Needed for oldIE support, but words are broken up letter-by-letter */
|
|
word-break: break-all;
|
|
|
|
/* Non standard for webkit */
|
|
word-break: break-word;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
header p {
|
|
text-align: inherit;
|
|
}
|
|
}
|