Add tailwind/typography plugin for blog posts

Add 1u, 2u, etc. and 1col, 2col, etc. based on the 40px unit as a theme spacing.
Add mainClass prop to BaseLayout.astro to style the container.

Author: fwextensions

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",

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,10 +37,10 @@ const dateString = formatShortMDY(date);
 const thumbnailSize = `${ThumbnailUnits}rem`;
 ---
 
-<li class="my-6 flex flex-row gap-4">
+<li class="mb-2u flex flex-row gap-1u">
 	<a href={postURL}>
 			{thumbnailImage
-				? <Image class="thumbnail aspect-square object-cover object-center w-56 h-56"
+				? <Image class="thumbnail aspect-square object-cover object-center w-4col"
 						src={thumbnailImage}
 						alt={image_alt}
 						widths={[Thumbnail2X]}
@@ -50,7 +51,7 @@ const thumbnailSize = `${ThumbnailUnits}rem`;
 	</a>
 	<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>
+		<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>

src/components/HeaderNav.astro

@@ -41,13 +41,15 @@ const routes = [
 						</NavLink>
 					</li>
 				))}
-				<li>
-					<button class="md:hidden text-stone-800" id="mobile-menu-button">
+<!--
+				<li class="md:hidden">
+					<button class="text-stone-800" id="mobile-menu-button">
 						<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 						</svg>
 					</button>
 				</li>
+-->
 		</ul>
 	</nav>
 	<!-- Mobile menu -->

src/layouts/BaseLayout.astro

@@ -10,12 +10,14 @@ interface Props {
 	header?: string;
 	meta?: MetadataProp;
 	frontmatter?: CollectionEntry<"blog">["data"] | CollectionEntry<"projects">["data"];
+	mainClass?: string;
 }
 
 let {
 	title = "SF Civic Tech",
 	meta = {},
-	frontmatter
+	frontmatter,
+	mainClass,
 } = Astro.props;
 
 if (frontmatter) {
@@ -39,7 +41,7 @@ const header = Astro.props.header ?? title;
 	meta={meta}
 >
 	<HeaderNav />
-	<main class="my-10">
+	<main class:list={["my-2u", mainClass]}>
 		{header &&
 			<h1 class="text-3xl font-bold mb-8">{header}</h1>}
 		<slot />

src/pages/blog/[slug].astro

@@ -2,7 +2,6 @@
 import { Image } from "astro:assets";
 import { render } from "astro:content";
 import BaseLayout from "@/layouts/BaseLayout.astro";
-import NavLink from "@/components/NavLink.astro";
 import { getImageAsset, formatShortMDY } from "@/utils";
 import { getBlogPosts } from "@/content";
 
@@ -45,14 +44,15 @@ const meta = {
 	title={title}
 	header=""
 	meta={meta}
+	mainClass="max-w-8col mx-auto"
 >
-	<h1 class="mb-2 text-3xl font-bold">{title}</h1>
-	<div class="date text-sm mb-6 flex justify-between items-center">
+	<h1 class="mb-1u text-3xl font-bold">{title}</h1>
+	<div class="font-condensed text-sm mb-2u flex justify-between items-center">
 		<time datetime={date?.toISOString()}>{dateString}</time>
-		<NavLink href="/blog">All posts</NavLink>
+		<a href="/blog">All posts</a>
 	</div>
 	{imageData &&
-		<p class="mb-4">
+		<p class="mb-1u">
 			<Image src={imageData} alt={image_alt} />
 		</p>}
 	<div class="prose max-w-none">

src/styles/global.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @theme {
 	--font-body: "Barlow", sans-serif;
@@ -19,18 +20,33 @@
 	--text-4xl: 3rem;      /* 48px */
 	--text-5xl: 3.75rem;   /* 60px */
 	--text-6xl: 4.5rem;    /* 72px */
+
+	--spacing-1u: var(--unit);
+	--spacing-2u: calc(var(--unit) * 2);
+	--spacing-3u: calc(var(--unit) * 3);
+	--spacing-4u: calc(var(--unit) * 4);
+	--spacing-5u: calc(var(--unit) * 5);
+	--spacing-6u: calc(var(--unit) * 6);
+	--spacing-7u: calc(var(--unit) * 7);
+	--spacing-8u: calc(var(--unit) * 8);
+
+	--spacing-1col: calc(var(--unit) * (1 * 2 - 1));
+	--spacing-2col: calc(var(--unit) * (2 * 2 - 1));
+	--spacing-3col: calc(var(--unit) * (3 * 2 - 1));
+	--spacing-4col: calc(var(--unit) * (4 * 2 - 1));
+	--spacing-5col: calc(var(--unit) * (5 * 2 - 1));
+	--spacing-6col: calc(var(--unit) * (6 * 2 - 1));
+	--spacing-7col: calc(var(--unit) * (7 * 2 - 1));
+	--spacing-8col: calc(var(--unit) * (8 * 2 - 1));
+	--spacing-9col: calc(var(--unit) * (9 * 2 - 1));
+	--spacing-10col: calc(var(--unit) * (10 * 2 - 1));
 }
 
 @layer base {
 	:root {
-		/* Colors */
 		--color-sf-red: #f22613;
-		/*
-		--color-sf-blue: #67b4f5;
-		--color-sf-purple: #c05f9a;
-		--color-sf-navy: #323266;
-		--color-sf-cream: #f7efde;
-		*/
+
+		--unit: 40px;
 	}
 
 	html {
@@ -56,6 +72,34 @@
 		background-color: var(--color-background-base);
 	}
 
+	main::before {
+		--col-color: rgba(255, 0, 0, 0.03);
+		--col-size: 40px;
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+		background-image:
+			repeating-linear-gradient(
+				to right,
+				var(--col-color) 0,
+				var(--col-color) var(--col-size),
+				transparent var(--col-size),
+				transparent calc(var(--col-size) * 2)
+			);
+		background-size: 80px 100%;
+		z-index: 1;
+		display: none;
+	}
+
+	main {
+		position: relative;
+		z-index: 2;
+	}
+
 	p {
 		@apply mb-4;
 	}
@@ -68,7 +112,7 @@
 			duration-300
 			ease-out
 			underline-offset-[.2rem]
-			decoration-primary/25
+			decoration-primary/20
 			hover:decoration-primary;
 	}
 }
@@ -82,4 +126,23 @@
 			display: none;
 		}
 	}
+
+	.prose {
+		line-height: revert;
+
+		/*
+		a {
+		*/
+		a:where(a:not([role=button])), [role=link] {
+			color: var(--color-sf-red);
+		@apply underline
+			font-semibold
+			transition
+			duration-300
+			ease-out
+			underline-offset-[.2rem]
+			decoration-primary/20
+			hover:decoration-primary;
+		}
+	}
 }

tailwind.config.js

@@ -1,11 +1,9 @@
-/** @type {import('tailwindcss').Config} */
+/** @type {import("tailwindcss").Config} */
+import typography from "@tailwindcss/typography";
+
 export default {
-  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-  theme: {
-    extend: {
-      // Theme extensions are now primarily handled via CSS variables in global.css
-      // Keep this extend block if you have other non-variable extensions or plugins need it.
-    },
-  },
-  plugins: [],
+	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+	plugins: [
+		typography
+	],
 };