chore: compile new builds based on PostCSS build step

dist/light.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /**
  * Light-themed version:
  * uses light theme by default but switches to dark theme
@@ -7,59 +6,77 @@
  * Variables will remain uncompiled so the theme can update dynamically
  * at runtime in the browser.
  */
-/* To use this file from Sass, import `_variables/_variables-light` */
+
 :root {
   --background: #ffffff;
   --background-alt: #efefef;
+
   --selection: #9e9e9e;
+
   --text-main: #363636;
   --text-bright: #000000;
+
   --links: #0076d1;
   --focus: #0096bfab;
   --border: #dbdbdb;
   --code: #000000;
+
   --animation-duration: 0.1s;
   --button-hover: #dddddd;
-  --scrollbar-thumb: #d5d5d5;
-  --scrollbar-thumb-hover: #c4c4c4;
+
+  --scrollbar-thumb: rgb(213, 213, 213);
+  --scrollbar-thumb-hover: rgb(196, 196, 196);
+
   --form-placeholder: #949494;
   --form-text: #000000;
 }
 
 @media (prefers-color-scheme: dark) {
-  /* To use this file from Sass, import `_variables/_variables-dark` */
-  :root {
-    --background: #202b38;
-    --background-alt: #161f27;
-    --selection: #161f27;
-    --text-main: #dbdbdb;
-    --text-bright: #ffffff;
-    --links: #41adff;
-    --focus: #0096bfab;
-    --border: #dbdbdb;
-    --code: #ffbe85;
-    --animation-duration: 0.1s;
-    --button-hover: #324759;
-    --scrollbar-thumb: #324759;
-    --scrollbar-thumb-hover: #415c73;
-    --form-placeholder: #a9a9a9;
-    --form-text: #ffffff;
-  }
+:root {
+  --background: #202b38;
+  --background-alt: #161f27;
+
+  --selection: #161f27;
+
+  --text-main: #dbdbdb;
+  --text-bright: #ffffff;
+
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #ffbe85;
+
+  --animation-duration: 0.1s;
+  --button-hover: #324759;
+
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: rgb(20, 20, 20);
+
+  --form-placeholder: #a9a9a9;
+  --form-text: #ffffff;
+}
 }
 
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   line-height: 1.4;
+
   max-width: 800px;
   margin: 20px auto;
   padding: 0 10px;
+
   color: var(--text-main);
   background: var(--background);
+
   text-rendering: optimizeLegibility;
 }
 
 button, input, textarea {
-  transition: background-color var(--animation-duration) linear, border-color var(--animation-duration) linear, color var(--animation-duration) linear, box-shadow var(--animation-duration) linear, transform var(--animation-duration) ease;
+  transition: background-color var(--animation-duration) linear,
+              border-color var(--animation-duration) linear,
+              color var(--animation-duration) linear,
+              box-shadow var(--animation-duration) linear,
+              transform var(--animation-duration) ease;
 }
 
 h1 {
@@ -145,11 +162,14 @@ select {
 input, select, button, textarea {
   color: var(--form-text);
   background-color: var(--background-alt);
+
   font-family: inherit;
   font-size: inherit;
+
   margin-right: 6px;
   margin-bottom: 6px;
   padding: 10px;
+
   border: none;
   border-radius: 6px;
   outline: none;
@@ -294,5 +314,4 @@ tbody tr:nth-child(even) {
 ::selection {
   background-color: var(--selection);
 }
-
 /*# sourceMappingURL=light.css.map */