make tags wrap on post page, set desktop default scrollbar styles, po…

…rtrait scrollbar styles for mobile, tweak scrollbar colors

packages/web/app/blog/[postSlug]/page.module.css

@@ -22,6 +22,7 @@
 .tagList {
   display: flex;
   gap: 0.75rem;
+  flex-wrap: wrap;
 }
 
 .main {

packages/web/app/globals.css

@@ -3,20 +3,18 @@
   --font-mono: 'Fira Code Variable', monospace;
 }
 
-@media (min-width: 500px) {
-  ::-webkit-scrollbar {
-    /* Track color */
-    background-color: var(--scrollbar-background-color);
-    width: 12px;
-    height: 12px;
-  }
+::-webkit-scrollbar {
+  /* Track color */
+  background-color: var(--scrollbar-background-color);
+  width: 12px;
+  height: 12px;
+}
 
-  ::-webkit-scrollbar-thumb {
-    /* Thumb color */
-    background-color: var(--scrollbar-color);
-    border-radius: 6px;
-    border: 2px solid var(--scrollbar-background-color);
-  }
+::-webkit-scrollbar-thumb {
+  /* Thumb color */
+  background-color: var(--scrollbar-color);
+  border-radius: 6px;
+  border: 2px solid var(--scrollbar-background-color);
 }
 
 /*
@@ -124,15 +122,14 @@ html {
     Silence the warning about missing Reach Dialog styles
   */
   --reach-dialog: 1;
-}
 
-/* Prevent font size inflation */
-html {
-  /* Turned this off for now. If a page doesn't have enough content to scroll it will leave a blank space on the edge which clashes with full-bleed elements. */
-  /* scrollbar-gutter: stable; */
+  /* Prevent font size inflation */
   -moz-text-size-adjust: none;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+
+  /* Turned this off for now. If a page doesn't have enough content to scroll it will leave a blank space on the edge which clashes with full-bleed elements. */
+  /* scrollbar-gutter: stable; */
 }
 
 /* Remove default list styles on ul, ol elements with a list role */
@@ -200,3 +197,10 @@ button {
   text-align: left;
   font: inherit;
 }
+
+@media (orientation: portrait) {
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) var(--scrollbar-background-color);
+  }
+}

packages/web/utils/constant.ts

@@ -43,8 +43,8 @@ export const LIGHT_COLORS = {
   '--color-gray-900': '#0f172a',
   '--color-gray-1000': '#020617',
 
-  '--scrollbar-color': 'var(--color-gray-600)',
-  '--scrollbar-background-color': 'var(--color-gray-100)',
+  '--scrollbar-color': 'var(--color-gray-400)',
+  '--scrollbar-background-color': 'var(--color-gray-200)',
 
   '--retro-sun-gradient': `linear-gradient(
     to bottom,
@@ -132,7 +132,7 @@ export const DARK_COLORS = {
   '--color-gray-900': '#111827',
   '--color-gray-1000': '#030712',
 
-  '--scrollbar-color': 'var(--color-gray-400)',
+  '--scrollbar-color': 'var(--color-gray-500)',
   '--scrollbar-background-color': 'var(--color-gray-800)',
 
   '--retro-sun-gradient': `linear-gradient(