Initial cut at moving rest of pages to Tailwind

Author: fwextensions

src/components/BlogListItem.astro

@@ -36,10 +36,10 @@ const dateString = formatShortMDY(date);
 const thumbnailSize = `${ThumbnailUnits}rem`;
 ---
 
-<li>
+<li class="my-6 flex flex-row gap-4">
 	<a href={postURL}>
 			{thumbnailImage
-				? <Image class="thumbnail"
+				? <Image class="thumbnail aspect-square object-cover object-center w-56 h-56"
 						src={thumbnailImage}
 						alt={image_alt}
 						widths={[Thumbnail2X]}
@@ -48,38 +48,10 @@ const thumbnailSize = `${ThumbnailUnits}rem`;
 				: <DefaultThumbnail size={thumbnailSize} />
 			}
 	</a>
-	<div>
-		<time datetime={date?.toISOString()}>{dateString}</time>
-		<h3><a href={postURL}>{title}</a></h3>
-		{/* descriptionHTML is formatted as a <p> tag */}
+	<div class="flex-1">
+		<time class="block text-gray-500 mb-2 leading-none" datetime={date?.toISOString()}>{dateString}</time>
+		<h3 class="text-xl font-semibold mb-2"><a class="text-blue-700 hover:underline" href={postURL}>{title}</a></h3>
+		{/* descriptionHTML is formatted as a <p> tag - Tailwind prose handles paragraph styling if applied upstream */}
 		<Fragment set:html={descriptionHTML} />
 	</div>
 </li>
-
-<style>
-	li {
-		margin: var(--pico-block-spacing-vertical) 0 0 0;
-		display: flex;
-		flex-direction: row;
-		gap: var(--pico-block-spacing-horizontal);
-	}
-
-	img.thumbnail {
-		aspect-ratio: 1;
-		object-fit: cover;
-		object-position: center;
-		width: 14rem;
-		height: 14rem;
-	}
-
-	li > div {
-		flex: 1;
-	}
-
-	time {
-		color: var(--pico-muted-color);
-		margin-bottom: calc(var(--pico-block-spacing) * 0.5);
-		line-height: 1;
-		display: block;
-	}
-</style>

src/components/GetStartedStep.astro

@@ -10,50 +10,22 @@ interface Props {
 const { title, src } = Astro.props;
 ---
 
-<li>
-	<figure>
-		<Image src={src} alt={title} loading="eager" />
-		<figcaption>
-			<h3>{title}</h3>
+<li class="relative pl-4 mb-6 [counter-increment:item]">
+	<figure class="flex flex-row items-start gap-6">
+		<Image class="w-24" src={src} alt={title} loading="eager" />
+		<figcaption class="p-0">
+			<h3 class="my-2 text-xl text-primary font-semibold">{title}</h3>
 			<slot />
 		</figcaption>
 	</figure>
 </li>
 
 <style>
-	figure {
-		display: flex;
-		flex-direction: row;
-		align-items: flex-start;
-		gap: 1.5rem;
-	}
-
-	figure figcaption {
-		padding: 0;
-	}
-
-	figure img {
-		width: 100px;
-	}
-
-	h3 {
-		margin: 0.5rem 0;
-		font-size: 1.25rem;
-		color: var(--color-accent);
-	}
-
-	li {
-		counter-increment: item;
-		padding-left: 1rem;
-		margin-bottom: var(--pico-block-spacing-vertical);
-		position: relative;
-	}
-
 	li::before {
 		content: counter(item);
 		font-weight: bold;
 		font-size: 2rem;
-		color: var(--color-accent);
+		color: var(--color-sf-red);
 		position: absolute;
 		left: -1.5rem;
 		line-height: 1;

src/components/HeaderNav.astro

@@ -30,7 +30,7 @@ const routes = [
 				{routes.map((route) => (
 					<a
 						href={route.href}
-						class={`font-[var(--font-barlow)] font-bold text-lg transition-colors ${
+						class={`no-underline hover:underline text-lg transition-colors ${
 							route.highlight
 								? "bg-[var(--color-sf-red)] text-white px-4 py-2 rounded-lg hover:bg-[#d54d4b]"
 								: "text-gray-800 hover:text-[var(--color-sf-red)]"

src/components/TeamList.astro

@@ -7,7 +7,7 @@ import john from "@/assets/team/john-dunning.png";
 import robby from "@/assets/team/robby-taine.png";
 ---
 
-<section>
+<section class="my-6 flex flex-row flex-wrap items-start gap-12">
 	<TeamMember
 		name="Francis Li"
 		title="President"
@@ -38,14 +38,3 @@ import robby from "@/assets/team/robby-taine.png";
 		image={john}
 	/>
 </section>
-
-<style>
-	section {
-		margin: var(--pico-block-spacing-vertical) 0;
-		display: flex;
-		flex-direction: row;
-		flex-wrap: wrap;
-		align-items: flex-start;
-		gap: var(--pico-block-spacing);
-	}
-</style>

src/components/TeamMember.astro

@@ -11,49 +11,15 @@ interface Props {
 const { name, title, image } = Astro.props;
 ---
 
-<figure>
+<figure class="flex-grow basis-0 min-w-[15ch] flex flex-col justify-between items-center gap-2">
 	<Image
+		class="rounded-full w-[114px] h-[114px] object-cover"
 		src={image}
 		alt={name}
 		loading="eager"
 	/>
 	<figcaption>
-		<h3>{name}</h3>
-		<h4>{title}</h4>
+		<h3 class="text-center m-0 font-semibold text-xl">{name}</h3>
+		<h4 class="text-center m-0 font-normal text-base mt-1">{title}</h4>
 	</figcaption>
 </figure>
-
-<style>
-	figure {
-		flex-grow: 1;
-		flex-basis: 0%;
-		min-width: 15ch;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		align-items: center;
-		gap: calc(.5 * var(--pico-block-spacing));
-	}
-
-	img {
-		border-radius: 50%;
-		width: 114px;
-		height: 114px;
-		object-fit: cover;
-	}
-
-	h3, h4 {
-		text-align: center;
-		margin: 0;
-	}
-
-	h3 {
-		font-size: 1.25rem;
-	}
-
-	h4 {
-		font-weight: normal;
-		font-size: 1rem;
-		margin-top: 0.25rem;
-	}
-</style>

src/pages/about/index.astro

@@ -41,14 +41,14 @@ const minutes = await getMinutes();
 		<a href="https://www.civictechnologists.org/">Alliance of Civic Technologists</a>.
 	</p>
 
-	<h2 id="core-team">Meet the Board</h2>
+	<h2 class="text-2xl font-bold mt-8 mb-4" id="core-team">Meet the Board</h2>
 
 	<TeamList />
 
 	{minutes.length > 0 &&
-		<h3 id="minutes">Minutes of Quarterly Board Meetings</h3>
+		<h3 class="text-xl font-semibold mt-6 mb-3" id="minutes">Minutes of Quarterly Board Meetings</h3>
 
-		<ul>
+		<ul class="list-disc pl-5 space-y-1 mb-6">
 			{minutes.map(({ data: { url, year, quarter, isDraft }}) => (
 				<li>
 					<a href={url} target="_blank">
@@ -59,11 +59,11 @@ const minutes = await getMinutes();
 		</ul>
 	}
 
-	<h2 id="code-of-conduct">Code of Conduct</h2>
+	<h2 class="text-2xl font-bold mt-8 mb-4" id="code-of-conduct">Code of Conduct</h2>
 
 	<p>SF Civic Tech is a space for everyone. What does that mean?</p>
 
-	<ul>
+	<ul class="list-disc pl-5 space-y-1 mb-4">
 		<li>We value the people here and make everyone feel welcome</li>
 		<li>We make room for all brigade members to engage, discuss, and collaborate</li>
 		<li>We support each other to build a strong civic tech community</li>
@@ -85,13 +85,7 @@ const minutes = await getMinutes();
 		<a href="mailto:[email protected]">[email protected]</a>.
 	</p>
 
-	<a href="about/code-of-conduct" role="button">
+	<a href="about/code-of-conduct" role="button" class="inline-block bg-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
 		Read the full Code of Conduct
 	</a>
 </BaseLayout>
-
-<style>
-	a[role="button"] {
-		margin-top: calc(.5 * var(--pico-block-spacing-vertical));
-	}
-</style>

src/pages/blog/[slug].astro

@@ -46,28 +46,16 @@ const meta = {
 	header=""
 	meta={meta}
 >
-	<h1>{title}</h1>
-	<div class="date">
+	<h1 class="mb-2 text-3xl font-bold">{title}</h1>
+	<div class="date text-sm mb-6 flex justify-between items-center">
 		<time datetime={date?.toISOString()}>{dateString}</time>
 		<NavLink href="/blog">All posts</NavLink>
 	</div>
 	{imageData &&
-		<p>
+		<p class="mb-4">
 			<Image src={imageData} alt={image_alt} />
 		</p>}
-	<Content />
+	<div class="prose max-w-none">
+		<Content />
+	</div>
 </BaseLayout>
-
-<style>
-	h1 {
-		margin-bottom: calc(var(--pico-block-spacing-vertical) * .5);
-	}
-
-	.date {
-		font-size: smaller;
-		margin-bottom: calc(var(--pico-block-spacing-vertical) * 1.5);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-</style>

src/pages/donate.astro

@@ -3,19 +3,19 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
 ---
 
 <BaseLayout title="Donate" header="Help Support SF Civic Tech">
-	<p>
+	<p class="mb-4">
 		SF Civic Tech members meet every week to make our community and government
 		better. Every hack night, talk, workshop, event, and project is organized
 		100% by volunteers.
 	</p>
 
-	<p>
+	<p class="mb-4">
 		We are supported by generous sponsors and individuals. Help us continue to
 		do this work through a tax-deductible donation on our Open Collective page.
 	</p>
 
-	<p>
-		<a href="https://opencollective.com/sfcivictech" role="button">
+	<p class="mb-4">
+		<a href="https://opencollective.com/sfcivictech" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
 			Donate Now!
 		</a>
 	</p>

src/pages/get-started.astro

@@ -16,11 +16,11 @@ const meta = {
 <BaseLayout title="Get Started"
 	meta={meta}
 >
-	<p>
+	<p class="mb-4">
 		Regardless of skillset or background, anyone can contribute to their
 		community through SF Civic Tech
 	</p>
-	<ol class="steps">
+	<ol class="list-none [counter-reset:item] mt-6">
 		<GetStartedStep
 			title="Tell us about yourself"
 			src={about}
@@ -33,8 +33,8 @@ const meta = {
 			title="Onboard"
 			src={onboard}
 		>
-			<ol>
-				<li>
+			<ol class="list-decimal pl-5 space-y-1">
+				<li class="marker:initial">
 					Read our <a href={base(codeOfConductURL)}>Code of Conduct</a>
 				</li>
 				<li>
@@ -63,15 +63,3 @@ const meta = {
 		</GetStartedStep>
 	</ol>
 </BaseLayout>
-
-<style>
-	ol.steps {
-		list-style: none;
-		counter-reset: item;
-		margin-top: var(--pico-block-spacing-vertical);
-	}
-
-	a {
-		font-weight: bold;
-	}
-</style>

src/styles/global.css

@@ -61,6 +61,11 @@
 	p {
 		@apply mb-4;
 	}
+
+	a:where(a:not([role=button])), [role=link] {
+		color: var(--color-sf-red);
+		@apply underline font-semibold;
+	}
 }
 
 @layer utilities {