From 634e6ce96be8c0eabf3bc6465174e0200ca67853 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Mon, 7 Sep 2020 11:34:28 +0200
Subject: [PATCH] feat: improve top padding and article toolbar style

---
 assets/scss/partials/layout/article.scss | 6 +++++-
 assets/scss/partials/sidebar.scss        | 2 +-
 assets/scss/style.scss                   | 5 +----
 assets/scss/variables.scss               | 4 ++++
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 2fc976d..f2c60ec 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/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) {
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index b9d8721..973e8ea 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/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;
     }
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 79ebe2b..3c9c1cd 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -52,10 +52,7 @@ main.main {
     padding: 0 15px;
     max-width: 100%;
     flex-grow: 1;
-
-    @media (min-width: $on-phone + 1) {
-        padding-top: 50px;
-    }
+    padding-top: var(--main-top-padding);
 }
 
 .main-grid {
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 13469bb..a02ebd6 100644
--- a/assets/scss/variables.scss
+++ b/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;