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

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;
-        }
-    }
+    &.hide-sidebar-sm .left-sidebar {
+        display: none;
 
-    &: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%;
-        }
-
-        @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;
     }
 

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">