Add links to Join the Conversation, etc.

Tweak NewsSummary.astro and CodeSummary.astro formatting.

Author: fwextensions

src/components/Button.astro

@@ -10,13 +10,28 @@ const {
 	class: className,
 	newTab = false
 } = Astro.props;
-
 ---
 
 <a href={href}
 	role="button"
 	class:list={[
-		"font-condensed font-semibold uppercase border-2 text-primary text-sm px-2 pt-1 pb-1.5 rounded-md hover:bg-primary hover:text-white hover:border-primary hover:no-underline",
+		"font-condensed",
+		"font-semibold",
+		"uppercase",
+		"border-2",
+		"text-primary",
+		"text-sm",
+		"px-2",
+		"pt-1",
+		"pb-1.5",
+		"rounded-md",
+		"hover:bg-primary",
+		"hover:text-white",
+		"hover:border-primary",
+		"hover:no-underline",
+		"transition",
+		"duration-300",
+		"ease-out",
 		className
 	]}
 	target={newTab ? "_blank" : undefined}

src/components/CodeSummary.astro

@@ -11,7 +11,7 @@ const id = "in-the-code";
 <section id={id} class="mb-8">
 	<BigText size="md" showOrnament={false}>
 		<Fragment slot="title">
-			<b>In the Code</b>
+			In the <b>Code</b>
 		</Fragment>
 	</BigText>
 	<div class="mt-5" />

src/components/NewsSummary.astro

@@ -11,7 +11,7 @@ const recentPosts = posts.slice(0, 3);
 <section class="mb-8">
 	<BigText size="md" anchor="right" showOrnament={false}>
 		<Fragment slot="title">
-			<b>In the News</b>
+			In the <b>News</b>
 		</Fragment>
 	</BigText>
 	<div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-1u">

src/pages/index.astro

@@ -5,6 +5,16 @@ import NewsSummary from "@/components/NewsSummary.astro";
 import BigText from "@/components/BigText.astro";
 import Button from "@/components/Button.astro";
 import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
+
+const ButtonClass = `
+	transition
+	duration-300
+	ease-in-out
+	underline-offset-[.2rem]
+	underline
+	decoration-primary/0
+	hover:decoration-primary/80
+`;
 ---
 
 <BaseLayout title="Home" header="">
@@ -39,8 +49,10 @@ import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
 
 	<BigText size="md" showOrnament={false}>
 		<Fragment slot="title">
-			<b>Join the</b><br>
-			Conversation
+			<a href={slackURL} role="button" class={ButtonClass}>
+				<b>Join</b> the
+				<br>Conversation
+			</a>
 		</Fragment>
 
 		<Fragment slot="body">
@@ -53,8 +65,10 @@ import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
 
 	<BigText size="md" anchor="right" showOrnament={false}>
 		<Fragment slot="title">
-			<b>Propose a</b><br>
-			Project
+			<a href={pitchProjectURL} role="button" class={ButtonClass}>
+				<b>Propose</b> a<br>
+				Project
+			</a>
 		</Fragment>
 
 		<Fragment slot="body">
@@ -67,8 +81,10 @@ import { newsletterURL, pitchProjectURL, slackURL } from "@/utils/urls";
 
 	<BigText size="md">
 		<Fragment slot="title">
-			<b>Stay</b><br>
-			Informed
+			<a href={newsletterURL} role="button" class={ButtonClass}>
+				<b>Stay</b><br>
+				Informed
+			</a>
 		</Fragment>
 
 		<Fragment slot="body">