Merge pull request #54 from brown-ccv/refactor-news-styling

refactor: updated news styling
brown-ccv · Jun 26, 2024 · b1ba812 · b1ba812
2 parents d4745eb + 6a50bdb
commit b1ba812
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -38,6 +38,14 @@
         @apply text-neutral-700;
     }
 
+    p {
+        @apply leading-8;
+    }
+
+    a {
+        @apply underline;
+    }
+
     p.small {
         @apply text-base;
         @apply text-neutral-500;