Merge pull request #11 from RappyBots/feat/customScrollbar

Custom scrollbar
RappyBots · Mar 4, 2024 · da54820 · da54820
2 parents a8aefc8 + 260fdaf
commit da54820
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 24 deletions.
diff --git a/src/app.css b/src/app.css
@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* Tailwind doesn't support -webkit-scrollbar selectors :pepoSadge: */
+body::-webkit-scrollbar {
+    background-color: transparent;
+    width: 5.5px;
+}
+
+body::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 10px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.6);
+}
diff --git a/src/app.html b/src/app.html
@@ -16,7 +16,7 @@
 		%sveltekit.head%
 	</head>
 
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="bg-bg-dark text-white">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
@@ -2,10 +2,10 @@
 	import { page } from '$app/stores';
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="{$page.status} {$page.error?.message || "Unknown error"}" />
 	<title>{$page.status} {$page.error?.message || "Unknown error"}</title>
-</head>
+</svelte:head>
 
 <div class="flex flex-col h-screen justify-center items-center space-y-1">
     <div class="text-6xl font-black">

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,12 +4,13 @@
 	import "../app.css";
 </script>
 
-<div class="bg-bg-dark text-white">
+<div>
 	<Header />
 
 	<main class="min-h-screen">
 		<slot />
 	</main>
 
 	<Footer />
-</div>
+</div>
+
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Contact" />
 	<title>Boost Notifications - Contact</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://rappytv.com/" />
diff --git a/src/routes/docs/privacy/+page.svelte b/src/routes/docs/privacy/+page.svelte
@@ -2,10 +2,10 @@
 	import Link from "$components/Link.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Privacy Policy" />
 	<title>Boost Notifications - Privacy Policy</title>
-</head>
+</svelte:head>
 
 <div class="py-40 px-10 md:px-40 space-y-6">
     <div class="text-center text-4xl font-black">

diff --git a/src/routes/docs/terms/+page.svelte b/src/routes/docs/terms/+page.svelte
@@ -2,10 +2,10 @@
 	import Link from "$components/Link.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Terms of Service" />
 	<title>Boost Notifications - Terms of Service</title>
-</head>
+</svelte:head>
 
 <div class="py-40 px-10 md:px-40 space-y-6">
     <div class="text-center text-4xl font-black">

diff --git a/src/routes/feedback/+page.svelte b/src/routes/feedback/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Feedback" />
 	<title>Boost Notifications - Feedback</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://boost-feedback.rappytv.com/" />
diff --git a/src/routes/invite/+page.svelte b/src/routes/invite/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Invite" />
 	<title>Boost Notifications - Invite</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://discord.com/api/oauth2/authorize?client_id=1067880912538304583&permissions=8&scope=applications.commands%20bot" />
diff --git a/src/routes/review/+page.svelte b/src/routes/review/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Review" />
 	<title>Boost Notifications - Review</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://top.gg/bot/1067880912538304583#reviews" />
diff --git a/src/routes/status/+page.svelte b/src/routes/status/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Status" />
 	<title>Boost Notifications - Status</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://status.rappytv.com/status/bots" />
diff --git a/src/routes/support/+page.svelte b/src/routes/support/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Support" />
 	<title>Boost Notifications - Support</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://discord.gg/HaddzQrCbG" />
diff --git a/src/routes/vote/+page.svelte b/src/routes/vote/+page.svelte
@@ -2,9 +2,9 @@
 	import RedirectPage from "$components/RedirectPage.svelte";
 </script>
 
-<head>
+<svelte:head>
 	<meta property="og:title" content="Vote" />
 	<title>Boost Notifications - Vote</title>
-</head>
+</svelte:head>
 
 <RedirectPage url="https://top.gg/bot/1067880912538304583/vote" />