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 {
+#article-metadata {
-	line-height: 1.75;
+	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;

views/article.templ

@@ -8,10 +8,20 @@ import (
 
 templ ArticlePage(a data.Article) {
 	@layout(a.Title) {
-		<div id="container" class="duo-split">
+		<div id="container" class="solo">
-			<div id="metadata">
+			<div id="article-metadata">
-				<img src={ a.Image } alt="Article image"/>
+				<h1 id="article-title">{ a.Title }</h1>
-				<h3>Authored By</h3>
+				<time datetime={ a.PublishedAt.Format(time.RFC3339) } id="article-date">
+					{ a.PublishedAt.Format("2 Jan, 2006") }
+				</time>
+			</div>
+			<img id="article-image" src={ a.Image } alt="Article image"/>
+			<h2 id="article-subtitle">{ a.Subtitle }</h2>
+			<div id="article-body">
+				@templ.Raw(a.HTML)
+			</div>
+			<div id="article-authors">
+				<h3>Authors</h3>
 				for _, author := range a.Authors {
 					<details>
 						<summary>{ author.Name } - { author.Role }</summary>
@@ -19,14 +29,6 @@ templ ArticlePage(a data.Article) {
 					</details>
 				}
 			</div>
-			<div>
-				<h1 id="article-title">{ a.Title }</h1>
-				<time datetime={ a.PublishedAt.Format(time.RFC3339) } id="article-date">{ a.PublishedAt.Format(time.DateOnly) }</time>
-				<h2 id="article-subtitle">{ a.Subtitle }</h2>
-				<div id="article-body">
-					@templ.Raw(a.HTML)
-				</div>
-			</div>
 		</div>
 	}
 }