From 64131e6f9ca601260528309f34aa18a15129cf83 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:36:54 +0200
Subject: [PATCH 1/3] fix: set back font defaults

---
 app.vue                              | 2 +-
 public/themes/ash.css                | 2 +-
 public/themes/dark.css               | 2 +-
 public/themes/description.css        | 2 +-
 public/themes/light.css              | 2 +-
 public/themes/rainbow-capitalism.css | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app.vue b/app.vue
index 59d006d..94244e0 100644
--- a/app.vue
+++ b/app.vue
@@ -65,7 +65,7 @@ useHead({
 <style>
 html,
 body {
-  font-family: var(--preferred-font);
+  font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);
diff --git a/public/themes/ash.css b/public/themes/ash.css
index b9c349d..0d0491a 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 3927da7..b026d21 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index 11d5665..b33fe32 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,7 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index 6afe702..71c7055 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index d2a835b..0b4db7b 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -23,7 +23,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial, Helvetica, sans-serif";
+	--preferred-font: "Arial";
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);

From 63dbfa2a0d2ef9ccfe239b2cc263eac4ce25af97 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:44:41 +0200
Subject: [PATCH 2/3] fix: ACTUALLY fix font theming

---
 public/themes/ash.css                | 2 +-
 public/themes/dark.css               | 2 +-
 public/themes/description.css        | 2 +-
 public/themes/light.css              | 2 +-
 public/themes/rainbow-capitalism.css | 2 +-
 utils/generateDefaultIcon.ts         | 3 ++-
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/public/themes/ash.css b/public/themes/ash.css
index 0d0491a..7a6b7a4 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index b026d21..59099c7 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index b33fe32..57ade55 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -24,7 +24,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     --optional-body-background: ; /* background element for the body */
     --optional-chat-background: ; /* background element for the chat box */
diff --git a/public/themes/light.css b/public/themes/light.css
index 71c7055..0b24214 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -23,5 +23,5 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 0b4db7b..c1c8246 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -23,7 +23,7 @@
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--pfp-radius: 100%;
-	--preferred-font: "Arial";
+	--preferred-font: Arial;
 
     /* --optional-body-background: background */
     --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
diff --git a/utils/generateDefaultIcon.ts b/utils/generateDefaultIcon.ts
index 6313b75..0260830 100644
--- a/utils/generateDefaultIcon.ts
+++ b/utils/generateDefaultIcon.ts
@@ -27,7 +27,8 @@ export default (name: string, seed: string): string => {
 		ctx.fillStyle = 'white'
 		ctx.textAlign = 'center'
 		ctx.textBaseline = 'middle'
-		const preferredFont = document.documentElement.style.getPropertyValue("--preferred-font")
+		const root = document.documentElement;
+		const preferredFont = getComputedStyle(root).getPropertyValue("--preferred-font");
 		ctx.font = `bold 96px ${preferredFont}, Arial, Helvetica, sans-serif`
 		// 136 isn't actually centered, but it *looks* centered
 		ctx.fillText(previewName, 128, 136)

From 32910d2077f8a993448294d056c9ffd9dbbc91c8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:13:10 +0200
Subject: [PATCH 3/3] feat: improve theming

---
 components/Avatar.vue                |  9 ++++++++-
 components/Message.vue               |  1 -
 components/User/UserEntry.vue        |  1 -
 layouts/client.vue                   | 21 +++++++++++++--------
 public/themes/ash.css                |  3 ++-
 public/themes/dark.css               |  8 ++++++--
 public/themes/description.css        |  2 +-
 public/themes/light.css              |  2 +-
 public/themes/rainbow-capitalism.css |  2 +-
 9 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/components/Avatar.vue b/components/Avatar.vue
index b7c4f63..20f91c3 100644
--- a/components/Avatar.vue
+++ b/components/Avatar.vue
@@ -1,5 +1,6 @@
 <template>
 	<NuxtImg v-if="displayAvatar" 
+		id="display-avatar"
 		:src="displayAvatar"
 		:alt="displayName" />
 	<Icon v-else
@@ -36,4 +37,10 @@ if (user) {
 	}
 }
 
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+#display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>
\ No newline at end of file
diff --git a/components/Message.vue b/components/Message.vue
index 166f99d..ce726fb 100644
--- a/components/Message.vue
+++ b/components/Message.vue
@@ -225,7 +225,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {
diff --git a/components/User/UserEntry.vue b/components/User/UserEntry.vue
index b539f2c..1817816 100644
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@@ -37,6 +37,5 @@ const displayName = props.user.display_name || props.user.username
 .user-avatar {
     width: 2.3em;
     height: 2.3em;
-    border-radius: 50%;
 }
 </style>
diff --git a/layouts/client.vue b/layouts/client.vue
index 112440d..2ed9e8c 100644
--- a/layouts/client.vue
+++ b/layouts/client.vue
@@ -19,16 +19,16 @@
 				<div class="left-column-segment" id="left-column-middle">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 						<NuxtImg v-if="guild.icon"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="guild.icon" />
 						<NuxtImg v-else-if="!blockedCanvas"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name"
 							:src="generateDefaultIcon(guild.name, guild.uuid)" />
 						<Icon v-else name="lucide:server"
 							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
-							class="sidebar-icon"
+							class="sidebar-icon guild-icon"
 							:alt="guild.name" />
 					</NuxtLink>
 				</div>
@@ -259,8 +259,8 @@ function createDropdown() {
 	display: flex;
 	flex-direction: column;
 
-	padding-left: .25em;
-	padding-right: .25em;
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
 	padding-top: .5em;
 	
 	background: var(--optional-sidebar-background);
@@ -281,6 +281,7 @@ function createDropdown() {
 #left-column-middle {
 	overflow-y: scroll;
 	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
 }
 
 #middle-left-column {
@@ -294,12 +295,16 @@ function createDropdown() {
 }
 
 #home-button {
-	height: var(--sidebar-width);
+	height: var(--sidebar-icon-width);
+}
+
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
 }
 
 .sidebar-icon {
-	width: var(--sidebar-width);
-	height: var(--sidebar-width);
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
 }
 
 .sidebar-bottom-buttons {
diff --git a/public/themes/ash.css b/public/themes/ash.css
index 7a6b7a4..94f5e85 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -22,6 +22,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--guild-icon-radius: 20%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 59099c7..a228889 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -19,9 +19,13 @@
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
 
-	--sidebar-width: 2.5em;
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/description.css b/public/themes/description.css
index 57ade55..e30025f 100644
--- a/public/themes/description.css
+++ b/public/themes/description.css
@@ -23,7 +23,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 
     --optional-body-background: ; /* background element for the body */
diff --git a/public/themes/light.css b/public/themes/light.css
index 0b24214..556b64d 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -22,6 +22,6 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 }
\ No newline at end of file
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index c1c8246..ca73e1f 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -22,7 +22,7 @@
 	--sidebar-width: 2.5em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
-	--pfp-radius: 100%;
+	--pfp-radius: 50%;
 	--preferred-font: Arial;
 
     /* --optional-body-background: background */