From 752d21b50064ca0597cceded6f362161df0f7aa6 Mon Sep 17 00:00:00 2001
From: Bao Le <127121163+BaoLe106@users.noreply.github.com>
Date: Thu, 17 Aug 2023 22:22:40 +0800
Subject: [PATCH] Modify left column (#75)

---
 resources/blog.scss    | 13 ++++++++-----
 resources/darkmode.css | 11 ++++++++---
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/resources/blog.scss b/resources/blog.scss
index 9ba7e11..517e5be 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -36,7 +36,6 @@
     color: green;
     font-weight: bold;
     background-color: lightgreen;
-
     .sidebar-icon {
         color: green;
     }
@@ -181,6 +180,7 @@
 .left-sidebar-item {
     display: flex;
     align-items: center;
+    border-radius: .5em;
 
     .sidebar-icon {
         font-size: large;
@@ -278,7 +278,6 @@
         padding: 0.8em 0.2em 0.8em 0.2em;
         display: inline-block;
         flex: 1;
-        border-radius: 8px;
 
         .sidebar-icon {
             display: none;
@@ -290,6 +289,7 @@
         margin-bottom: 1em;
         border-radius: 7px;
         display: flex;
+        background: inherit;
     }
 
     .blog-box {
@@ -305,6 +305,11 @@
 
 @media (min-width: 800px) {
     .left-sidebar-item {
+        margin-bottom: 10px;
+        margin-left: 10px;
+        border: 1px solid lightgray;
+        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+        background-color: white;
         padding: 0.8em 0.2em 0.8em 1em;
     }
 
@@ -345,9 +350,7 @@
         height: 100%;
         margin-top: -4em;
         padding-top: 4em;
-        border-right: 1px solid lightgray;
-        box-shadow: 0px -10px 2px 0px rgb(0 0 0 / 50%);
-        background: white;
+        border-right: 1px;
     }
 
     .feed-table {
diff --git a/resources/darkmode.css b/resources/darkmode.css
index bff07e2..47c03f5 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -1892,6 +1892,10 @@ noscript #noscript {
 .middle-content .post .title a:hover {
     color: rgb(255, 70, 70) !important;
 }
+.left-sidebar-item {
+    border-color: rgb(60, 65, 68);
+    background-color: rgb(24, 26, 27);
+}
 .left-sidebar-item.active {
     color: rgb(114, 255, 114);
     background-color: rgb(40, 111, 17);
@@ -1966,10 +1970,11 @@ noscript #noscript {
 }
 @media (min-width: 800px) {
     .left-sidebar {
-        border-right-color: rgb(60, 65, 68);
-        box-shadow: rgba(0, 0, 0, 0.5) 0px -10px 2px 0px;
+        /* border-right-color: rgb(60, 65, 68); */
+        /* box-shadow: rgba(0, 0, 0, 0.5) 0px -10px 2px 0px; */
         background-image: initial;
-        background-color: rgb(24, 26, 27);
+        
+        /* background-color: rgb(24, 26, 27); */
     }
     .blog-box {
         border-left-color: rgb(60, 65, 68);