feat: improve top padding and article toolbar style

assets/scss/partials/layout/article.scss

@@ -1,6 +1,10 @@
 @import "variables.scss";
 
 .article-page {
+    @media (min-width: $on-phone) and (max-width: $on-tablet) {
+        --main-top-padding: 30px;
+    }
+
     .left-sidebar {
         @media (max-width: $on-tablet) {
             display: none;
@@ -99,7 +103,7 @@
     align-items: center;
 
     @media (max-width: $on-phone) {
-        margin-top: 15px;
+        margin-top: 20px;
     }
 
     @media (min-width: $on-tablet) {

assets/scss/partials/sidebar.scss

@@ -25,7 +25,7 @@
     @media (min-width: $on-phone + 1) {
         width: 25%;
         margin-right: 1%;
-        padding: 50px 15px;
+        padding: var(--main-top-padding) 15px;
         max-height: 100vh;
     }
 

assets/scss/style.scss

@@ -52,10 +52,7 @@ main.main {
     padding: 0 15px;
     max-width: 100%;
     flex-grow: 1;
-
+    padding-top: var(--main-top-padding);
-    @media (min-width: $on-phone + 1) {
-        padding-top: 50px;
-    }
 }
 
 .main-grid {

assets/scss/variables.scss

@@ -10,6 +10,10 @@ $on-desktop-large: 1920px;
 *   CSS Variables
 */
 :root {
+    @media (min-width: $on-phone + 1) {
+        --main-top-padding: 50px;
+    }
+
     --body-background: #f5f5fa;
     --accent-color: #34495e;
     --accent-color-darker: #2c3e50;