From 5cdadc61582494085a91eec94ca7ea91811d7a63 Mon Sep 17 00:00:00 2001
From: sam <sam@vulpine.solutions>
Date: Sat, 14 Dec 2024 00:51:17 +0100
Subject: [PATCH] fix: remove scoped styles from user pages

these are *hell* for user styles and they're really not necessary.
they are still used on some editor pages as those are less important
to be able to comprehensively style, imo
---
 Foxnouns.Frontend/src/app.scss                    | 15 +++++++++++++++
 .../src/lib/components/Avatar.svelte              |  8 --------
 .../src/lib/components/profile/ProfileFlag.svelte | 10 +---------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/Foxnouns.Frontend/src/app.scss b/Foxnouns.Frontend/src/app.scss
index f250ce6..e1d59ab 100644
--- a/Foxnouns.Frontend/src/app.scss
+++ b/Foxnouns.Frontend/src/app.scss
@@ -49,3 +49,18 @@
 		}
 	}
 }
+
+// Give identicons a background distinguishable from the page
+.identicon {
+	@media (prefers-color-scheme: dark) {
+		background-color: var(--bs-secondary-border-subtle);
+	}
+
+	background-color: var(--bs-light-border-subtle);
+}
+
+.profile-flag {
+	height: 1.5rem;
+	max-width: 200px;
+	border-radius: 3px;
+}
diff --git a/Foxnouns.Frontend/src/lib/components/Avatar.svelte b/Foxnouns.Frontend/src/lib/components/Avatar.svelte
index d9f4eec..eff2c7b 100644
--- a/Foxnouns.Frontend/src/lib/components/Avatar.svelte
+++ b/Foxnouns.Frontend/src/lib/components/Avatar.svelte
@@ -26,12 +26,4 @@
 	img {
 		object-fit: cover;
 	}
-
-	.identicon {
-		@media (prefers-color-scheme: dark) {
-			background-color: var(--bs-secondary-border-subtle);
-		}
-
-		background-color: var(--bs-light-border-subtle);
-	}
 </style>
diff --git a/Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte b/Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte
index b3d1611..ab098db 100644
--- a/Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte
+++ b/Foxnouns.Frontend/src/lib/components/profile/ProfileFlag.svelte
@@ -10,17 +10,9 @@
 <span class="mx-2 my-1">
 	<img
 		use:tippy={{ content: flag.description ?? flag.name }}
-		class="flag"
+		class="profile-flag"
 		src={flag.image_url ?? DEFAULT_FLAG}
 		alt={flag.description ?? flag.name}
 	/>
 	{flag.name}
 </span>
-
-<style>
-	.flag {
-		height: 1.5rem;
-		max-width: 200px;
-		border-radius: 3px;
-	}
-</style>