dont theme scrollbars in mobile

src/app/font.scss

@@ -0,0 +1,40 @@
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodinl.woff2) format("woff2");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodinm.woff2) format("woff2");
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodindb.woff2) format("woff2");
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodinb.woff2) format("woff2");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodineb.woff2) format("woff2");
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: Rodin;
+  src: url(#{$asset-url}fonts/rodinub.woff2) format("woff2");
+  font-weight: 900;
+}
+
+html {
+  font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}

src/app/globals.scss

@@ -2,45 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
+@import 'font';
-	font-family: Rodin;
+@import 'scrollbar';
-	src: url(#{$asset-url}fonts/rodinl.woff2) format("woff2");
-	font-weight: 300;
-}
-
-@font-face {
-	font-family: Rodin;
-	src: url(#{$asset-url}fonts/rodinm.woff2) format("woff2");
-	font-weight: 500;
-}
-
-@font-face {
-	font-family: Rodin;
-	src: url(#{$asset-url}fonts/rodindb.woff2) format("woff2");
-	font-weight: 600;
-}
-
-@font-face {
-	font-family: Rodin;
-	src: url(#{$asset-url}fonts/rodinb.woff2) format("woff2");
-	font-weight: 700;
-}
-
-@font-face {
-	font-family: Rodin;
-	src: url(#{$asset-url}fonts/rodineb.woff2) format("woff2");
-	font-weight: 800;
-}
-
-@font-face {
-	font-family: Rodin;
-	src: url(#{$asset-url}fonts/rodinub.woff2) format("woff2");
-	font-weight: 900;
-}
-
-html {
-	font-family: Rodin, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
 
 // offsets for header size of 5.5rem
 .h-fixed {
@@ -56,122 +19,6 @@ html {
 }
 
 
-:root {
-	--scrollbar-bg: #f4f3f7;
-	--scrollbar-thumb: #c1c1c1;
-	--scrollbar-thumb-hover: #a8a8a8;
-	--scrollbar-thumb-active: #787878;
-}
-
-.dark {
-	--scrollbar-bg: hsl(276, 10%, 13%);
-	--scrollbar-thumb: hsl(276, 10%, 30%);
-	--scrollbar-thumb-hover: hsl(276, 10%, 35%);
-	--scrollbar-thumb-active: hsl(276, 10%, 40%);
-}
-
-$scrollbar-size: 13px;
-
-::-webkit-scrollbar {
-	width: $scrollbar-size;
-	height: $scrollbar-size;
-}
-
-::-webkit-scrollbar-corner,
-::-webkit-scrollbar-track {
-	background-color: var(--scrollbar-bg);
-}
-
-::-webkit-scrollbar-thumb {
-	background-color: var(--scrollbar-thumb);
-	background-clip: padding-box;
-	border: 3px solid transparent;
-	border-radius: 100px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background-color: var(--scrollbar-thumb-hover);
-}
-
-::-webkit-scrollbar-thumb:active {
-	background-color: var(--scrollbar-thumb-active);
-}
-
-/* Buttons */
-::-webkit-scrollbar-button:single-button {
-	background-color: var(--scrollbar-bg);
-
-	display: block;
-	background-size: 8px;
-	background-repeat: no-repeat;
-}
-
-/* Up */
-::-webkit-scrollbar-button:single-button:vertical:decrement {
-	height: $scrollbar-size;
-	width: $scrollbar-size;
-	background-position: center 4px;
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:decrement:active {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
-}
-
-/* Down */
-::-webkit-scrollbar-button:single-button:vertical:increment {
-	height: $scrollbar-size;
-	width: $scrollbar-size;
-	background-position: center 2px;
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:increment:hover {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:vertical:increment:active {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
-}
-
-/* Left */
-::-webkit-scrollbar-button:single-button:horizontal:decrement {
-	height: 12px;
-	width: 12px;
-	background-position: 3px 3px;
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
-
-}
-
-::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
-}
-
-/* Right */
-::-webkit-scrollbar-button:single-button:horizontal:increment {
-	height: 12px;
-	width: 12px;
-	background-position: 3px 3px;
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
-}
-
-::-webkit-scrollbar-button:single-button:horizontal:increment:active {
-	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
-}
-
-
 @layer base {
 	:root {
 		--background: 275 22% 96%;

src/app/scrollbar.scss

@@ -0,0 +1,118 @@
+:root {
+  --scrollbar-bg: #f4f3f7;
+  --scrollbar-thumb: #c1c1c1;
+  --scrollbar-thumb-hover: #a8a8a8;
+  --scrollbar-thumb-active: #787878;
+}
+
+.dark {
+  --scrollbar-bg: hsl(276, 10%, 13%);
+  --scrollbar-thumb: hsl(276, 10%, 30%);
+  --scrollbar-thumb-hover: hsl(276, 10%, 35%);
+  --scrollbar-thumb-active: hsl(276, 10%, 40%);
+}
+
+$scrollbar-size: 13px;
+
+// dont theme scrollbars on mobile
+@media (hover: hover) {
+  ::-webkit-scrollbar {
+    width: $scrollbar-size;
+    height: $scrollbar-size;
+  }
+
+  ::-webkit-scrollbar-corner,
+  ::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-bg);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    background-clip: padding-box;
+    border: 3px solid transparent;
+    border-radius: 100px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+
+  ::-webkit-scrollbar-thumb:active {
+    background-color: var(--scrollbar-thumb-active);
+  }
+
+  /* Buttons */
+  ::-webkit-scrollbar-button:single-button {
+    background-color: var(--scrollbar-bg);
+
+    display: block;
+    background-size: 8px;
+    background-repeat: no-repeat;
+  }
+
+  /* Up */
+  ::-webkit-scrollbar-button:single-button:vertical:decrement {
+    height: $scrollbar-size;
+    width: $scrollbar-size;
+    background-position: center 4px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='50,00 0,50 100,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='50,00 0,50 100,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:vertical:decrement:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='50,00 0,50 100,50'/></svg>");
+  }
+
+  /* Down */
+  ::-webkit-scrollbar-button:single-button:vertical:increment {
+    height: $scrollbar-size;
+    width: $scrollbar-size;
+    background-position: center 2px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 100,0 50,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 100,0 50,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:vertical:increment:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 100,0 50,50'/></svg>");
+  }
+
+  /* Left */
+  ::-webkit-scrollbar-button:single-button:horizontal:decrement {
+    height: 12px;
+    width: 12px;
+    background-position: 3px 3px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,50 50,100 50,0'/></svg>");
+
+  }
+
+  ::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,50 50,100 50,0'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:horizontal:decrement:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,50 50,100 50,0'/></svg>");
+  }
+
+  /* Right */
+  ::-webkit-scrollbar-button:single-button:horizontal:increment {
+    height: 12px;
+    width: 12px;
+    background-position: 3px 3px;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(96, 96, 96)'><polygon points='0,0 0,100 50,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:horizontal:increment:hover {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(112, 112, 112)'><polygon points='0,0 0,100 50,50'/></svg>");
+  }
+
+  ::-webkit-scrollbar-button:single-button:horizontal:increment:active {
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(128, 128, 128)'><polygon points='0,0 0,100 50,50'/></svg>");
+  }
+}
+