feat(scss): improve 2 column style

assets/scss/grid.scss

@@ -0,0 +1,119 @@
+.container {
+    margin-left: auto;
+    margin-right: auto;
+
+    &.extended {
+        @media (min-width: $on-phone) {
+            max-width: 800px;
+
+            .left-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-tablet) {
+            max-width: 972px;
+
+            .right-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-desktop) {
+            max-width: 1200px;
+
+            .left-sidebar {
+                width: 20%;
+            }
+
+            .right-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-desktop-large) {
+            max-width: 1536px;
+
+            .left-sidebar {
+                width: 15%;
+            }
+        }
+    }
+
+    &.compact {
+        @media (min-width: $on-phone) {
+            max-width: 800px;
+
+            .left-sidebar {
+                width: 25%;
+            }
+        }
+
+        @media (min-width: $on-tablet) {
+            max-width: 972px;
+        }
+
+        @media (min-width: $on-desktop) {
+            max-width: 1200px;
+
+            .left-sidebar {
+                width: 20%;
+            }
+        }
+
+        @media (min-width: $on-desktop-large) {
+            max-width: 1300px;
+        }
+    }
+}
+
+.flex {
+    display: flex;
+    flex-direction: row;
+
+    &.column {
+        flex-direction: column;
+    }
+
+    &.on-phone--column {
+        @media (max-width: $on-phone) {
+            flex-direction: column;
+        }
+    }
+
+    &.align-items--flex-start {
+        align-items: flex-start;
+    }
+
+    .grow {
+        flex-grow: 1;
+    }
+
+    .do-not-shrink {
+        flex-shrink: 0;
+    }
+
+    .do-not-overflow {
+        min-width: 0;
+        flex-shrink: 1;
+        max-width: 100%;
+    }
+
+    .full-width {
+        width: 100%;
+    }
+}
+
+main.main {
+    min-width: 0;
+    padding: 0 15px;
+    max-width: 100%;
+    flex-grow: 1;
+    padding-top: var(--main-top-padding);
+}
+
+.main-grid {
+    @media (max-width: $on-phone) {
+        flex-direction: column;
+    }
+}

assets/scss/partials/sidebar.scss

@@ -23,19 +23,10 @@
     }
 
     @media (min-width: $on-phone + 1) {
-        width: 25%;
         margin-right: 1%;
         padding: var(--main-top-padding) 15px;
         max-height: 100vh;
     }
-
-    @media (min-width: $on-desktop) {
-        width: 20%;
-    }
-
-    @media (min-width: $on-desktop-large) {
-        width: 15%;
-    }
 }
 
 .right-sidebar {
@@ -50,14 +41,9 @@
     }
 
     @media (min-width: $on-tablet) {
-        width: 25%;
         margin-left: 1%;
         padding-top: 50px;
     }
-
-    @media (min-width: $on-desktop + 1) {
-        width: 25%;
-    }
 }
 
 .site-info {

assets/scss/style.scss

@@ -8,6 +8,7 @@
 
 @import "breakpoints.scss";
 @import "variables.scss";
+@import "grid.scss";
 
 @import "external/normalize.scss";
 
@@ -41,80 +42,6 @@ a {
     }
 }
 
-.container {
-    margin-left: auto;
-    margin-right: auto;
-
-    &.extended {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-        }
-
-        @media (min-width: $on-tablet) {
-            max-width: 972px;
-        }
-
-        @media (min-width: $on-desktop) {
-            max-width: 1200px;
-        }
-
-        @media (min-width: $on-desktop-large) {
-            max-width: 1536px;
-        }
-    }
-}
-
-main.main {
-    min-width: 0;
-    padding: 0 15px;
-    max-width: 100%;
-    flex-grow: 1;
-    padding-top: var(--main-top-padding);
-}
-
-.main-grid {
-    @media (max-width: $on-phone) {
-        flex-direction: column;
-    }
-}
-
-.flex {
-    display: flex;
-    flex-direction: row;
-
-    &.column {
-        flex-direction: column;
-    }
-
-    &.on-phone--column {
-        @media (max-width: $on-phone) {
-            flex-direction: column;
-        }
-    }
-
-    &.align-items--flex-start {
-        align-items: flex-start;
-    }
-
-    .grow {
-        flex-grow: 1;
-    }
-
-    .do-not-shrink {
-        flex-shrink: 0;
-    }
-
-    .do-not-overflow {
-        min-width: 0;
-        flex-shrink: 1;
-        max-width: 100%;
-    }
-
-    .full-width {
-        width: 100%;
-    }
-}
-
 .alert {
     position: fixed;
     right: 20px;

layouts/_default/baseof.html

@@ -2,7 +2,7 @@
 <html lang="{{ .Site.LanguageCode }}">
     {{- partial "head/head.html" . -}}
     <body class="{{ block `body-class` . }}{{ end }}">
-        <div class="container extended flex on-phone--column align-items--flex-start {{ block `container-class` . }}{{end}}">
+        <div class="container flex on-phone--column align-items--flex-start {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }} {{ block `container-class` . }}{{end}}">
             {{ partial "sidebar/left.html" . }}
             <main class="main full-width">
                 {{- block "main" . }}{{- end }}