fix: improve CSS for avatars, chat message grouping, etc.

public/base.css

@@ -3,6 +3,8 @@
 	--base-color: #518;
 
 	--bg: hsl(from var(--base-color) h 20% 7.5%);
+	--bg-darker: hsl(from var(--base-color) h 20% 5%);
+	--bg-lighter: hsl(from var(--base-color) h 20% 10%);
 
 	--text: hsl(from var(--base-color) h 5% 100%);
 	--accent: hsl(from var(--base-color) h clamp(0, calc(s + 10), 100) clamp(0, calc(l + 20), 100));
@@ -176,6 +178,47 @@ textarea:focus {
 		0 0 2px rgb(from var(--border-highlight) r g b / 60%);
 }
 
+.avatar-container {
+	display: block;
+	margin: 0.5rem auto;
+	width: 3rem;
+	height: 3rem;
+	border-radius: var(--border-radius);
+	overflow: hidden;
+}
+
+.avatar-container.inline {
+	display: inline-block;
+	margin: 0.5rem;
+}
+
+.avatar-container.medium {
+	width: 4.5rem;
+	height: 4.5rem;
+}
+
+.avatar-container.large {
+	width: 6rem;
+	height: 6rem;
+}
+
+.avatar-container.x-large {
+	width: 9rem;
+	height: 9rem;
+}
+
+.avatar-container.xx-large {
+	width: 12rem;
+	height: 12rem;
+}
+
+.avatar-container img {
+	height: 100%;
+	width: 100%;
+	max-width: none;
+	object-fit: cover;
+}
+
 .clickable {
 	cursor: pointer;
 }

public/sidebar/sidebar.html

@@ -358,13 +358,6 @@
 			max-width: 200px;
 		}
 
-		.profile-container .avatar-container #user-avatar {
-			width: 100%;
-			height: 100%;
-			max-width: 100%;
-			max-height: 100%;
-		}
-
 		.profile-container .avatar-container input[type="file"] {
 			position: absolute;
 			top: 0;
@@ -476,7 +469,7 @@
 				}
 			});
 		</script>
-		<div class="avatar-container">
+		<div class="avatar-container xx-large">
 			<img
 				id="user-avatar"
 				src="/images/default_avatar.gif"

public/tabs/blurbs/blurbs.html

@@ -76,20 +76,6 @@
 		display: flex;
 	}
 
-	.blurb-container .info-container .avatar-container {
-		display: block;
-		margin: 0.5rem;
-		width: 3rem;
-		height: 3rem;
-		border-radius: 20%;
-		overflow: hidden;
-	}
-
-	.blurb-container .info-container .avatar-container img {
-		min-width: 100%;
-		min-height: 100%;
-	}
-
 	.blurb-container .info-container .username-container {
 		display: block;
 		margin: 0 0.5rem;
@@ -195,7 +181,7 @@
 						</div>
 
 						<div class="info-container">
-							<div class="avatar-container">
+							<div class="avatar-container inline">
 								<img src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}" alt="user avatar" />
 							</div>
 							<div class="username-container">

public/tabs/chat/chat.css

@@ -67,8 +67,8 @@
 #chat .message-container {
 	position: relative;
 	transition: all 0.33s;
-	background: rgba(255, 255, 255, 0.03);
+	background: var(--bg-lighter);
-	margin-top: 0.75rem;
+	margin-top: 0.5rem;
 	padding: 0.5rem;
 	border-radius: var(--border-radius);
 }
@@ -77,13 +77,44 @@
 	padding: 0;
 }
 
-#chat .message-container.user-tick.time-tick + .message-container.user-tick.time-tick,
+.user-tock.time-tock:has(+ .user-tock.time-tick),
-#chat .message-container.user-tick.time-tock + .message-container.user-tick.time-tock,
+.user-tock.time-tick:has(+ .user-tock.time-tock),
-#chat .message-container.user-tock.time-tick + .message-container.user-tock.time-tick,
+.user-tick.time-tock:has(+ .user-tick.time-tick),
-#chat .message-container.user-tock.time-tock + .message-container.user-tock.time-tock {
+.user-tick.time-tick:has(+ .user-tick.time-tock),
-	padding-top: 0;
+.user-tock.time-tock:has(+ .user-tick.time-tick),
-	padding-bottom: 0;
+.user-tock.time-tick:has(+ .user-tick.time-tock),
-	margin-top: 0;
+.user-tick.time-tock:has(+ .user-tock.time-tick),
+.user-tick.time-tick:has(+ .user-tock.time-tock),
+.user-tock.time-tock:last-of-type,
+.user-tock.time-tick:last-of-type,
+.user-tick.time-tock:last-of-type,
+.user-tick.time-tick:last-of-type {
+	/* border: 1px dotted red; */
+	margin-bottom: 1rem !important;
+	padding-bottom: 0.25rem !important;
+	padding-top: 0 !important;
+	margin-top: 0.5rem !important;
+}
+
+.user-tock.time-tock:has(+ .user-tock.time-tock),
+.user-tock.time-tick:has(+ .user-tock.time-tick),
+.user-tick.time-tock:has(+ .user-tick.time-tock),
+.user-tick.time-tick:has(+ .user-tick.time-tick) {
+	/* border: 1px dotted blue; */
+	margin-bottom: -0.75rem !important;
+	padding-top: 0 !important;
+}
+
+.user-tock.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
+.user-tock.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock),
+.user-tick.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
+.user-tick.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
+.user-tock.time-tock + .user-tick.time-tick:has(+ .user-tick.time-tick),
+.user-tock.time-tick + .user-tick.time-tock:has(+ .user-tick.time-tock),
+.user-tick.time-tock + .user-tock.time-tick:has(+ .user-tock.time-tick),
+.user-tick.time-tick + .user-tock.time-tock:has(+ .user-tock.time-tock) {
+	/* border: 1px dotted green; */
+	margin-bottom: -0.75rem !important;
 }
 
 #chat
@@ -179,27 +210,15 @@
 	height: 3.75rem;
 }
 
-#chat .message-container .info-container .avatar-container {
-	display: inline-block;
-	margin: 0 4px;
-	width: 3rem;
-	height: 3rem;
-	border-radius: 16%;
-	overflow: hidden;
-}
-
-#chat .message-container .info-container .avatar-container img {
-	min-width: 100%;
-	min-height: 100%;
-}
-
 #chat .message-container .info-container .username-container {
 	margin: 0 4px;
 	font-weight: bold;
+	padding-top: 0.5rem;
 }
 
 #chat .message-container .info-container .datetime-container {
 	margin: 0 4px;
+	padding-top: 0.4rem;
 }
 
 #chat .message-container .info-container .datetime-container .long {

public/tabs/chat/chat.html

@@ -118,7 +118,7 @@
 							</button>
 						</div>
 						<div class="info-container">
-							<div class="avatar-container">
+							<div class="avatar-container inline">
 								<img
 									src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
 									alt="user avatar"

public/tabs/essays/essays.html

@@ -40,20 +40,6 @@
 		margin-left: 1.8rem;
 	}
 
-	.essay-container .info-container .avatar-container {
-		display: block;
-		margin: 0.5rem;
-		width: 3rem;
-		height: 3rem;
-		border-radius: 20%;
-		overflow: hidden;
-	}
-
-	.essay-container .info-container .avatar-container img {
-		min-width: 100%;
-		min-height: 100%;
-	}
-
 	.essay-container .info-container .username-container {
 		display: block;
 		margin: 0 0.5rem;
@@ -175,7 +161,7 @@
 						</div>
 
 						<div class="info-container">
-							<div class="avatar-container">
+							<div class="avatar-container inline medium">
 								<img
 									src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
 									alt="user avatar"

public/tabs/forum/forum.html

@@ -75,20 +75,6 @@
 		display: flex;
 	}
 
-	.post-container .info-container .avatar-container {
-		display: block;
-		margin: 0.5rem;
-		width: 3rem;
-		height: 3rem;
-		border-radius: 16%;
-		overflow: hidden;
-	}
-
-	.post-container .info-container .avatar-container img {
-		min-width: 100%;
-		min-height: 100%;
-	}
-
 	.post-container .info-container .username-container {
 		display: block;
 		margin: 0 0.5rem;
@@ -210,7 +196,7 @@
 					</div>
 
 					<div class="info-container">
-						<div class="avatar-container">
+						<div class="avatar-container inline">
 							<img
 								src="${context.creator.meta?.avatar ?? '/images/default_avatar.gif'}"
 								alt="user avatar"