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/breakpoints.scss

@@ -1,4 +1,17 @@
-$on-phone: 812px;
+$breakpoints: (
-$on-tablet: 1024px;
+    sm: 640px,
-$on-desktop: 1519px;
+    md: 768px,
-$on-desktop-large: 1920px;
+    lg: 1024px,
+    xl: 1280px,
+    2xl: 1536px,
+);
+
+@mixin respond($breakpoint) {
+    @if not map-has-key($breakpoints, $breakpoint) {
+        @warn "'#{$breakpoint}' is not a valid breakpoint";
+    } @else {
+        @media (min-width: map-get($breakpoints, $breakpoint)) {
+            @content;
+        }
+    }
+}

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) {
+        @include respond(md) {
-            max-width: 800px;
+            max-width: 1024px;
-
+            --left-sidebar-max-width: 25%;
-            .left-sidebar {
+            --right-sidebar-max-width: 30%;
-                width: 25%;
-            }
         }
 
-        @media (min-width: $on-tablet) {
+        @include respond(lg) {
-            max-width: 972px;
+            max-width: 1280px;
-
+            --left-sidebar-max-width: 20%;
-            .right-sidebar {
+            --right-sidebar-max-width: 30%;
-                width: 25%;
-            }
         }
 
-        @media (min-width: $on-desktop) {
+        @include respond(xl) {
-            max-width: 1200px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-
-            .right-sidebar {
-                width: 25%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
             max-width: 1536px;
-
+            --left-sidebar-max-width: 15%;
-            .left-sidebar {
+            --right-sidebar-max-width: 25%;
-                width: 15%;
-            }
         }
     }
 
     &.compact {
-        @media (min-width: $on-phone) {
+        @include respond(md) {
-            max-width: 800px;
+            --left-sidebar-max-width: 25%;
-
+            max-width: 768px;
-            .left-sidebar {
-                width: 25%;
-            }
         }
 
-        @media (min-width: $on-tablet) {
+        @include respond(lg) {
-            max-width: 972px;
+            max-width: 1024px;
+            --left-sidebar-max-width: 20%;
         }
 
-        @media (min-width: $on-desktop) {
+        @include respond(xl) {
-            max-width: 1050px;
+            max-width: 1280px;
-
-            .left-sidebar {
-                width: 20%;
-            }
-        }
-
-        @media (min-width: $on-desktop-large) {
-            max-width: 1300px;
         }
     }
 }
@@ -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;
+    }
 }

assets/scss/partials/article.scss

@@ -24,14 +24,14 @@
         .article-image {
             img {
                 width: 100%;
-                height: 200px;
+                height: 150px;
                 object-fit: cover;
 
-                @media (max-width: $on-tablet) {
+                @include respond(md) {
-                    height: 150px;
+                    height: 200px;
                 }
 
-                @media (min-width: $on-desktop-large) {
+                @include respond(xl) {
                     height: 250px;
                 }
             }
@@ -62,7 +62,7 @@
     color: var(--card-text-color-main);
     font-size: 2.2rem;
 
-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
         font-size: 2.4rem;
     }
 
@@ -86,7 +86,7 @@
     line-height: 1.5;
 
     font-size: 1.75rem;
-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
         font-size: 2rem;
     }
 }
@@ -135,10 +135,10 @@
     border-radius: var(--card-border-radius);
     box-shadow: var(--shadow-l1);
     background-color: var(--card-background);
-    --image-size: 60px;
+    --image-size: 50px;
 
-    @media (max-width: $on-tablet) {
+    @include respond(md) {
-        --image-size: 50px;
+        --image-size: 60px;
     }
 
     & + .pagination {
@@ -165,10 +165,10 @@
 
         .article-title {
             margin: 0;
-            font-size: 1.8rem;
+            font-size: 1.6rem;
 
-            @media (max-width: $on-tablet) {
+            @include respond(md) {
-                font-size: 1.6rem;
+                font-size: 1.8rem;
             }
         }
 
@@ -242,20 +242,20 @@
             flex-direction: column;
             justify-content: flex-end;
             z-index: 2;
-            padding: 20px;
+            padding: 15px;
 
-            @media (max-width: $on-phone) {
+            @include respond(sm) {
-                padding: 15px;
+                padding: 20px;
             }
         }
 
         .article-title {
-            font-size: 2.2rem;
+            font-size: 2rem;
             font-weight: 500;
             color: var(--card-text-color-main);
 
-            @media (max-width: $on-phone) {
+            @include respond(sm) {
-                font-size: 2rem;
+                font-size: 2.2rem;
             }
         }
     }

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 {
+    &.hide-sidebar-sm .left-sidebar {
-        @media (max-width: $on-tablet) {
+        display: none;
-            --main-top-padding: 0;
-        }
-    }
 
-    &:not(.keep-sidebar) .left-sidebar {
+        @include respond(md) {
-        @media (max-width: $on-tablet) {
+            display: inherit;
-            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%;
-        }
-
-        @media (min-width: $on-desktop) {
-            width: 30%;
         }
     }
 
@@ -111,12 +77,9 @@
 #article-toolbar {
     display: flex;
     align-items: center;
+    margin: 20px 0;
 
-    @media (max-width: $on-tablet) {
+    @include respond(md) {
-        margin: 20px 0;
-    }
-
-    @media (min-width: $on-tablet) {
         display: none;
     }
 

assets/scss/partials/menu.scss

@@ -106,9 +106,10 @@
     z-index: 2;
     cursor: pointer;
 
-    @media (min-width: $on-phone + 1) {
+    @include respond(md) {
         display: none;
     }
+
     outline: none;
 
     &.is-active {
@@ -126,67 +127,58 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    margin-top: var(--sidebar-element-separation);
     margin-bottom: 0;
     overflow-y: auto;
     flex-grow: 1;
-    font-size: 1.5rem;
+    font-size: 1.4rem;
 
-    @media (min-width: $on-desktop-large) {
+    background-color: var(--card-background);
-        margin-top: 30px;
+    margin-top: 0;
+    padding: 15px 0;
+    box-shadow: var(--shadow-l1);
+    display: none;
+
+    &.show {
+        display: block;
     }
 
-    @media (max-width: $on-phone) {
+    @include respond(md) {
-        background-color: var(--card-background);
-        margin-top: 0;
-        padding: 15px 0;
-        box-shadow: var(--shadow-l1);
-        display: none;
-
-        &.show {
-            display: block;
-        }
-    }
-
-    @media (min-width: $on-phone + 1) {
         align-items: flex-end;
+        display: flex;
+        background-color: transparent;
+        padding: 0;
+        box-shadow: none;
+        margin-top: var(--sidebar-element-separation);
+    }
+
+    @include respond(xl) {
+        margin-top: 30px;
     }
 
     li {
         position: relative;
         vertical-align: middle;
-        padding: 10px 0;
+        padding: 10px 30px;
 
         &:not(:last-of-type) {
             margin-bottom: 15px;
 
-            @media (min-width: $on-desktop-large) {
+            @include respond(xl) {
                 margin-bottom: 20px;
             }
         }
 
-        @media (max-width: $on-phone) {
+        @include respond(md) {
-            padding: 10px 30px;
+            width: 100%;
-        }
-
-        @media (min-width: $on-phone + 1) and (max-width: ($on-desktop - 1)) {
             padding: 10px 0;
         }
 
-        @media (min-width: $on-phone + 1) {
-            width: 100%;
-        }
-
         svg {
-            width: 25px;
-            height: 25px;
             stroke-width: 1.33;
             margin-right: 40px;
 
-            @media (max-width: $on-desktop-large) {
+            width: 20px;
-                width: 20px;
+            height: 20px;
-                height: 20px;
-            }
         }
 
         a {
@@ -194,10 +186,6 @@
             display: inline-flex;
             align-items: center;
             color: var(--body-text-color);
-
-            @media (max-width: $on-desktop-large) {
-                font-size: 1.4rem;
-            }
         }
 
         span {

assets/scss/partials/sidebar.scss

@@ -1,7 +1,7 @@
 .sidebar {
     padding: 0 15px;
     &.sticky {
-        @media (min-width: ($on-phone + 1)) {
+        @include respond(md) {
             position: sticky;
         }
     }
@@ -11,44 +11,41 @@
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
+    align-self: stretch;
 
-    --sidebar-avatar-size: 150px;
+    width: 100%;
-    --sidebar-element-separation: 25px;
+    padding: 30px 0 15px 0;
+    max-width: none;
 
-    @media (max-width: $on-desktop-large) {
+    --sidebar-avatar-size: 120px;
-        --sidebar-avatar-size: 120px;
+    --sidebar-element-separation: 20px;
-        --sidebar-element-separation: 20px;
+
+    @include respond(md) {
+        width: auto;
+        margin-right: 1%;
+        padding: var(--main-top-padding) 15px;
+        max-height: 100vh;
     }
 
-    @media (max-width: $on-phone) {
+    @include respond(2xl) {
-        width: 100%;
+        --sidebar-avatar-size: 140px;
-        padding: 30px 0;
+        --sidebar-element-separation: 25px;
-        max-width: none;
     }
 
     &.sticky {
         top: 0;
     }
-
-    @media (min-width: $on-phone + 1) {
-        margin-right: 1%;
-        padding: var(--main-top-padding) 15px;
-        max-height: 100vh;
-    }
 }
 
 .right-sidebar {
     flex-shrink: 0;
+    display: none;
 
     &.sticky {
         top: 0;
     }
 
-    @media (max-width: $on-desktop - 1) {
+    @include respond(lg) {
-        display: none;
-    }
-
-    @media (min-width: $on-tablet) {
         margin-left: 1%;
         padding-top: var(--main-top-padding);
     }
@@ -58,8 +55,10 @@
     z-index: 1;
     transition: box-shadow 0.5s ease;
 
-    @media (max-width: $on-phone) {
+    padding: 15px 30px;
-        padding: 15px 30px;
+
+    @include respond(md) {
+        padding: 0;
     }
 
     .site-avatar {
@@ -79,9 +78,9 @@
 
         .emoji {
             position: absolute;
-            width: 50px;
+            width: 40px;
-            height: 50px;
+            height: 40px;
-            line-height: 50px;
+            line-height: 40px;
             border-radius: 100%;
             bottom: 0;
             right: 0;
@@ -90,20 +89,20 @@
             background-color: var(--card-background);
             box-shadow: var(--shadow-l2);
 
-            @media (max-width: $on-desktop-large) {
+            @include respond(2xl) {
-                width: 40px;
+                width: 50px;
-                height: 40px;
+                height: 50px;
-                line-height: 40px;
+                line-height: 50px;
             }
         }
     }
 
     .site-name {
         color: var(--accent-color);
-        font-size: 2.4rem;
         margin: 0;
+        font-size: 1.8rem;
 
-        @media (max-width: $on-desktop-large) {
+        @include respond(2xl) {
             font-size: 2rem;
         }
     }
@@ -112,10 +111,10 @@
         color: var(--body-text-color);
         font-weight: normal;
         margin: 10px 0;
-        font-size: 1.8rem;
+        font-size: 1.6rem;
 
-        @media (max-width: $on-desktop-large) {
+        @include respond(2xl) {
-            font-size: 1.6rem;
+            font-size: 1.8rem;
         }
     }
 }

assets/scss/variables.scss

@@ -17,11 +17,11 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Global style
 */
 :root {
-    @media (min-width: $on-phone + 1) {
+    @include respond(md) {
         --main-top-padding: 35px;
     }
 
-    @media (min-width: $on-desktop-large) {
+    @include respond(xl) {
         --main-top-padding: 50px;
     }
 
@@ -75,17 +75,20 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --card-border-radius: 10px;
 
-    --card-padding: 30px;
+    --card-padding: 20px;
-    @media (max-width: $on-desktop-large) {
+
+    @include respond(md) {
         --card-padding: 25px;
     }
-    @media (max-width: $on-tablet) {
+
-        --card-padding: 20px;
+    @include respond(xl) {
+        --card-padding: 30px;
     }
 
-    --small-card-padding: 25px;
+    --small-card-padding: 25px 20px;
-    @media (max-width: $on-tablet) {
+
-        --small-card-padding: 25px 20px;
+    @include respond(md) {
+        --small-card-padding: 25px;
     }
 
     [data-scheme="dark"] {
@@ -103,10 +106,12 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     --article-font-family: var(--base-font-family);
-    --article-font-size: 1.7rem;
+    --article-font-size: 1.6rem;
-    @media (max-width: $on-tablet) {
+
-        --article-font-size: 1.6rem;
+    @include respond(md) {
+        --article-font-size: 1.7rem;
     }
+
     --article-line-height: 1.85;
 }
 

layouts/_default/single.html

@@ -1,4 +1,4 @@
-{{ define "body-class" }}article-page keep-sidebar{{ end }}
+{{ define "body-class" }}article-page{{ end }}
 {{ define "main" }}
     {{ partial "article/article.html" . }}
 

layouts/post/single.html

@@ -1,4 +1,4 @@
-{{ define "container-class" }}article-page with-toolbar{{ end }}
+{{ define "container-class" }}article-page with-toolbar hide-sidebar-sm{{ end }}
 {{ define "main" }}
     <div id="article-toolbar">
         <a href="{{ .Site.BaseURL }}" class="back-home">