From 021021998383f33af4f07af7cd373cb10fe51c3f Mon Sep 17 00:00:00 2001
From: k <mol.tired@gmail.com>
Date: Thu, 20 May 2021 10:45:07 -0500
Subject: [PATCH] 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>
---
 assets/scss/partials/layout/list.scss | 23 +++++++++++++++++++++++
 assets/scss/variables.scss            |  5 +++++
 2 files changed, 28 insertions(+)

diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index 1a0e346..b6bb959 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@@ -52,6 +52,29 @@
     margin-bottom: var(--section-separation);
     overflow-x: auto;
 
+    /* scrollbar styles for Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+
+    /* scrollbar styles for Chromium */
+    &::-webkit-scrollbar {
+      height: 7px;
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track {
+      border-radius: 10px;
+    }
+
+    &::-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);
     }
 }