ds-site/Resources/Private/Sass/layout/_content.scss

136 lines
2.2 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;
white-space: nowrap;
}
nav li {
display: inline;
}
}
article {
padding-top: 0;
header h1 {
padding-top: 0;
}
}
}
// 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;
}
}