From 4db288dc392cf1bbeab17f16ea6a03321e7ff22d Mon Sep 17 00:00:00 2001
From: Daniel Siepmann <coding@daniel-siepmann.de>
Date: Fri, 13 Dec 2019 16:29:34 +0100
Subject: [PATCH] Add responsive layout

---
 Resources/Private/Layouts/Page/Default.html       |  7 +++----
 Resources/Private/Sass/_variables.scss            | 15 +++++++++++----
 .../Sass/components/_codeHighlighting.scss        |  2 +-
 Resources/Private/Sass/layout/_content.scss       |  7 +++++--
 Resources/Private/Sass/layout/_header.scss        |  6 ++++--
 5 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/Resources/Private/Layouts/Page/Default.html b/Resources/Private/Layouts/Page/Default.html
index 677ff4e..3aaf78f 100644
--- a/Resources/Private/Layouts/Page/Default.html
+++ b/Resources/Private/Layouts/Page/Default.html
@@ -10,13 +10,12 @@
     </header>
 
     <main>
-        <section>
-            {f:render(section: 'Content', arguments: _all)}
-        </section>
-
         <aside>
             {f:render(section: 'Aside', arguments: _all)}
         </aside>
+        <section>
+            {f:render(section: 'Content', arguments: _all)}
+        </section>
     </main>
 
     <footer>
diff --git a/Resources/Private/Sass/_variables.scss b/Resources/Private/Sass/_variables.scss
index f3ae4ee..24aa03b 100644
--- a/Resources/Private/Sass/_variables.scss
+++ b/Resources/Private/Sass/_variables.scss
@@ -59,8 +59,15 @@ $link-hover-color:                        $blue;
 $link-hover-decoration:                   underline;
 
 $container-max-widths: (
-  sm: 40rem,
-  md: 50rem,
-  lg: 70rem,
-  xl: 100rem
+  sm: 1023px,
+  md: 1024px,
+  lg: 1200px,
+  xl: 1440px
+);
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 1200px,
+  xl: 1440px
 );
diff --git a/Resources/Private/Sass/components/_codeHighlighting.scss b/Resources/Private/Sass/components/_codeHighlighting.scss
index f3aeed3..e9d650f 100644
--- a/Resources/Private/Sass/components/_codeHighlighting.scss
+++ b/Resources/Private/Sass/components/_codeHighlighting.scss
@@ -5,7 +5,7 @@ code {
         left: 0.5em;
         right: 0.5em;
     }
-    white-space: nowrap;
+    white-space: pre-line;
 }
 
 pre code {
diff --git a/Resources/Private/Sass/layout/_content.scss b/Resources/Private/Sass/layout/_content.scss
index 7553000..8018141 100644
--- a/Resources/Private/Sass/layout/_content.scss
+++ b/Resources/Private/Sass/layout/_content.scss
@@ -2,11 +2,14 @@ body > main {
     @extend .row;
 
     & > section {
-        @extend .col-md-8;
+        @extend .col-xl-8;
+        @extend .col-12;
     }
 
     & > aside {
-        @extend .col-md-4;
+        @extend .col-xl-4;
+        @extend .col-12;
+        @extend .order-xl-2;
     }
 }
 
diff --git a/Resources/Private/Sass/layout/_header.scss b/Resources/Private/Sass/layout/_header.scss
index de7d83f..1b3b237 100644
--- a/Resources/Private/Sass/layout/_header.scss
+++ b/Resources/Private/Sass/layout/_header.scss
@@ -4,7 +4,8 @@ body > header {
     padding-bottom: $spacer * 4;
 
     & > div {
-        @extend .col-8;
+        @extend .col-12;
+        @extend .col-sm-8;
 
         a {
             font-size: $h1-font-size;
@@ -13,7 +14,8 @@ body > header {
     }
 
     nav {
-        @extend .col-4;
+        @extend .col-12;
+        @extend .col-sm-4;
 
         padding-top: $spacer;