Make CSS modular

public/css/microblog.css

@@ -0,0 +1,61 @@
+.microblog-comment {
+	p {
+		font-style: italic;
+		margin: 0;
+		padding: var(--space-s) 0 0 0;
+	}
+}
+
+.microblog-emoji {
+	font-size: var(--step-6);
+	margin-right: var(--space-s);
+}
+
+.microblog-icon {
+	filter: var(--logo-filter);
+	height: var(--space-4xl);
+	padding-right: var(--space-s);
+	width: var(--space-2xl);
+}
+.microblog-list {
+	.post-metadata {
+		padding: 0;
+	}
+}
+.microblog-post {
+	display: flex;
+	.microblog-comment {
+		p {
+			padding-top: 0;
+			padding-bottom: var(--space-2xs);
+		}
+	}
+}
+
+.microblog-status {
+	&.card {
+		align-items: center;
+		padding: var(--space-s);
+	}
+	.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));
+		}
+	}
+}
+
+.postlist-item-container {
+	display: flex;
+	flex-flow: column nowrap;
+	gap: var(--space-s);
+}