style: restyle sidebar

README.md

@@ -68,6 +68,7 @@ node tools/lqip/index.js
   - feat: TOC auto hidden/show with scrolling/hover
   - style: moving social icon from sidebar to footer
   - style: merge tag to archive page. Moving about page to footer. Hide tab, about, category.
+  - style: restyle sidebar: remove background, restyle nav.link hover effect.
 
 [theme]: https://rubygems.org/gems/jekyll-theme-chirpy
 [ci]: https://github.com/lotusk08/lotusk08.github.io/actions/workflows/ci.yml?query=event%3Apush+branch%3Amaster

_includes/sidebar.html

@@ -19,7 +19,7 @@
   <nav class="flex-column flex-grow-1 w-100 ps-0">
     <ul class="nav">
       <!-- home -->
-      <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+      <!--<li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
         <a href="{{ '/' | relative_url }}" class="nav-link">
           <i class="fa-fw fas fa-home"></i>
           <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>

_sass/abstracts/_variables.scss

@@ -1,6 +1,6 @@
 /* sidebar */
 
-$sidebar-width: 260px !default; /* the basic width */
+$sidebar-width: 240px !default; /* the basic width */
 $sidebar-width-large: 300px !default; /* screen width: >= 1650px */
 $sb-btn-gap: 0.8rem !default;
 $sb-btn-gap-lg: 1rem !default;

_sass/layout/_sidebar.scss

@@ -125,7 +125,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
     border-right: 1px solid var(--tb-border-color);
 
     li.nav-item {
-      opacity: 1;
+      opacity: 0.9;
       width: 100%;
 
       @include mx.pl-pr(1.5rem);
@@ -149,7 +149,7 @@ $sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
 
         i {
           font-size: 95%;
-          opacity: 1;
+          opacity: 0.8;
           margin-right: 1.5rem;
         }