From 8e6b396737ef2e159ea256a9be1cf3e7254b0fec Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Fri, 12 Jul 2024 20:09:43 +0100
Subject: [PATCH] fix: improve article css

---
 style/annotation.css |  1 +
 style/article.css    | 49 ++++++++++++++++++++++++++++++++++++++++----
 style/layout.css     |  4 ++++
 views/article.templ  | 26 ++++++++++++-----------
 4 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/style/annotation.css b/style/annotation.css
index b6a82f4..1cb43a3 100644
--- a/style/annotation.css
+++ b/style/annotation.css
@@ -10,6 +10,7 @@
 	background: #eee;
 	border: 1px solid #ddd;
 	color: #222;
+	margin: 1rem 0;
 }
 
 .annotation img, blockquote img {
diff --git a/style/article.css b/style/article.css
index b8b2191..0be76b9 100644
--- a/style/article.css
+++ b/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;
 }
 
diff --git a/style/layout.css b/style/layout.css
index ec126f9..2fe9bdd 100644
--- a/style/layout.css
+++ b/style/layout.css
@@ -12,6 +12,10 @@
 	flex: 1;
 }
 
+.solo {
+	gap: 4rem;
+}
+
 .trio-split {
 	grid-template-columns: 24rem calc(1024px - 56rem) 24rem;
 	gap: 4rem;
diff --git a/views/article.templ b/views/article.templ
index 7cd9732..0b76597 100644
--- a/views/article.templ
+++ b/views/article.templ
@@ -8,10 +8,20 @@ import (
 
 templ ArticlePage(a data.Article) {
 	@layout(a.Title) {
-		<div id="container" class="duo-split">
-			<div id="metadata">
-				<img src={ a.Image } alt="Article image"/>
-				<h3>Authored By</h3>
+		<div id="container" class="solo">
+			<div id="article-metadata">
+				<h1 id="article-title">{ a.Title }</h1>
+				<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>
 	}
 }