diff --git a/Resources/Private/Sass/layout/_content.scss b/Resources/Private/Sass/layout/_content.scss index 1e2dd63..55fdf54 100644 --- a/Resources/Private/Sass/layout/_content.scss +++ b/Resources/Private/Sass/layout/_content.scss @@ -43,6 +43,15 @@ body > main { } } } +@media (min-width: 1440px) { + section { + & > a:first-child + { + h1, h2, h3, h4, h5, h6 { + margin-top: $spacer * 4; + } + } + } +} li { padding: { @@ -56,12 +65,6 @@ section { font-size: 1.5em; padding-bottom: $spacer * 2; } - - & > a:first-child + { - h1, h2, h3, h4, h5, h6 { - margin-top: $spacer * 4; - } - } } article { @@ -93,3 +96,21 @@ article { } } } + +article main, +main > section { + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + + p { + text-align: justify; + + // 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; + } +} diff --git a/Resources/Private/Sass/layout/_header.scss b/Resources/Private/Sass/layout/_header.scss index 42539ae..92d932e 100644 --- a/Resources/Private/Sass/layout/_header.scss +++ b/Resources/Private/Sass/layout/_header.scss @@ -6,3 +6,9 @@ body > header { text-decoration: none; } } + +@media (max-width: 1439px) { + body > header { + padding-bottom: $spacer; + } +} diff --git a/Resources/Private/Sass/layout/page/_blogPost.scss b/Resources/Private/Sass/layout/page/_blogPost.scss index 3894455..b201de4 100644 --- a/Resources/Private/Sass/layout/page/_blogPost.scss +++ b/Resources/Private/Sass/layout/page/_blogPost.scss @@ -20,3 +20,23 @@ body.LayoutBlogPost { } } } + +@media (max-width: 1023px) { + body.LayoutBlogPost { + article, + article > main { + padding-right: 0; + } + } +} +@media (max-width: 1439px) { + body.LayoutBlogPost { + article { + padding-top: 0; + + header h1 { + padding-top: 0; + } + } + } +}