refactor: rewrite grid system & style changes (#231)

* refactor(WIP): add new SCSS mixin `respond`

Theme's stylesheet mixes the use of max-width and min-width for responsive design, and it's horrible.

* refactor: update variable.scss to use @mixin respond

* refactor(grid): adjust sidebar max-width

* refactor(partials/article.scss): use `@include respond`

* refactor(layout/article.scss): delete unused SCSS and migrate to `@include respond`

* Adjust left sidebar max-width on xl screen

* fix: right sidebar not sticky

* refactor(breakpoint): simplify `@mixin respond`

* refactor(breakpoints): improve warning message

* fix(breakpoint): return only the requested breakpoint

* fix: add missing padding to .article-details

assets/scss/grid.scss

@@ -2,67 +2,52 @@
     margin-left: auto;
     margin-right: auto;
 
+    .left-sidebar {
+        max-width: var(--left-sidebar-max-width);
+    }
+
+    .right-sidebar {
+        max-width: var(--right-sidebar-max-width);
+
+        /// Display right sidebar when min-width: lg
+        @include respond(lg) {
+            display: block;
+        }
+    }
+
     &.extended {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-
-            .left-sidebar {
-                width: 25%;
-            }
+        @include respond(md) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 25%;
+            --right-sidebar-max-width: 30%;
         }
 
-        @media (min-width: $on-tablet) {
-            max-width: 972px;
-
-            .right-sidebar {
-                width: 25%;
-            }
+        @include respond(lg) {
+            max-width: 1280px;
+            --left-sidebar-max-width: 20%;
+            --right-sidebar-max-width: 30%;
         }
 
-        @media (min-width: $on-desktop) {
-            max-width: 1200px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-
-            .right-sidebar {
-                width: 25%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
+        @include respond(xl) {
             max-width: 1536px;
-
-            .left-sidebar {
-                width: 15%;
-            }
+            --left-sidebar-max-width: 15%;
+            --right-sidebar-max-width: 25%;
         }
     }
 
     &.compact {
-        @media (min-width: $on-phone) {
-            max-width: 800px;
-
-            .left-sidebar {
-                width: 25%;
-            }
+        @include respond(md) {
+            --left-sidebar-max-width: 25%;
+            max-width: 768px;
         }
 
-        @media (min-width: $on-tablet) {
-            max-width: 972px;
+        @include respond(lg) {
+            max-width: 1024px;
+            --left-sidebar-max-width: 20%;
         }
 
-        @media (min-width: $on-desktop) {
-            max-width: 1050px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
-            max-width: 1300px;
+        @include respond(xl) {
+            max-width: 1280px;
         }
     }
 }
@@ -76,8 +61,9 @@
     }
 
     &.on-phone--column {
-        @media (max-width: $on-phone) {
-            flex-direction: column;
+        flex-direction: column;
+        @include respond(md) {
+            flex-direction: unset;
         }
     }
 
@@ -114,4 +100,13 @@ main.main {
 
 .main-container {
     min-height: 100vh;
-}
+    align-items: flex-start;
+
+    @include respond(md) {
+        padding: 0 10px;
+    }
+
+    @include respond(lg) {
+        padding: 0 20px;
+    }
+}