From 66901c48fcf61096955472ddfc02c638ddef2663 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Tue, 10 Sep 2024 13:14:28 +0100
Subject: [PATCH 1/4] Add webkit scrollbar styling

---
 _sass/breakpoints/_mobileup.scss | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
index e9df12d8..ecd6e01c 100755
--- a/_sass/breakpoints/_mobileup.scss
+++ b/_sass/breakpoints/_mobileup.scss
@@ -3,11 +3,31 @@ GLOBAL STYLES
 ***************/
 
 html {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 *, *:before, *:after {
-  box-sizing: inherit;
+    box-sizing: inherit;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    html {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+    }
+}
+
+::-webkit-scrollbar {
+    width: 7px;
+}
+
+::-webkit-scrollbar-track {
+      background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 30px;
 }
 
 body {

From a1acad3a028fcec5775d303ef75c5b70809bb554 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Tue, 10 Sep 2024 13:18:26 +0100
Subject: [PATCH 2/4] wrap @supports for Sass

---
 _sass/breakpoints/_mobileup.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
index ecd6e01c..41e29a87 100755
--- a/_sass/breakpoints/_mobileup.scss
+++ b/_sass/breakpoints/_mobileup.scss
@@ -10,7 +10,7 @@ html {
     box-sizing: inherit;
 }
 
-@supports not selector(::-webkit-scrollbar) {
+@supports (not selector(::-webkit-scrollbar)) {
     html {
         scrollbar-width: thin;
         scrollbar-color: rgba(0, 0, 0, 0.3) transparent;

From 5cc5e85ad926ce7f2bd3afc684c9205d32e89f20 Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Tue, 10 Sep 2024 13:25:20 +0100
Subject: [PATCH 3/4] Proper Sass @supports fix

---
 _sass/breakpoints/_mobileup.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
index 41e29a87..2c41605c 100755
--- a/_sass/breakpoints/_mobileup.scss
+++ b/_sass/breakpoints/_mobileup.scss
@@ -10,7 +10,8 @@ html {
     box-sizing: inherit;
 }
 
-@supports (not selector(::-webkit-scrollbar)) {
+// workaround Sass handling of @supports
+@supports #{'\not selector(*::-webkit-scrollbar)'} {
     html {
         scrollbar-width: thin;
         scrollbar-color: rgba(0, 0, 0, 0.3) transparent;

From d37e9428cd619dbf1c781c70646ff22e159029da Mon Sep 17 00:00:00 2001
From: Chris Buckley <chris@cmbuckley.co.uk>
Date: Thu, 12 Sep 2024 13:15:32 +0000
Subject: [PATCH 4/4] Add styling for scrollbar

---
 _data/fingerprints.yml           |  2 +-
 _includes/v.html                 |  2 +-
 _sass/breakpoints/_mobileup.scss | 29 +++++++++++++++++++++++++----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/_data/fingerprints.yml b/_data/fingerprints.yml
index ffacd565..61d26ba9 100644
--- a/_data/fingerprints.yml
+++ b/_data/fingerprints.yml
@@ -2,4 +2,4 @@ lunr: 2.3.6
 icons: 715715b9
 scripts: 0f5409e4
 search: b74b56ab
-style: 3053b10f
+style: 8039313c
diff --git a/_includes/v.html b/_includes/v.html
index 937a802f..1896ef77 100644
--- a/_includes/v.html
+++ b/_includes/v.html
@@ -1,7 +1,7 @@
 {%- unless site.suppress_fingerprints -%}
   ?v=
 
-  {%- assign fingerprints = 'icons: 715715b9,scripts: 0f5409e4,search: b74b56ab,style: 3053b10f' | split: ',' -%}
+  {%- assign fingerprints = 'icons: 715715b9,scripts: 0f5409e4,search: b74b56ab,style: 8039313c' | split: ',' -%}
   {%- assign found = false -%}
 
   {%- if jekyll.environment == 'production' -%}
diff --git a/_sass/breakpoints/_mobileup.scss b/_sass/breakpoints/_mobileup.scss
index 2c41605c..2220100f 100755
--- a/_sass/breakpoints/_mobileup.scss
+++ b/_sass/breakpoints/_mobileup.scss
@@ -19,16 +19,37 @@ html {
 }
 
 ::-webkit-scrollbar {
-    width: 7px;
+    height: 16px;
+    width: 16px;
 }
 
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-corner,
 ::-webkit-scrollbar-track {
-      background: transparent;
+    background-color: rgba(175,175,175,0.1);
+
+    &:hover {
+        background-color: rgba(175,175,175,0.2);
+    }
 }
 
 ::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 30px;
+    background-color: rgba(0,0,0,0);
+    border-radius: 16px;
+    border: 5px solid transparent;
+    background-clip: padding-box;
+}
+
+:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(175,175,175,0.6);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(175,175,175,0.8);
+    border-width: 4px;
 }
 
 body {