New style initial

public/css/microblog.css

@@ -1,5 +1,5 @@
 .microblog-comment {
-	p {
+	& p {
 		font-style: italic;
 		margin: 0;
 		padding: var(--space-s) 0 0 0;
@@ -12,20 +12,42 @@
 }
 
 .microblog-icon {
-	filter: var(--logo-filter);
+	fill: var(--contrast-color);
 	height: var(--space-4xl);
 	padding-right: var(--space-s);
 	width: var(--space-2xl);
 }
 .microblog-list {
-	.post-metadata {
+	& .postlist-item-container {
+		display: flex;
+		flex-flow: column nowrap;
+		gap: var(--space-s);
+		& .postlist-item {
+			& .post-copy {
+				& .post-metadata {
+					& .post-metadata-copy {
+						& p {
+							margin-bottom: 0;
+						}
+					}
+				}
+				& h3 {
+					&:before {
+						content: "";
+						margin-left: 0;
+					}
+				}
+			}
+		}
+	}
+	& .post-metadata {
 		padding: 0;
 	}
 }
 .microblog-post {
 	display: flex;
-	.microblog-comment {
-		p {
+	& .microblog-comment {
+		& p {
 			padding-top: 0;
 			padding-bottom: var(--space-2xs);
 		}
@@ -37,25 +59,28 @@
 		align-items: center;
 		padding: var(--space-s);
 	}
-	.microblog-status-copy {
+	& h2 {
+		margin-top: var(--space-m);
+	}
+	& .microblog-status-copy {
 		align-items: center;
 		display: flex;
 		flex-flow: column nowrap;
 		p {
 			margin: 0;
 		}
-		.status-metadata {
-			font-family: var(--meta-font-family);
-			font-size: var(--meta-font-size);
-			font-style: var(--meta-font-style);
-			font-variation-settings: var(--meta-font-variation-settings);
-			line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size));
+		& .status-metadata {
+			color: var(--color-metadata);
+			font-family: var(--font-family-metadata);
+			font-size: var(--font-size-metadata);
+			font-variation-settings: var(--font-variation-settings-metadata);
+			letter-spacing: var(--letter-spacing-metadata);
+			line-height: calc(var(--font-size-metadata) * 0.5 + var(--font-size-metadata));
+			text-transform: var(--text-transform-metadata);
+			& a[href] {
+				color: var(--color-metadata);
+				text-decoration: none;
+			}
 		}
 	}
 }
-
-.postlist-item-container {
-	display: flex;
-	flex-flow: column nowrap;
-	gap: var(--space-s);
-}