From 1749a9168f559b70ae53cc28e86d429e2100c92a Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Sun, 4 Oct 2020 15:58:32 +0200
Subject: [PATCH] feat: style adjustment

---
 assets/scss/grid.scss             |  2 +-
 assets/scss/partials/article.scss | 20 ++++++--------------
 assets/scss/partials/menu.scss    | 10 ++++++++--
 assets/scss/partials/sidebar.scss | 19 ++++++++++++-------
 assets/scss/variables.scss        |  5 +++++
 5 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index 1d19067..73fcdfc 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -54,7 +54,7 @@
         }
 
         @media (min-width: $on-desktop) {
-            max-width: 1200px;
+            max-width: 1050px;
 
             .left-sidebar {
                 width: 20%;
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 4f2b940..e8b9fcf 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -75,10 +75,14 @@
 }
 
 .article-title {
-    font-size: 2.4rem;
     font-weight: 600;
     margin: 10px 0;
     color: var(--card-text-color-main);
+    font-size: 2.2rem;
+
+    @media (min-width: $on-desktop-large) {
+        font-size: 2.4rem;
+    }
 
     a {
         color: var(--card-text-color-main);
@@ -88,14 +92,6 @@
         }
     }
 
-    @media (min-width: $on-desktop-large) {
-        font-size: 2.4rem;
-    }
-
-    @media (max-width: $on-desktop) {
-        font-size: 2rem;
-    }
-
     & + .article-subtitle {
         margin-top: 0;
     }
@@ -103,18 +99,14 @@
 
 .article-subtitle {
     font-weight: normal;
-    font-size: 1.8rem;
     color: var(--card-text-color-secondary);
     margin: 5px 0;
     line-height: 1.5;
 
+    font-size: 1.75rem;
     @media (min-width: $on-desktop-large) {
         font-size: 2rem;
     }
-
-    @media (max-width: $on-desktop) {
-        font-size: 1.6rem;
-    }
 }
 
 .article-time {
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index c0d7c0a..5cefeb3 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -126,7 +126,8 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    margin-top: 25px;
+    margin-top: var(--sidebar-element-separation);
+    margin-bottom: 0;
     overflow-y: auto;
 
     @media (min-width: $on-desktop-large) {
@@ -179,6 +180,11 @@
             height: 25px;
             stroke-width: 1.33;
             margin-right: 40px;
+
+            @media (max-width: $on-desktop-large) {
+                width: 20px;
+                height: 20px;
+            }
         }
 
         a {
@@ -188,7 +194,7 @@
             color: var(--body-text-color);
             font-size: 1.5rem;
 
-            @media (max-width: $on-desktop) {
+            @media (max-width: $on-desktop-large) {
                 font-size: 1.4rem;
             }
         }
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index ce546fa..8eddafc 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -12,6 +12,14 @@
     flex-direction: column;
     flex-shrink: 0;
 
+    --sidebar-avatar-size: 150px;
+    --sidebar-element-separation: 25px;
+
+    @media (max-width: $on-desktop-large) {
+        --sidebar-avatar-size: 120px;
+        --sidebar-element-separation: 20px;
+    }
+
     @media (max-width: $on-phone) {
         width: 100%;
         padding: 30px 0;
@@ -49,6 +57,7 @@
 .site-info {
     z-index: 1;
     transition: box-shadow 0.5s ease;
+
     @media (max-width: $on-phone) {
         padding: 15px 30px;
     }
@@ -56,14 +65,10 @@
     .site-avatar {
         position: relative;
         margin: 0;
-        margin-bottom: 25px;
-        width: 150px;
-        height: 150px;
+        width: var(--sidebar-avatar-size);
+        height: var(--sidebar-avatar-size);
 
-        @media (max-width: $on-desktop-large) {
-            height: 120px;
-            width: 120px;
-        }
+        margin-bottom: var(--sidebar-element-separation);
 
         .site-logo {
             width: 100%;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index d3ed0ce..14d9e07 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -6,9 +6,14 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 */
 :root {
     @media (min-width: $on-phone + 1) {
+        --main-top-padding: 35px;
+    }
+
+    @media (min-width: $on-desktop-large) {
         --main-top-padding: 50px;
     }
 
+
     --body-background: #f5f5fa;
 
     --accent-color: #34495e;