From 3b27438830bc897fb36c31b05de6560ecb25e4c6 Mon Sep 17 00:00:00 2001
From: secondl1ght <secondl1ght@protonmail.com>
Date: Fri, 15 Dec 2023 22:02:21 -0700
Subject: [PATCH] refactor base css with tailwind

---
 src/app.css | 90 +++++++++++++++++++++++++----------------------------
 1 file changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/app.css b/src/app.css
index fcfd494d..1c2b549b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -7,63 +7,59 @@
 	src: url('/fonts/Manrope-Regular.ttf') format('truetype');
 }
 
-html {
-	font-family: Manrope, sans-serif;
-	font-size: 16px;
-}
+@layer base {
+	html {
+		font-family: Manrope, sans-serif;
+		@apply text-base;
+	}
 
-::selection {
-	color: white;
-	background: #53c5d5;
+	::selection {
+		@apply bg-[#53c5d5] text-white;
+	}
 }
 
-.gradient {
-	background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-}
+@layer utilities {
+	.gradient {
+		background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
+		background-clip: text;
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
 
-.gradient-bg {
-	background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
-}
+	.gradient-bg {
+		background: -webkit-linear-gradient(45deg, #0ecd71, #040273);
+	}
 
-/* Hide scrollbar for Chrome, Safari and Opera */
-.hide-scroll::-webkit-scrollbar {
-	display: none;
-}
+	/* Hide scrollbar for Chrome, Safari and Opera */
+	.hide-scroll::-webkit-scrollbar {
+		@apply hidden;
+	}
 
-/* Hide scrollbar for IE, Edge and Firefox */
-.hide-scroll {
-	-ms-overflow-style: none; /* IE and Edge */
-	scrollbar-width: none; /* Firefox */
-}
+	/* Hide scrollbar for IE, Edge and Firefox */
+	.hide-scroll {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
 
-.div-icon {
-	background-image: url('/icons/div-icon-pin.svg');
-}
+	.center {
+		@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+	}
 
-.boosted-icon {
-	background-image: url('/icons/boosted-icon-pin.svg');
+	.center-fixed {
+		@apply fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
+	}
 }
 
-.treasure-icon {
-	background-image: url('/icons/treasure-icon.png');
-}
+@layer components {
+	.div-icon {
+		background-image: url('/icons/div-icon-pin.svg');
+	}
 
-.center {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	-moz-transform: translateX(-50%) translateY(-50%);
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
-}
+	.boosted-icon {
+		background-image: url('/icons/boosted-icon-pin.svg');
+	}
 
-.center-fixed {
-	position: fixed;
-	top: 50%;
-	left: 50%;
-	-moz-transform: translateX(-50%) translateY(-50%);
-	-webkit-transform: translateX(-50%) translateY(-50%);
-	transform: translateX(-50%) translateY(-50%);
+	.treasure-icon {
+		background-image: url('/icons/treasure-icon.png');
+	}
 }