fix firefox assness

src/components/AssBrowser.astro

@@ -0,0 +1,28 @@
+---
+import GroupBox from "@components/GroupBox.astro";
+---
+
+<style is:global>
+	.ua {
+		font-family: monospace;
+	}
+</style>
+
+<GroupBox>
+	<p>
+		<h2>YOUR BROWSER IS ASS</h2>
+		<span>
+			Your browser, <span class="ua"></span> does not support the full set
+			of web features which means that nin0.dev may not work as well as it
+			would on a non-ass browser.
+			<br />
+			<br />
+			Consider switching to a browser that is not ass such as <a
+				href="https://www.apple.com/ca/safari/">Safari</a
+			>, <a href="https://brave.com/">Brave</a>, or if you really have no
+			option, <a href="https://www.google.com/intl/en_ca/chrome/"
+				>Chrome</a
+			>. (these are personal preferences and I am not paid to say this)
+		</span>
+	</p>
+</GroupBox>

src/components/windows/main/SpotifyCard.astro

@@ -3,6 +3,22 @@ import LastFMIcon from "@assets/svg/fm.svg";
 import HeartIcon from "@assets/svg/heart.svg";
 ---
 
+<style is:global>
+	.ass-browser {
+		.spotify-card {
+			background-color: #2b2b3b !important;
+		}
+
+		.spotify-card-wrapper {
+			background-color: #2b2b3b !important;
+		}
+
+		.spotify-card-background {
+			display: none !important;
+		}
+	}
+</style>
+
 <div class="spotify-card-wrapper-shadow">
 	<h3 style="margin-bottom: 10px;">Listening to</h3>
 	<div class="spotify-card-wrapper">

src/css/me.css

@@ -13,6 +13,7 @@
 		}
 	}
 }
+
 .spotify-card-wrapper {
 	background: var(--album-color);
 	position: relative;

src/layouts/BaseLayout.astro

@@ -20,6 +20,15 @@ const { tabTitle } = Astro.props;
 				document
 					.querySelectorAll(".window")
 					.forEach(window => WindowManager.observe(window));
+
+				const isBrowserAss = () =>
+					["Firefox"].some(ass => navigator.userAgent.includes(ass));
+				if (isBrowserAss()) document.body.classList.add("ass-browser");
+
+				document
+					.querySelectorAll(".ua")
+					// @ts-ignore
+					.forEach(u => (u.innerText = navigator.userAgent));
 			});
 		</script>
 	</body>

src/pages/index.astro

@@ -3,10 +3,12 @@ import Noscript from "@components/Noscript.astro";
 import MainWindow from "@components/windows/main/MainWindow.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import CodeWindow from "@components/windows/code/CodeWindow.astro";
+import AssBrowser from "@components/AssBrowser.astro";
 ---
 
 <BaseLayout tabTitle="nin0.dev">
 	<Noscript />
+	<AssBrowser />
 	<MainWindow />
 	<CodeWindow />
 </BaseLayout>