New text-forward design

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import icon from "astro-icon";
+import tailwindcss from "@tailwindcss/vite";
 
 const oldCivcURL = "/blog/2019-06-22-introducing-civc-tech-to-san-franciscos-underserved-communities";
 
@@ -39,6 +40,9 @@ export default defineConfig({
 			modules: {
 				localsConvention: "camelCase",
 			}
-		}
+		},
+		plugins: [
+			tailwindcss()
+		]
 	}
 });

package.json

@@ -23,6 +23,8 @@
     "@stylistic/eslint-plugin": "^4.4.0",
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.2",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.1.3",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
     "@typescript-eslint/parser": "^8.32.1",
@@ -40,6 +42,7 @@
     "react-dom": "^19.1.0",
     "stylelint": "^16.19.1",
     "stylelint-config-html": "^1.1.0",
+    "tailwindcss": "^4.1.3",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1"
   }

src/components/BigHeading.astro

@@ -0,0 +1,55 @@
+---
+interface Props {
+	anchor?: "left" | "right";
+	size?: "lg" | "md" | "sm";
+	class?: string;
+}
+
+const Sizes = {
+	lg: {
+		Heading: "h2",
+		headingFontSize: "text-9xl",
+	},
+	md: {
+		Heading: "h3",
+		headingFontSize: "text-5xl leading-[0.9]",
+	},
+	sm: {
+		Heading: "h4",
+		headingFontSize: "text-3xl",
+	},
+};
+
+const {
+	anchor = "left",
+	size = "lg",
+	class: className,
+} = Astro.props;
+const { Heading, headingFontSize } = Sizes[size];
+---
+
+<Heading
+	class:list={[
+		"flex-1",
+		"font-condensed",
+		"font-semibold",
+		"uppercase",
+		headingFontSize,
+		"leading-[0.8]",
+		"trim-start",
+		"mb-0",
+		className,
+//		anchor === "left" && "text-right",
+	]}
+>
+	<slot />
+</Heading>
+
+<style>
+	h2, h3, h4 {
+		:global(b) {
+			color: var(--color-sf-red);
+			font-weight: inherit;
+		}
+	}
+</style>

src/components/BigText.astro

@@ -0,0 +1,99 @@
+---
+import TagOrnament from "./TagOrnament.astro";
+
+interface Props {
+	id?: string;
+	anchor?: "left" | "right";
+	size?: "lg" | "md" | "sm";
+	showOrnament?: boolean;
+}
+
+const Sizes = {
+	lg: {
+		Heading: "h2",
+		headingFontSize: "text-9xl",
+		bodyFontSize: "text-2xl leading-[1.2]",
+	},
+	md: {
+		Heading: "h3",
+		headingFontSize: "text-5xl leading-[0.9]",
+		bodyFontSize: "text-lg leading-[1.2]",
+	},
+	sm: {
+		Heading: "h4",
+		headingFontSize: "text-2xl",
+		bodyFontSize: "text-base",
+	},
+};
+
+const {
+	id,
+	anchor = "left",
+	size = "lg",
+	showOrnament = true,
+} = Astro.props;
+const { Heading, headingFontSize, bodyFontSize } = Sizes[size];
+---
+
+<section id={id} class="py-4">
+	<div
+		class:list={[
+			"flex",
+			"items-center",
+			"justify-between",
+			"gap-10",
+			{ "flex-row-reverse": anchor === "right" },
+		]}
+	>
+		<Heading
+			class:list={[
+				"flex-1",
+				"font-condensed",
+				"font-semibold",
+				"uppercase",
+				headingFontSize,
+				"leading-[0.8]",
+				"mb-0",
+				anchor === "left" && "text-right",
+			]}
+		>
+			<slot name="title" />
+		</Heading>
+		<div
+			class:list={[
+				"body",
+				"flex-1",
+				"text-stone-800",
+				bodyFontSize,
+				anchor === "right" && "text-right",
+			]}
+		>
+			<slot name="body" />
+		</div>
+	</div>
+	{showOrnament && (
+		<div class="flex justify-center mt-8">
+			<TagOrnament />
+		</div>
+	)}
+</section>
+
+<style>
+	h2, h3, h4 {
+		:global(b) {
+			color: var(--color-sf-red);
+			font-weight: inherit;
+		}
+	}
+
+	div.body {
+		:global(p:last-of-type) {
+			margin-bottom: 0;
+		}
+
+		:global(i) {
+      color: var(--color-stone-600);
+      font-weight: 600;
+		}
+	}
+</style>

src/components/BlogListItem.astro

@@ -1,7 +1,7 @@
 ---
 import { Image } from "astro:assets";
 import type { CollectionEntry } from "astro:content";
-import DefaultThumbnail from "@/components/DefaultThumbnail.astro";
+import DefaultThumbnail from "./DefaultThumbnail.astro";
 import { base, getImageAsset, formatShortMDY } from "@/utils";
 
 interface Props {
@@ -10,7 +10,8 @@ interface Props {
 
 // the thumbnail item is set to 14rem square, and the largest base font size is
 // 21px, so double that to support a max 2X image
-const ThumbnailUnits = 14;
+// TODO: fix this calculation to make it more generic
+const ThumbnailUnits = 17.5;
 const ThumbnailWidth = ThumbnailUnits * 21;
 const Thumbnail2X = 2 * ThumbnailWidth;
 
@@ -36,50 +37,23 @@ const dateString = formatShortMDY(date);
 const thumbnailSize = `${ThumbnailUnits}rem`;
 ---
 
-<li>
+<li class="mb-2u flex flex-row gap-1u">
 	<a href={postURL}>
 			{thumbnailImage
-				? <Image class="thumbnail"
+				? <Image class="thumbnail aspect-square object-cover object-center w-4col"
 						src={thumbnailImage}
 						alt={image_alt}
 						widths={[Thumbnail2X]}
 						sizes=`${Thumbnail2X}px`
+						loading="lazy"
 					/>
 				: <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-stone-500 font-condensed mb-2 leading-none" datetime={date?.toISOString()}>{dateString}</time>
+		<h3 class="text-2xl font-semibold font-condensed mb-6"><a 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/Button.astro

@@ -0,0 +1,40 @@
+---
+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",
+		"transition",
+		"duration-300",
+		"ease-out",
+		className
+	]}
+	target={newTab ? "_blank" : undefined}
+>
+	<slot />
+</a>