From 169612bb3d48b420b06638c871471ba142b5e903 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivanchen07@gmail.com>
Date: Fri, 22 Dec 2023 10:26:01 -0500
Subject: [PATCH 1/2] Update article page style for better readability

---
 components/GenerateContributorsJSX.tsx |  4 +--
 pages/article/[article_slug].tsx       |  8 ++---
 styles/[article_slug].module.css       | 47 +++++++++++++++++---------
 3 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/components/GenerateContributorsJSX.tsx b/components/GenerateContributorsJSX.tsx
index 9dec944..264e357 100644
--- a/components/GenerateContributorsJSX.tsx
+++ b/components/GenerateContributorsJSX.tsx
@@ -18,8 +18,8 @@ export default function generate_contributors_jsx(
 						>
 							<span className="discrete-link">
 								{contributor.name}
-								{separator}
-							</span>
+                            </span>
+                            {separator}
 						</Link>
 					</span>
 				);
diff --git a/pages/article/[article_slug].tsx b/pages/article/[article_slug].tsx
index fde1e6c..a4c2fcf 100644
--- a/pages/article/[article_slug].tsx
+++ b/pages/article/[article_slug].tsx
@@ -93,16 +93,16 @@ function Article(props: Props) {
 					</p>
 					<h1 id={styles.title}>{title}</h1>
 					<h2 id={styles.summary}>{summary}</h2>
-					<h3 id={styles.reading_time}>
-						{generateApproxReadingTime()}
-					</h3>
 
 					<div id={styles.infoBar}>
 						<div>
 							<h3 id={styles.authors}>
 								By&nbsp;
 								{generate_contributors_jsx(contributors)}
-							</h3>
+                            </h3>
+                            <h3 id={styles.reading_time}>
+                                {generateApproxReadingTime()}
+                            </h3>
 							<h3
 								id={styles.issue_volume_text}
 								className="discrete-link"
diff --git a/styles/[article_slug].module.css b/styles/[article_slug].module.css
index fab66a2..851c38e 100644
--- a/styles/[article_slug].module.css
+++ b/styles/[article_slug].module.css
@@ -1,6 +1,6 @@
 #main {
 	width: 95vw;
-	max-width: 900px;
+	max-width: 700px;
 	padding-top: 1rem;
 	margin: 0 auto;
 }
@@ -10,7 +10,9 @@
 	font-family: sans-serif !important;
 	font-weight: 600;
 	font-size: 1.2rem;
-	margin-top: 15px;
+	margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    color: var(--medium-grey);
 }
 
 #title {
@@ -18,46 +20,49 @@
 }
 
 #summary {
+    margin-top: 0.5rem;
 	color: var(--medium-grey);
 	font-family: var(--secondary-font);
 	font-weight: normal;
 	font-size: calc(var(--large-text) / 2);
-	margin-bottom: 0.1rem;
 }
 
 #reading_time {
-	margin-bottom: 1rem;
-	font-size: var(--small-text);
-	font-family: var(--secondary-font) !important;
-	font-weight: 600;
+    color: var(--medium-grey);
+    font-family: var(--secondary-font) !important;
+	font-size: calc(var(--small-text) / 1.1);
+    margin-top: 0.3rem;
+	margin-bottom: 0.2rem;
 }
 
 #infoBar {
 	margin-top: 1rem;
+    padding-bottom: 1rem;
 	font-family: var(--secondary-font);
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap; /* Wrap shareButtons down if collide with authors' names */
+    border-bottom: 1px solid var(--medium-grey);
 }
 
 #authors {
 	font-size: var(--small-text);
-	font-size: calc(var(--large-text) / 2.2) !important;
 	font-family: var(--secondary-font);
 }
 
 #issue_volume_text {
-	font-size: var(--small-text);
+	font-size: calc(var(--small-text) / 1.1);
 	font-family: var(--secondary-font);
 	font-weight: normal;
+    color: var(--medium-grey);
 }
 
 #shareButtons {
 	margin-left: auto; /* If wraps, push to right side */
 	display: flex;
 	justify-content: flex-end;
-	align-items: center;
-	padding-top: 3px;
+	align-items: flex-end;
+	padding-bottom: 0.1rem;
 	column-gap: 1rem;
 }
 
@@ -66,7 +71,7 @@
 }
 
 #cover_image_div {
-	margin-top: 0.5rem;
+	margin-top: 1.5rem;
 	text-align: center;
 	width: 100%;
 	height: 100%;
@@ -88,11 +93,11 @@
 }
 
 #coverImageContributor {
-	margin-top: -5px;
-	text-align: right;
+    margin-top: 0.2rem;
+    margin-left: 0.5rem;
+	text-align: left;
 	color: var(--medium-grey);
-	font-style: italic;
-	font-size: calc(var(--large-text) / 2.4);
+	font-size: calc(var(--small-text) / 1.1);
 }
 
 @media screen and (max-width: 840px) {
@@ -106,13 +111,23 @@
 	}
 }
 
+@media screen and (max-width: 480px) {
+    #shareButtons {
+        margin-top: 1rem;
+        margin-left: 0;
+        justify-content: flex-start;
+    }
+}
+
 #content {
 	margin-top: 2rem;
+    margin-bottom: 2rem;
 }
 
 #content p {
 	margin: 1rem 0;
 	font-size: 1.2rem;
+    line-height: 1.5;
 	color: var(--primary) !important;
 }
 

From 16ed07f7a67f6c4b685317375bddc49d9ea9d3e4 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivanchen07@gmail.com>
Date: Sat, 23 Dec 2023 12:11:52 -0500
Subject: [PATCH 2/2] Bump max-width to 720px

---
 styles/[article_slug].module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/[article_slug].module.css b/styles/[article_slug].module.css
index 851c38e..3ead509 100644
--- a/styles/[article_slug].module.css
+++ b/styles/[article_slug].module.css
@@ -1,6 +1,6 @@
 #main {
 	width: 95vw;
-	max-width: 700px;
+	max-width: 720px;
 	padding-top: 1rem;
 	margin: 0 auto;
 }