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

1 files changed, 6 insertions, 43 deletions

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 3dce3e6..03e8ea1 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -1,43 +1,9 @@
-.keep-sidebar {
-    @media (min-width: $on-phone) and (max-width: $on-tablet) {
-        --main-top-padding: 50px;
-    }
-}
-
 .article-page {
-    &.with-toolbar {
-        @media (max-width: $on-tablet) {
-            --main-top-padding: 0;
-        }
-    }
-
-    &:not(.keep-sidebar) .left-sidebar {
-        @media (max-width: $on-tablet) {
-            display: none;
-        }
-    }
-
-    .article-sidebar {
-        position: sticky;
-        top: 50px;
-        flex-shrink: 0;
-
-        @media (max-width: $on-tablet) {
-            display: none;
-        }
-
-        @media (min-width: $on-tablet) {
-            padding-left: 15px;
-            margin-left: 1%;
-        }
-
-        @media (min-width: $on-tablet) {
-            width: 25%;
-            margin-right: 1%;
-        }
+    &.hide-sidebar-sm .left-sidebar {
+        display: none;
 
-        @media (min-width: $on-desktop) {
-            width: 30%;
+        @include respond(md) {
+            display: inherit;
         }
     }
 
@@ -111,12 +77,9 @@
 #article-toolbar {
     display: flex;
     align-items: center;
+    margin: 20px 0;
 
-    @media (max-width: $on-tablet) {
-        margin: 20px 0;
-    }
-
-    @media (min-width: $on-tablet) {
+    @include respond(md) {
         display: none;
     }