From 58e8fadafe0df84da77d5c6f7d933cdc21a725cf Mon Sep 17 00:00:00 2001
From: k <68973000+moll-y@users.noreply.github.com>
Date: Sat, 12 Jun 2021 04:32:54 -0500
Subject: [PATCH] feat: change horizontal scrollbar styles (#211)

* feat: change horizontal scrollbar styles

Change the horizontal scrollbar styles in Archives page following the
dark and light themes styles.  This horizontal scrollbar is at the top
of the Archives page. When I visit this page, the scrollbar stole my
attention. Unfortunately, it's the client (our browser) who decides its
styles;  this change is introduced to avoid that situation.

Co-authored-by: Miguel Angel <man98@me.com>

* remove scrollbar height and border-radius

In order to match the theme presentation
(https://i.imgur.com/cCiHOGS.jpg), the previous defined `height: 7px` and
`border-radius: 10px` for the scrollbar have been deleted.

* fix: set the horizontal scrollbar's height and width to `auto`

In Firefox the horizontal scrollbar looks very small. With a width set
to `auto`, it looks bigger and better. In Chromium, without an automatic
height, the new color changes do not appear.

Now the horizontal scrollbar looks consistent in both chromium and firefox.

* style: format list.scss

Co-authored-by: Miguel Angel <man98@me.com>
Co-authored-by: Jimmy Cai <github@jimmycai.com>
Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
---
 assets/scss/partials/layout/list.scss | 18 ++++++++++++++++++
 assets/scss/variables.scss            |  5 +++++
 2 files changed, 23 insertions(+)

diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index 1a0e346..bcb276c 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@@ -52,6 +52,24 @@
     margin-bottom: var(--section-separation);
     overflow-x: auto;
 
+    /* scrollbar styles for Firefox */
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    /* scrollbar styles for Chromium */
+    &::-webkit-scrollbar {
+        height: auto;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: var(--scrollbar-thumb);
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: var(--scrollbar-track);
+    }
+    /**/
+
     .article-list--tile {
         display: flex;
         padding-bottom: 15px;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index cba32e5..f261f41 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -36,12 +36,17 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 
     --section-separation: 40px;
 
+    --scrollbar-thumb: hsl(0, 0%, 85%);
+    --scrollbar-track: var(--body-background);
+
     [data-scheme="dark"] {
         --body-background: #303030;
         --accent-color: #ecf0f1;
         --accent-color-darker: #bdc3c7;
         --accent-color-text: #000;
         --body-text-color: rgba(255, 255, 255, 0.7);
+        --scrollbar-thumb: #424242;
+        --scrollbar-track: var(--body-background);
     }
 }