Add responsive layout

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>

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
 );

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 {

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

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;