Reduce spacing and improve readability on smaller screens

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

Resources/Private/Sass/layout/_header.scss

@@ -6,3 +6,9 @@ body > header {
         text-decoration: none;
     }
 }
+
+@media (max-width: 1439px) {
+    body > header {
+        padding-bottom: $spacer;
+    }
+}

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