From 2bafe757fca85d2cf60efaf6c38811091c0fe313 Mon Sep 17 00:00:00 2001
From: Daniel Siepmann <coding@daniel-siepmann.de>
Date: Fri, 10 Jan 2020 12:18:48 +0100
Subject: [PATCH] Reduce spacing and improve readability on smaller screens

---
 Resources/Private/Sass/layout/_content.scss   | 33 +++++++++++++++----
 Resources/Private/Sass/layout/_header.scss    |  6 ++++
 .../Private/Sass/layout/page/_blogPost.scss   | 20 +++++++++++
 3 files changed, 53 insertions(+), 6 deletions(-)

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;
+            }
+        }
+    }
+}