Adjust text size based on scaleing

Levminer · Feb 7, 2024 · 2862d9f · 2862d9f
1 parent 7eb9d61
commit 2862d9f
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/interface/styles/index.css b/interface/styles/index.css
@@ -2,17 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+	--font-size: 16px;
+}
+
+html {
+	font-size: var(--font-size);
+}
+
+@media (min-resolution: 1.25dppx) {
+	:root {
+		--font-size: 14px;
+	}
+}
+
 @layer components {
 	.button {
-		@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white py-4 px-6 text-xl font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
+		@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white px-6 py-4 text-xl font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
 	}
 
 	.smallButton {
-		@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white py-2 px-3 text-lg font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
+		@apply flex items-center justify-center gap-2 whitespace-nowrap rounded-2xl border-2 border-white bg-white px-3 py-2 text-lg font-medium text-black outline-none duration-200 ease-linear hover:bg-transparent hover:text-white focus-visible:ring-4 focus-visible:ring-popup-magenta;
 	}
 
 	.menuButton {
-		@apply text-sm transparent-900-hover mx-3 mt-0 mb-3 flex h-20 w-20 flex-col items-center justify-center rounded-xl font-medium outline-none duration-200 ease-linear hover:text-gray-200 focus-visible:ring-4 focus-visible:ring-popup-magenta;
+		@apply transparent-900-hover mx-3 mb-3 mt-0 flex h-20 w-20 flex-col items-center justify-center rounded-xl text-sm font-medium outline-none duration-200 ease-linear hover:text-gray-200 focus-visible:ring-4 focus-visible:ring-popup-magenta;
 	}
 
 	.selectedMenuButton {