Adjust design

Classes/Hooks/Backend/PageLayoutHeader.php

@@ -39,6 +39,10 @@ class PageLayoutHeader
     ): string {
         $this->pageLayoutController = $pageLayoutController;
 
+        // TODO: Check whether two levels up is uid 2, which holds all blog posts
+        // To prevent rendering on non blog posts
+        // Maybe we have rootline ?
+
         $view = $this->getView();
         $view->assignMultiple([
             'record' => $this->pageLayoutController->pageinfo,

Resources/Private/Sass/_variables.scss

@@ -44,9 +44,9 @@ $body-color: #D3D7CF;
 
 $text-muted: $white-dark;
 
-$font-family-sans-serif: "Helvetica", sans-serif;
+$font-family-sans-serif:  'Montserrat', 'Avenir', 'Roboto', sans-serif;
 $font-family-serif: "Georgia", serif;
-$font-family-monospace: monospace;
+$font-family-monospace: "DejaVu Sans Mono", "Menlo", "Consolas", monospace;
 $font-family-base: $font-family-monospace;
 
 $font-size-base: 1.25rem;

Resources/Private/Sass/components/_admonition.scss

@@ -2,11 +2,12 @@ aside {
     &[class^='admonition-'] {
         border: none;
         border-left: solid $spacer / 4;
-        padding: $spacer;
+        padding: $spacer * 2;
         margin-top: $spacer * 2;
 
         h1, h2, h3, h4, h5, h6 {
             padding-top: 0;
+            letter-spacing: 1em;
         }
     }
 

Resources/Private/Sass/index.scss

@@ -1,3 +1,18 @@
+// Increases download size a lot, so better do not include for now
+// @font-face {
+//     font-family: "DejaVu Sans Mono";
+//     src: local("DejaVuSansMono"),
+//          local("DejaVu Sans Mono"),
+//          url('/typo3conf/ext/ds_site/Resources/Public/Fonts/DejaVuSansMono.ttf') format("truetype");
+// }
+// @font-face {
+//     font-family: "DejaVu Sans";
+//     src: local("DejaVuSansBold"),
+//          local("DejaVu Sans Bold"),
+//          url('/typo3conf/ext/ds_site/Resources/Public/Fonts/DejaVuSansBold.ttf') format("truetype");
+//     font-weight: bold;
+// }
+
 // Required
 @import "bootstrap/scss/functions";
 @import "variables";

Resources/Private/Sass/layout/_content.scss

@@ -1,8 +1,10 @@
+// Basic layout of content
 body > main {
     @extend .row;
 
     & > header {
         @extend .col-12;
+        margin-bottom: $spacer * 2;
     }
 
     & > section {
@@ -14,9 +16,6 @@ body > main {
         @extend .col-xl-4;
         @extend .col-12;
 
-        // For padding
-        @extend article;
-
         nav ul {
             list-style: none;
             padding-left: 0;
@@ -24,8 +23,68 @@ body > main {
     }
 }
 
+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 > 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 {
@@ -42,70 +101,26 @@ body > main {
             display: inline;
         }
     }
-}
-@media (min-width: 1440px) {
-    section {
-        & > a:first-child + {
-            h1, h2, h3, h4, h5, h6 {
-                margin-top: $spacer * 4;
-            }
-        }
-    }
-}
-
-li {
-    padding: {
-        bottom: $spacer / 2;
-        top: $spacer / 2;
-    }
-}
-
-section {
-    & > header {
-        font-size: 1.5em;
-        padding-bottom: $spacer * 2;
-    }
-}
 
     article {
-    padding: {
+        padding-top: 0;
-        top: $spacer * 2;
-        bottom: $spacer * 2;
-    }
 
-    h1, h2, h3, h4, h5, h6 {
+        header h1 {
-        margin-bottom: 0;
+            padding-top: 0;
-        padding: {
-            top: $spacer * 2;
-            bottom: $spacer;
-        }
-    }
-
-    & > header {
-        font-size: 1.25em;
-        margin-bottom: $spacer * 2;
-
-        h1, h2, h3, h4, h5, h6 {
-            margin-bottom: 0;
-            padding-bottom: 0;
-        }
-
-        p {
-            font-size: 0.75em;
-            margin: 0;
         }
     }
 }
 
+
+// Make main text on pages and blog posts readable
 article main,
 main > section {
     -webkit-hyphens: auto;
     -ms-hyphens: auto;
     hyphens: auto;
 
+    li,
     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;
@@ -113,4 +128,8 @@ main > section {
         /* Non standard for webkit */
         word-break: break-word;
     }
+
+    p {
+        text-align: justify;
+    }
 }

Resources/Private/Sass/layout/_elements.scss

@@ -1,4 +1,16 @@
 h1, h2, h3, h4, h5, h6 {
+    font-family: $font-family-sans-serif;
+    letter-spacing: 0.14em;
+    font-weight: 300;
+    word-spacing: 0.3em;
+
+    margin: 0;
+
+    padding: {
+        top: $spacer * 4;
+        bottom: $spacer * 1;
+    }
+
     small a {
         display: none;
         color: $gray-500;
@@ -39,3 +51,14 @@ img {
     max-width: 100%;
     height: auto;
 }
+
+ul {
+    padding-inline-start: inherit;
+}
+
+li {
+    padding: {
+        bottom: $spacer / 2;
+        top: $spacer / 2;
+    }
+}

Resources/Private/Sass/layout/_header.scss

@@ -1,4 +1,9 @@
 body > header {
+    font-family: $font-family-sans-serif;
+    letter-spacing: 0.5em;
+    word-spacing: 0.75em;
+    font-weight: lighter;
+
     padding-bottom: $spacer * 4;
 
     a {

Resources/Private/Sass/layout/page/_blogPost.scss

@@ -6,7 +6,6 @@ body.LayoutBlogPost {
         & > header {
             @extend .col-12;
             @extend .order-xl-1;
-            margin-bottom: 0;
         }
         & > aside {
             @extend .col-12;
@@ -29,14 +28,3 @@ body.LayoutBlogPost {
         }
     }
 }
-@media (max-width: 1439px) {
-    body.LayoutBlogPost {
-        article {
-            padding-top: 0;
-
-            header h1 {
-                padding-top: 0;
-            }
-        }
-    }
-}