From 6a50bdbb4f0af596d7206aff57441ae11c91770b Mon Sep 17 00:00:00 2001
From: galenwinsor <galen_winsor@brown.edu>
Date: Wed, 26 Jun 2024 12:16:52 -0400
Subject: [PATCH] refactor: updated news styling

---
 src/components/FormattedDate.astro |  2 +-
 src/components/HeaderLink.astro    |  4 +---
 src/layouts/News.astro             | 26 ++++++++++++--------------
 src/styles/global.css              |  8 ++++++++
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
index 1bcce73..c541995 100644
--- a/src/components/FormattedDate.astro
+++ b/src/components/FormattedDate.astro
@@ -6,7 +6,7 @@ interface Props {
 const { date } = Astro.props;
 ---
 
-<time datetime={date.toISOString()}>
+<time datetime={date.toISOString()} class="text-neutral-500">
 	{
 		date.toLocaleDateString('en-us', {
 			year: 'numeric',
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 4ec5a21..4f8e1f8 100644
--- a/src/components/HeaderLink.astro
+++ b/src/components/HeaderLink.astro
@@ -15,9 +15,7 @@ const isActive = href === pathname || href === "/" + subpath?.[0]
   class:list={[
     className,
     "hover:underline underline-offset-8",
-    {
-      "text-neutral-900 font-semibold underline": isActive,
-    },
+      isActive ? "text-neutral-900 font-semibold underline" : "no-underline",
   ]}
   {...props}
 >
diff --git a/src/layouts/News.astro b/src/layouts/News.astro
index 3c769a2..3b445b9 100644
--- a/src/layouts/News.astro
+++ b/src/layouts/News.astro
@@ -9,24 +9,22 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props
 ---
 
 <Layout title={title} description={description}>
-  <article>
+  <article class="flex flex-col gap-16">
+    <div class="flex flex-col gap-4">
     <div>
       {heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
     </div>
-    <div>
-      <div>
-        <div>
-          <FormattedDate date={pubDate} />
-          {
-            updatedDate && (
-              <div class="last-updated-on">
-                Last updated on
-                <FormattedDate date={updatedDate} />
-              </div>
-            )
-          }
+    <FormattedDate date={pubDate} />
+    {
+      updatedDate && (
+        <div class="last-updated-on">
+          Last updated on
+          <FormattedDate date={updatedDate} />
         </div>
-      </div>
+      )
+    }
+    </div>
+    <div class="flex flex-col gap-4">
       <slot />
     </div>
   </article>
diff --git a/src/styles/global.css b/src/styles/global.css
index cb8cff0..14cff0e 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -38,6 +38,14 @@
         @apply text-neutral-700;
     }
 
+    p {
+        @apply leading-8;
+    }
+
+    a {
+        @apply underline;
+    }
+
     p.small {
         @apply text-base;
         @apply text-neutral-500;