From 4bf9d8296184dfbfed7cd165366f046342eb66ab Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Thu, 3 Sep 2020 11:42:01 +0200
Subject: [PATCH] feat: style improvement

---
 assets/scss/partials/article.scss        | 21 +++++++++++++--------
 assets/scss/partials/layout/article.scss |  8 ++++----
 assets/scss/partials/menu.scss           | 18 +++++++++++-------
 assets/scss/partials/sidebar.scss        | 18 +++++++++---------
 assets/scss/partials/widgets.scss        |  5 +++++
 assets/scss/variables.scss               |  4 ++++
 6 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 075cd7b..98d8cee 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -15,15 +15,15 @@
         .article-image {
             img {
                 width: 100%;
-                height: 250px;
+                height: 200px;
                 object-fit: cover;
 
                 @media (max-width: $on-tablet) {
                     height: 150px;
                 }
 
-                @media (max-width: $on-desktop) {
-                    height: 200px;
+                @media (min-width: $on-desktop-large) {
+                    height: 250px;
                 }
             }
         }
@@ -66,7 +66,7 @@
 }
 
 .article-title {
-    font-size: 2.4rem;
+    font-size: 2.2rem;
     font-weight: 600;
     margin: 10px 0;
     color: var(--card-text-color-main);
@@ -79,19 +79,24 @@
         }
     }
 
+    @media (min-width: $on-desktop-large) {
+        font-size: 2.4rem;
+    }
+
     @media (max-width: $on-desktop) {
-        font-size: 1.5em;
+        font-size: 2rem;
     }
 }
 
 .article-subtitle {
     font-weight: lighter;
-    font-size: 2rem;
+    font-size: 1.8rem;
     color: var(--card-text-color-secondary);
     margin: 5px 0;
     line-height: 1.5;
-    @media (max-width: $on-desktop) {
-        font-size: 1.8rem;
+
+    @media (min-width: $on-desktop-large) {
+        font-size: 2rem;
     }
 }
 
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index dfc758f..04fe444 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -46,8 +46,7 @@
                 img {
                     height: auto;
                     width: 100%;
-                    max-height: 500px;
-                    width: 100%;
+                    max-height: 50vh;
                     object-fit: cover;
                 }
             }
@@ -235,10 +234,11 @@
 
     hr {
         width: 100px;
-        margin: 40px 0;
+        margin: 40px auto;
         background: var(--card-text-color-tertiary);
-        height: 4px;
+        height: 2px;
         border: 0;
+        opacity: 0.55;
     }
 
     code {
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 1d31831..a62cb6e 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -125,7 +125,11 @@
     list-style: none;
     display: flex;
     flex-direction: column;
-    margin: 30px 0;
+    margin-top: 25px;
+
+    @media (min-width: $on-desktop-large){
+        margin-top: 30px;
+    }
 
     @media (max-width: $on-phone) {
         background-color: var(--card-background);
@@ -149,10 +153,10 @@
         padding: 10px 0;
 
         &:not(:last-of-type) {
-            margin-bottom: 20px;
+            margin-bottom: 15px;
 
-            @media (max-width: $on-desktop) {
-                margin-bottom: 10px;
+            @media (min-width: $on-desktop-large) {
+                margin-bottom: 20px;
             }
         }
 
@@ -175,9 +179,9 @@
 
             margin-right: 40px;
 
-            @media (max-width: $on-desktop) {
-                width: 30px;
-                height: 30px;
+            @media (max-width: $on-desktop-large) {
+                width: 25px;
+                height: 25px;
             }
         }
 
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 5376d82..3d2d71f 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -74,15 +74,11 @@
     .site-avatar {
         position: relative;
         margin: 0;
-        margin-bottom: 30px;
+        margin-bottom: 25px;
         width: 150px;
         height: 150px;
 
-        @media (min-width: $on-phone + 1) {
-            //margin-left: auto;
-        }
-
-        @media (max-width: $on-desktop) {
+        @media (max-width: $on-desktop-large) {
             height: 120px;
             width: 120px;
         }
@@ -107,7 +103,7 @@
             background-color: var(--card-background);
             @include box_shadow(2);
 
-            @media (max-width: $on-desktop) {
+            @media (max-width: $on-desktop-large) {
                 width: 40px;
                 height: 40px;
                 line-height: 40px;
@@ -119,6 +115,10 @@
         color: var(--accent-color);
         font-size: 2.4rem;
         margin: 0;
+
+        @media (max-width: $on-desktop-large) {
+            font-size: 2rem;
+        }
     }
 
     .site-description {
@@ -127,8 +127,8 @@
         margin: 10px 0;
         font-size: 2rem;
 
-        @media (max-width: $on-desktop) {
-            font-size: 1.8rem;
+        @media (max-width: $on-desktop-large) {
+            font-size: 1.75rem;
         }
     }
 }
diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss
index 105023e..5250048 100644
--- a/assets/scss/partials/widgets.scss
+++ b/assets/scss/partials/widgets.scss
@@ -65,6 +65,11 @@
             border-radius: var(--card-border-radius);
             @include box_shadow(1);
             display: flex;
+
+            @media (max-width: $on-desktop-large){
+                padding: 12px 20px;
+                font-size: 1.4rem;
+            }
             
             span.year {
                 flex: 1;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index ad2ded8..9d43848 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -54,6 +54,10 @@ $on-desktop-large: 1920px;
     --blockquote-border-size: 4px;
     --heading-border-size: 4px;
 
+    @media (max-width: $on-desktop-large) {
+        --content-padding: 25px;
+    }
+    
     @media (max-width: $on-tablet) {
         --content-padding: 20px;
     }