feat: Implement custom scrollbar styles for a terminal aesthetic and update related variables

TODO.md

@@ -11,7 +11,7 @@
 ## UI / UX Polish
 
 - [ ] **Heading Anchor Links** — Add an interactive `#` link that appears when hovering over `<h2>` and `<h3>` tags to make linking to specific sections easier.
-- [ ] **Custom Terminal Scrollbars** — Style the browser's default scrollbar to match the dark terminal aesthetic using `::-webkit-scrollbar` and `scrollbar-color`.
+- [x] **Custom Terminal Scrollbars** — Style the browser's default scrollbar to match the dark terminal aesthetic using `::-webkit-scrollbar` and `scrollbar-color`.
 
 - [ ] **Custom 404 Page** — Design an interactive terminal-style 404 page ("Command not found") that fits the pwnforfunandprofit theme.
 

sass/_reset.scss

@@ -16,6 +16,30 @@ html {
   transition:
     background-color 0.3s ease,
     color 0.3s ease;
+
+  // Firefox
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+}
+
+// Webkit
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 0; // hard edges = terminal feel
+  border: 1px solid var(--scrollbar-track);
+
+  &:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
 }
 
 body {

sass/_variables.scss

@@ -13,6 +13,10 @@
 
   --transition-spring: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  --scrollbar-track: #e5e7eb;
+  --scrollbar-thumb: #9ca3af;
+  --scrollbar-thumb-hover: #10b981;
 }
 
 // Dark Mode Overrides
@@ -23,4 +27,8 @@ html.dark {
   --surface-color: #141414;
   --border-color: rgba(255, 255, 255, 0.1);
   --shadow-color: rgba(0, 0, 0, 0.5);
+
+  --scrollbar-track: #0f0f0f;
+  --scrollbar-thumb: #2a2a2a;
+  --scrollbar-thumb-hover: #10b981;
 }