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);
- }
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 @@
{flag.name}
-
-