fix: improve article css

style/annotation.css

@@ -10,6 +10,7 @@
 	background: #eee;
 	border: 1px solid #ddd;
 	color: #222;
+	margin: 1rem 0;
 }
 
 .annotation img, blockquote img {

style/article.css

@@ -1,12 +1,53 @@
-#article-body {
-	line-height: 1.75;
+#article-metadata {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	gap: 0.5rem;
 }
 
-#metadata, #article-subtitle, #article-date {
+#article-body {
+	line-height: 1.75;
+	color: #171717;
+}
+
+#article-subtitle {
+	font-size: 1.8rem;
+	text-align: center;
+}
+
+#article-image {
+	width: 100%;
+	height: 50rem;
+	border-radius: 5px;
+	object-fit: contain;
+	object-position: center;
+	background-color: #f7f7f7;
+	border: 1px solid #e4e4e4;
+}
+
+#metadata,
+#article-subtitle,
+#article-date {
 	color: #333;
 }
 
-.dark #metadata, .dark #article-subtitle, .dark #article-date {
+#article-authors {
+	color: #1e1e1e;
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.dark #article-image {
+	background-color: #151515;
+	border: 1px solid #2f2f2f;
+}
+
+.dark #metadata,
+.dark #article-subtitle,
+.dark #article-date,
+.dark #article-authors {
 	color: #ccc;
 }
 

style/layout.css

@@ -12,6 +12,10 @@
 	flex: 1;
 }
 
+.solo {
+	gap: 4rem;
+}
+
 .trio-split {
 	grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
 	gap: 4rem;