From 2b1c956a23e42319285fc10a68e5685f6cb67900 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Wed, 24 Jul 2024 12:58:23 -0400
Subject: [PATCH 1/7] feat: added form with styling and responsiveness

---
 src/pages/report.astro |  2 +-
 src/styles/report.css  | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/pages/report.astro b/src/pages/report.astro
index 4c33ac7..de2ff12 100644
--- a/src/pages/report.astro
+++ b/src/pages/report.astro
@@ -35,7 +35,7 @@ const BLOG_URL = Astro.site?.href;
 			</div>
 		</div>
 
-		<div>
+		<div class="container">
 			<form>
 				<label for="name">
 					Name
diff --git a/src/styles/report.css b/src/styles/report.css
index 16d8198..6f22f3a 100644
--- a/src/styles/report.css
+++ b/src/styles/report.css
@@ -1,4 +1,8 @@
 
+* {
+  box-sizing: border-box;
+}
+
 .fullWidth  {
 	display: flex;
 	justify-content: center;
@@ -30,3 +34,38 @@ h1 {
 	border-radius: 10px;
 	border: 2px solid black;
 }
+
+input, textarea {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+
+.container {
+  border-radius: 5px;
+  border: 5px solid #ED342F;
+  padding: 20px;
+  width: 75%;
+  margin: 0 auto;
+}
+
+label {
+  padding: 12px 12px 12px 0;
+  display: inline-block;
+}
+
+input {
+	width: 100%;
+	margin-top: 20px;
+}
+
+button[type="submit"]{
+	background: #ED342F;
+}
+
+button[type="submit"]:hover{
+	background: #A8569A;
+}

From ff7439bef4bc2f5c46c33aa8e17cd6d77f778e27 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 08:56:54 -0400
Subject: [PATCH 2/7] feat: added styling to blog posts on home page

---
 src/components/PostCard/index.astro |  4 +++-
 src/components/PostCard/styles.css  | 25 +++++++++++++++++++++++++
 src/layouts/BlogPost.astro          |  3 ++-
 src/layouts/BlogPosts.astro         |  2 +-
 src/styles/report.css               |  1 -
 5 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PostCard/styles.css

diff --git a/src/components/PostCard/index.astro b/src/components/PostCard/index.astro
index 0ad9f66..2609604 100644
--- a/src/components/PostCard/index.astro
+++ b/src/components/PostCard/index.astro
@@ -3,6 +3,8 @@ import { Picture } from 'astro:assets';
 
 import TagList from '../TagList/index.astro';
 
+import './styles.css';
+
 interface Props {
 	url: string,
 	title: string,
@@ -21,7 +23,7 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 ---
 <article
 	class:list={[
-		'post-card bg-gradient-to-t rounded-3xl p-4 hover:from-yellow to-transparent grid gap-2 shadow-md',
+		'container post-card bg-gradient-to-t rounded-3xl p-4 hover:from-yellow to-transparent grid gap-2 shadow-md',
 		{
 			'grid-cols-[auto] desktop:grid-cols-[min-content_auto] grid-rows-[auto_auto_auto_auto_auto] desktop:grid-rows-[auto_1fr_auto_auto]': image,
 			'grid-cols-[auto] grid-rows-[auto_auto_auto]': !image
diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
new file mode 100644
index 0000000..98e2c5a
--- /dev/null
+++ b/src/components/PostCard/styles.css
@@ -0,0 +1,25 @@
+.container {
+  border-radius: 5px;
+  border: 5px solid #ED342F;
+  padding: 20px;
+  width: 75%;
+  margin: 2rem auto;
+}
+
+label {
+  padding: 12px 12px 12px 0;
+  display: inline-block;
+}
+
+input {
+	width: 100%;
+	margin-top: 20px;
+}
+
+button[type="submit"]{
+	background: #ED342F;
+}
+
+button[type="submit"]:hover{
+	background: #A8569A;
+}
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 6680140..4fe2c98 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -7,6 +7,7 @@ import PostHeader from '../components/PostHeader/index.astro';
 import SkipToContent from '../components/SkipToContent/index.astro';
 import TagList from '../components/TagList/index.astro';
 import BaseLayout from './Base/index.astro';
+import './styles.css';
 
 interface Props {
 	title: string,
@@ -74,7 +75,7 @@ const postUrl = `${BLOG_URL}${url}`;
 		letterCount={letterCount}
 	/>
 
-	<article id="post-contents" itemprop="articleBody" class="e-content">
+	<article id="post-contents" itemprop="articleBody" class="e-content container">
 		{updates && (
 			<aside id="update-history">
 				<details open>
diff --git a/src/layouts/BlogPosts.astro b/src/layouts/BlogPosts.astro
index 8a2998b..34d334c 100644
--- a/src/layouts/BlogPosts.astro
+++ b/src/layouts/BlogPosts.astro
@@ -1,11 +1,11 @@
 ---
-import type { Post } from '../utils/post';
 
 import PageHeader from '../components/PageHeader/index.astro';
 import Pagination from '../components/Pagination/index.astro';
 import PostCard from '../components/PostCard/index.astro';
 import SiteNav from '../components/SiteNav/index.astro';
 import SkipToContent from '../components/SkipToContent/index.astro';
+import type { Post } from '../utils/post';
 import BaseLayout from './Base/index.astro';
 
 
diff --git a/src/styles/report.css b/src/styles/report.css
index 6f22f3a..8db1530 100644
--- a/src/styles/report.css
+++ b/src/styles/report.css
@@ -43,7 +43,6 @@ input, textarea {
   resize: vertical;
 }
 
-
 .container {
   border-radius: 5px;
   border: 5px solid #ED342F;

From 71ebfde3bfe627ffdaeecf79ecde3f9cae3853be Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 09:10:44 -0400
Subject: [PATCH 3/7] feat: more styling adjustments

---
 src/components/PageHeader/index.astro |  1 -
 src/components/PageHeader/styles.css  | 14 --------------
 src/components/PostCard/styles.css    | 10 +++++++++-
 3 files changed, 9 insertions(+), 16 deletions(-)
 delete mode 100644 src/components/PageHeader/styles.css

diff --git a/src/components/PageHeader/index.astro b/src/components/PageHeader/index.astro
index bcb1aa7..fd43757 100644
--- a/src/components/PageHeader/index.astro
+++ b/src/components/PageHeader/index.astro
@@ -1,5 +1,4 @@
 ---
-import './styles.css';
 ---
 <header id="page-header">
 	<h1>
diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
deleted file mode 100644
index 95cb18c..0000000
--- a/src/components/PageHeader/styles.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#page-header {
-	width: auto;
-	margin: 1.25rem auto;
-	padding: 0 1rem;
-
-	@media (min-width: 1024px) {
-    .desktop\:px-9 {
-        padding-left: 2.25rem/* 36px */;
-        padding-right: 2.25rem/* 36px */;
-		font-size: 2rem;
-		font-weight: 300;
-    }
-}
-}
diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
index 98e2c5a..3a12866 100644
--- a/src/components/PostCard/styles.css
+++ b/src/components/PostCard/styles.css
@@ -1,9 +1,17 @@
 .container {
+  background: #ED342F;
   border-radius: 5px;
-  border: 5px solid #ED342F;
+  border: 5px solid black;
   padding: 20px;
   width: 75%;
   margin: 2rem auto;
+   text-align: center;
+}
+
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 label {

From 19e3f94f39d3c361982372c2473fd5935a63ac18 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 09:13:50 -0400
Subject: [PATCH 4/7] feat: fixed h1 main centering

---
 src/components/PageHeader/index.astro | 3 ++-
 src/components/PageHeader/styles.css  | 3 +++
 src/pages/[...page].astro             | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PageHeader/styles.css

diff --git a/src/components/PageHeader/index.astro b/src/components/PageHeader/index.astro
index fd43757..5b50e9f 100644
--- a/src/components/PageHeader/index.astro
+++ b/src/components/PageHeader/index.astro
@@ -1,6 +1,7 @@
 ---
+import './styles.css';
 ---
-<header id="page-header">
+<header id="page-header" class="center-h1">
 	<h1>
 		<slot></slot>
 	</h1>
diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
new file mode 100644
index 0000000..1c68715
--- /dev/null
+++ b/src/components/PageHeader/styles.css
@@ -0,0 +1,3 @@
+.center-h1 {
+	text-align: center;
+}
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
index cf34aa0..0474328 100644
--- a/src/pages/[...page].astro
+++ b/src/pages/[...page].astro
@@ -38,7 +38,7 @@ const BLOG_URL = Astro.site?.href ?? '';
 	total={total}
 	size={size}
 >
-	<Fragment slot="header">
+	<Fragment slot="header" class="container">
 		TorontoJS Blog
 	</Fragment>
 </BlogPostsLayout>

From a5cf906f7750caafec64942526fc7e33f71dfac4 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 09:21:34 -0400
Subject: [PATCH 5/7] feat: removed background for each blog post, added border
 instead

---
 src/components/PostCard/styles.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
index 3a12866..cf416ce 100644
--- a/src/components/PostCard/styles.css
+++ b/src/components/PostCard/styles.css
@@ -1,7 +1,6 @@
 .container {
-  background: #ED342F;
   border-radius: 5px;
-  border: 5px solid black;
+  border: 5px solid #ED342F;
   padding: 20px;
   width: 75%;
   margin: 2rem auto;

From 615138ebdc25a14921d334f1780610fc3899e2b9 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 09:36:35 -0400
Subject: [PATCH 6/7] feat: removed unnecessary code

---
 src/components/PageHeader/styles.css | 16 ++++++++++++++++
 src/layouts/BlogPost.astro           |  2 +-
 src/pages/[...page].astro            |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
index 1c68715..1f8e572 100644
--- a/src/components/PageHeader/styles.css
+++ b/src/components/PageHeader/styles.css
@@ -1,3 +1,19 @@
 .center-h1 {
 	text-align: center;
 }
+
+#page-header {
+	width: auto;
+	margin: 1.25rem auto;
+	padding: 0 1rem;
+
+	@media (min-width: 1024px) {
+    .desktop\:px-9 {
+        padding-left: 2.25rem/* 36px */;
+        padding-right: 2.25rem/* 36px */;
+		font-size: 2rem;
+		font-weight: 300;
+    }
+}
+
+}
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 4fe2c98..5e16295 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -75,7 +75,7 @@ const postUrl = `${BLOG_URL}${url}`;
 		letterCount={letterCount}
 	/>
 
-	<article id="post-contents" itemprop="articleBody" class="e-content container">
+	<article id="post-contents" itemprop="articleBody" class="e-content">
 		{updates && (
 			<aside id="update-history">
 				<details open>
diff --git a/src/pages/[...page].astro b/src/pages/[...page].astro
index 0474328..cf34aa0 100644
--- a/src/pages/[...page].astro
+++ b/src/pages/[...page].astro
@@ -38,7 +38,7 @@ const BLOG_URL = Astro.site?.href ?? '';
 	total={total}
 	size={size}
 >
-	<Fragment slot="header" class="container">
+	<Fragment slot="header">
 		TorontoJS Blog
 	</Fragment>
 </BlogPostsLayout>

From f4cf5254b5af41f45e0f92ebc8d328d9e41dc555 Mon Sep 17 00:00:00 2001
From: dreymotoh <striclyspoken@gmail.com>
Date: Thu, 25 Jul 2024 21:40:55 -0400
Subject: [PATCH 7/7] feat: changes from pr suggestions

---
 src/components/PageHeader/index.astro |  2 +-
 src/components/PageHeader/styles.css  |  5 +---
 src/components/PostCard/index.astro   | 22 ++++++-----------
 src/components/PostCard/styles.css    | 20 +---------------
 src/pages/report.astro                |  2 +-
 src/styles/report.css                 | 34 +++++++++++----------------
 6 files changed, 25 insertions(+), 60 deletions(-)

diff --git a/src/components/PageHeader/index.astro b/src/components/PageHeader/index.astro
index 5b50e9f..bcb1aa7 100644
--- a/src/components/PageHeader/index.astro
+++ b/src/components/PageHeader/index.astro
@@ -1,7 +1,7 @@
 ---
 import './styles.css';
 ---
-<header id="page-header" class="center-h1">
+<header id="page-header">
 	<h1>
 		<slot></slot>
 	</h1>
diff --git a/src/components/PageHeader/styles.css b/src/components/PageHeader/styles.css
index 1f8e572..b5ffd3f 100644
--- a/src/components/PageHeader/styles.css
+++ b/src/components/PageHeader/styles.css
@@ -1,11 +1,8 @@
-.center-h1 {
-	text-align: center;
-}
-
 #page-header {
 	width: auto;
 	margin: 1.25rem auto;
 	padding: 0 1rem;
+	text-align: center;
 
 	@media (min-width: 1024px) {
     .desktop\:px-9 {
diff --git a/src/components/PostCard/index.astro b/src/components/PostCard/index.astro
index 2609604..14537c8 100644
--- a/src/components/PostCard/index.astro
+++ b/src/components/PostCard/index.astro
@@ -21,24 +21,16 @@ const BLOG_URL = Astro.site?.href;
 const IMAGE_WIDTHS = [256, 512, 768, image?.width ?? 1024];
 const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyle: 'short' });
 ---
-<article
-	class:list={[
-		'container post-card bg-gradient-to-t rounded-3xl p-4 hover:from-yellow to-transparent grid gap-2 shadow-md',
-		{
-			'grid-cols-[auto] desktop:grid-cols-[min-content_auto] grid-rows-[auto_auto_auto_auto_auto] desktop:grid-rows-[auto_1fr_auto_auto]': image,
-			'grid-cols-[auto] grid-rows-[auto_auto_auto]': !image
-		}
-	]}
->
+<article class="post-card">
 
-	<header class:list={['col-start-1', { 'desktop:col-span-2': image }]}>
-		<h2 class="text-2xl font-light">
+	<header>
+		<h2>
 			<a href={url}>
 				<slot name="title"></slot>
 			</a>
 		</h2>
 
-		<span class="text-sm"><time datetime={new Date(createdAt).toISOString()}>{formatter.format(new Date(createdAt))}</time></span>
+		<span><time datetime={new Date(createdAt).toISOString()}>{formatter.format(new Date(createdAt))}</time></span>
 	</header>
 
 	{image && (
@@ -52,13 +44,13 @@ const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'long', timeStyl
 		/>
 	)}
 
-	<div class:list={['post-card-content row-start-3 desktop:row-start-2', { 'col-start-1 desktop:col-start-2': image }]}>
+	<div>
 		<slot></slot>
 	</div>
 
-	<a class:list={['read-more-link row-start-4 desktop:row-start-3 underline underline-offset-2 decoration-2 decoration-mainRed hover:decoration-lightRed hover:decoration-4', { 'col-start-1 desktop:col-start-2': image }]} href={url}><span class="sr-only">({title}) </span>Read more...</a>
+	<a href={url}><span class="sr-only">({title}) </span>Read more...</a>
 
-	<footer class:list={['col-start-1 row-start-5 desktop:row-start-4', { 'desktop:col-span-2': image }]}>
+	<footer>
 		{tags && tags.length > 0 && (
 			<TagList
 				tags={Object.fromEntries(tags.map((tag) => [tag, `${BLOG_URL}tags/${tag}`]))}
diff --git a/src/components/PostCard/styles.css b/src/components/PostCard/styles.css
index cf416ce..7d98ea4 100644
--- a/src/components/PostCard/styles.css
+++ b/src/components/PostCard/styles.css
@@ -1,4 +1,4 @@
-.container {
+.post-card {
   border-radius: 5px;
   border: 5px solid #ED342F;
   padding: 20px;
@@ -12,21 +12,3 @@ img {
   margin-left: auto;
   margin-right: auto;
 }
-
-label {
-  padding: 12px 12px 12px 0;
-  display: inline-block;
-}
-
-input {
-	width: 100%;
-	margin-top: 20px;
-}
-
-button[type="submit"]{
-	background: #ED342F;
-}
-
-button[type="submit"]:hover{
-	background: #A8569A;
-}
diff --git a/src/pages/report.astro b/src/pages/report.astro
index de2ff12..a4ff67d 100644
--- a/src/pages/report.astro
+++ b/src/pages/report.astro
@@ -35,7 +35,7 @@ const BLOG_URL = Astro.site?.href;
 			</div>
 		</div>
 
-		<div class="container">
+		<div id="report-form">
 			<form>
 				<label for="name">
 					Name
diff --git a/src/styles/report.css b/src/styles/report.css
index 8db1530..5d81e5a 100644
--- a/src/styles/report.css
+++ b/src/styles/report.css
@@ -1,8 +1,3 @@
-
-* {
-  box-sizing: border-box;
-}
-
 .fullWidth  {
 	display: flex;
 	justify-content: center;
@@ -35,15 +30,7 @@ h1 {
 	border: 2px solid black;
 }
 
-input, textarea {
-  width: 100%;
-  padding: 12px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  resize: vertical;
-}
-
-.container {
+#report-form {
   border-radius: 5px;
   border: 5px solid #ED342F;
   padding: 20px;
@@ -51,20 +38,27 @@ input, textarea {
   margin: 0 auto;
 }
 
-label {
+#report-form :is(input, textarea) {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  resize: vertical;
+}
+
+#report-form label {
   padding: 12px 12px 12px 0;
   display: inline-block;
 }
 
-input {
-	width: 100%;
-	margin-top: 20px;
+#report-form input {
+	margin-block-start: 20px;
 }
 
-button[type="submit"]{
+#report-form button[type="submit"]{
 	background: #ED342F;
 }
 
-button[type="submit"]:hover{
+#report-form button[type="submit"]:hover{
 	background: #A8569A;
 }