Add buttons to getting started section of homepage

Center the steps on Getting Started.
Reduce width of About page.
Add Button component.
Tweak image sizing in projects.
Tweak styling of GitHub events cards.
Use routed.svg for the Routed project.

Author: fwextensions

package-lock.json

@@ -0,0 +1,25 @@
+---
+interface Props {
+	href: string;
+	class?: string;
+	newTab?: boolean;
+}
+
+const {
+	href,
+	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",
+		className
+	]}
+	target={newTab ? "_blank" : undefined}
+>
+	<slot />
+</a>

src/assets/projects/routed.png

@@ -6,9 +6,10 @@ interface Props {
 	width?: number | string;
 	height?: number | string;
 	style?: string;
+	class?: string;
 }
 
-const { size, width, height, style } = Astro.props;
+const { size, width, height, style, class: className } = Astro.props;
 
 // below, set the viewBox to add 10% padding around the icon
 ---
@@ -19,6 +20,7 @@ const { size, width, height, style } = Astro.props;
 	width={width}
 	height={height}
 	style={style}
+	class={className}
 />
 
 <style>

src/assets/projects/routed.svg

@@ -26,7 +26,7 @@ import BigHeading from "./BigHeading.astro";
 			font-semibold
 			font-condensed
 			leading-[.8]
-			w-6col;
+			w-2col;
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
 		font-variant-numeric: tabular-nums;

src/components/Button.astro

@@ -1,6 +1,6 @@
 ---
-import NewsSummaryItem from "./NewsSummaryItem.astro"; // Import from the same directory
 import { getBlogPosts } from "@/content";
+import NewsSummaryItem from "./NewsSummaryItem.astro";
 import BigText from "./BigText.astro";
 import TagOrnament from "./TagOrnament.astro";
 
@@ -14,7 +14,7 @@ const recentPosts = posts.slice(0, 3);
 			<b>In the News</b>
 		</Fragment>
 	</BigText>
-	<div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-10">
+	<div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-1u">
 		{recentPosts.map((post) => <NewsSummaryItem post={post} />)}
 	</div>
 	<div class="flex justify-center mt-16">

src/components/DefaultThumbnail.astro

@@ -1,6 +1,5 @@
 ---
 import { Image } from "astro:assets";
-import type { CollectionEntry } from "astro:content";
 import { Icon } from "astro-icon/components";
 import OptionalAnchor from "@/components/OptionalAnchor.astro";
 import DefaultThumbnail from "@/components/DefaultThumbnail.astro";
@@ -10,11 +9,7 @@ const cleanWebsite = (url: string) => url
 	.replace(/^https?:\/\//, "")
 	.replace(/\/$/, "");
 
-interface Props {
-	project: CollectionEntry<"projects">;
-}
-
-const ThumbnailWidth = 165;
+const ThumbnailWidth = 200;
 const Thumbnail2X = 2 * ThumbnailWidth;
 const IconClass = `
 	inline-block
@@ -56,7 +51,7 @@ const localImageMetadata = thumbnail && !isExternal
 
 ---
 
-<li class="flex flex-row items-start gap-1u mb-2u">
+<li class="flex flex-row items-start gap-1u mb-3u last:mb-0">
 	<OptionalAnchor href={url}>
 		{thumbnail && isExternal ? (
 			<img class={ThumbnailClass} src={thumbnail} alt={name} width={ThumbnailWidth} />
@@ -66,10 +61,10 @@ const localImageMetadata = thumbnail && !isExternal
 				src={localImageMetadata}
 				alt={name}
 				widths={[ThumbnailWidth, Thumbnail2X]}
-				sizes={`(max-width: 768px) ${ThumbnailWidth}px, ${ThumbnailWidth}px`}
+				sizes={`(max-width: 768px) ${ThumbnailWidth}px, ${Thumbnail2X}px`}
 			/>
 		) : (
-			<DefaultThumbnail size={ThumbnailWidth} />
+			<DefaultThumbnail size={ThumbnailWidth} class="w-4col" />
 		)}
 	</OptionalAnchor>
 

src/components/GetStartedStep.astro

@@ -1,7 +1,7 @@
 ---
 status: active
 name: Routed
-thumbnail: routed.png
+thumbnail: routed.svg
 description: |-
   Everyday, paramedics make life and death decisions when choosing where to take patients. And they have to rely on their own experience to make the right choices.
 

src/components/NewsSummary.astro

@@ -12,6 +12,7 @@ const minutes = await getMinutes();
 <BaseLayout title="About"
 	header="About SF Civic Tech"
 	meta={meta}
+	mainClass="max-w-8col mx-auto"
 >
 	<p>
 		SF Civic Tech is a group of people, first and foremost. We also call ourselves
@@ -41,12 +42,12 @@ const minutes = await getMinutes();
 		<a href="https://www.civictechnologists.org/">Alliance of Civic Technologists</a>.
 	</p>
 
-	<h2 class="text-2xl font-bold mt-8 mb-4" id="core-team">Meet the Board</h2>
+	<h2 class="text-2xl font-bold mt-2u mb-1u" id="core-team">Meet the Board</h2>
 
 	<TeamList />
 
 	{minutes.length > 0 &&
-		<h3 class="text-xl font-semibold mt-6 mb-3" id="minutes">Minutes of Quarterly Board Meetings</h3>
+		<h3 class="text-xl font-semibold mt-2u mb-4" id="minutes">Minutes of Quarterly Board Meetings</h3>
 
 		<ul class="list-disc pl-5 space-y-1 mb-6">
 			{minutes.map(({ data: { url, year, quarter, isDraft }}) => (
@@ -59,7 +60,7 @@ const minutes = await getMinutes();
 		</ul>
 	}
 
-	<h2 class="text-2xl font-bold mt-8 mb-4" id="code-of-conduct">Code of Conduct</h2>
+	<h2 class="text-2xl font-bold mt-2u mb-4" id="code-of-conduct">Code of Conduct</h2>
 
 	<p>SF Civic Tech is a space for everyone. What does that mean?</p>