Slightly smaller avatars

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.17.3",
+	"version": "12.119.0-calc.17.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/components/MkChannelPreview.vue

@@ -81,9 +81,12 @@ const bannerStyle = computed(() => {
 			top: 16px;
 			left: 16px;
 			padding: 12px 16px;
-			background: rgba(0, 0, 0, 0.7);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+			background: rgba(0, 0, 0, 0.2);
 			color: #fff;
 			font-size: 1.2em;
+			border-radius: 999px;
 		}
 
 		> .status {
@@ -93,7 +96,9 @@ const bannerStyle = computed(() => {
 			right: 16px;
 			padding: 8px 12px;
 			font-size: 80%;
-			background: rgba(0, 0, 0, 0.7);
+			-webkit-backdrop-filter: var(--blur, blur(8px));
+			backdrop-filter: var(--blur, blur(8px));
+			background: rgba(0, 0, 0, 0.2);
 			border-radius: 6px;
 			color: #fff;
 		}

packages/client/src/components/MkNote.vue

@@ -431,8 +431,8 @@ function readPromo() {
 			flex-shrink: 0;
 			display: block;
 			margin: 0 14px 8px 0;
-			width: 58px;
-			height: 58px;
+			width: 52px;
+			height: 52px;
 			position: sticky;
 			/* For some reason this breaks avatar
 			positions on notes, commenting it for now */

packages/client/src/components/MkNoteDetailed.vue

@@ -411,8 +411,8 @@ if (appearNote.replyId) {
 			> .avatar {
 				display: block;
 				flex-shrink: 0;
-				width: 58px;
-				height: 58px;
+				width: 52px;
+				height: 52px;
 			}
 
 			> .body {

packages/client/src/pages/page.vue

@@ -249,7 +249,7 @@ definePageMetadata(computed(() => page ? {
 		}
 
 		> .content {
-			padding: 16px 0 0 0;
+			padding: 16px 0;
 		}
 
 		> .actions {
@@ -290,8 +290,8 @@ definePageMetadata(computed(() => page ? {
 				align-items: center;
 
 				> .avatar {
-					width: 52px;
-					height: 52px;
+					width: 40px;
+					height: 40px;
 				}
 
 				> .name {