integrate some of Freeplay's Ck userstyles

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.0.6",
+	"version": "13.0.7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/components/MkNote.vue

@@ -424,9 +424,11 @@ function readPromo() {
 	}
 
 	> .article {
-		display: flex;
 		padding: 28px 32px 18px;
 		cursor: pointer;
+		display: grid;
+		align-items: center;
+		grid-template-columns: 58px;
 
 		@media (pointer: coarse) {
 			cursor: default;
@@ -436,20 +438,42 @@ function readPromo() {
 			flex-shrink: 0;
 			display: block;
 			margin: 0 14px 8px 0;
-			width: 52px;
-			height: 52px;
-			position: sticky;
+			grid-row: 1 / span 2;
+			width: 48px;
+			height: 48px;
+			position: relative;
 			/* For some reason this breaks avatar
 			positions on notes, commenting it for now */
 			/* top: var(--stickyTop, 0px); */
+			top: 0;
 			left: 0;
 		}
 
 		> .main {
 			flex: 1;
 			min-width: 0;
+			display: contents;
+
+			> .header {
+				display: contents;
+			}
+
+			> .name, .info {
+				grid-row: 1;
+			}
+
+			> .username, .ticker {
+				grid-row: 2;
+				font-size: .9em;
+				align-self: flex-start;
+			}
 
 			> .body {
+				margin-top: .2em;
+				overflow: hidden;
+				margin-inline: -100px;
+				padding-inline: 100px;
+
 				> .cw {
 					cursor: default;
 					display: block;

packages/client/src/components/MkNoteDetailed.vue

@@ -405,19 +405,28 @@ if (appearNote.replyId) {
 	}
 
 	> .article {
-		padding: 32px;
-		font-size: 1.2em;
+		padding: 28px 32px 18px;
+		cursor: pointer;
+		display: grid;
+		align-items: center;
+		grid-template-columns: 58px;
 
 		> .header {
 			display: flex;
 			position: relative;
 			margin-bottom: 16px;
+			display: contents;
 
 			> .avatar {
-				display: block;
 				flex-shrink: 0;
-				width: 52px;
-				height: 52px;
+				display: block;
+				margin: 0 14px 8px 0;
+				grid-row: 1 / span 2;
+				width: 48px;
+				height: 48px;
+				position: relative;
+				top: 0;
+				left: 0;
 			}
 
 			> .body {
@@ -427,6 +436,10 @@ if (appearNote.replyId) {
 				justify-content: center;
 				padding-left: 16px;
 				font-size: 0.95em;
+				margin-top: .2em;
+				overflow: hidden;
+				margin-inline: -100px;
+				padding-inline: 100px;
 
 				> .top {
 					> .name {

packages/client/src/components/MkNoteHeader.vue

@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { } from 'vue';
-import * as misskey from 'calckey-js';
+import type * as misskey from 'calckey-js';
 import MkVisibility from '@/components/MkVisibility.vue';
 import { notePage } from '@/filters/note';
 import { userPage } from '@/filters/user';
@@ -32,6 +32,12 @@ defineProps<{
 	display: flex;
 	align-items: baseline;
 	white-space: nowrap;
+	justify-self: flex-end;
+	padding: .1em .7em;
+	border-radius: 100px;
+	background-color: var(--bg);
+	font-size: .8em;
+	text-shadow: 0 2px 2px black;
 
 	> .name {
 		flex-shrink: 1;