feat: improve theming

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>
+</script>
+
+<style scoped>
+#display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>

components/Message.vue

@@ -225,7 +225,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {

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>

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-left: var(--sidebar-margin);
-	padding-right: .25em;
+	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);
+	width: var(--sidebar-icon-width);
-	height: var(--sidebar-width);
+	height: var(--sidebar-icon-width);
 }
 
 .sidebar-bottom-buttons {

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;
 }

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;
 }

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 */

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;
 }

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 */