refactor: move custom grids into the components

src/components/ColorStack.tsx

@@ -6,7 +6,10 @@ interface Props {
 
 export const ColorStack: FunctionalComponent<Props> = ({ children, ...props }) => {
 	return (
-		<article class="col-start-1 col-end-17 grid grid-cols-books gap-[20px]" {...props}>
+		<article
+			class="col-start-1 col-end-17 grid grid-cols-[repeat(auto-fill,_minmax(150px,_1fr))] gap-[20px]"
+			{...props}
+		>
 			{children}
 		</article>
 	);

src/components/PageHeader.astro

@@ -13,7 +13,7 @@ export interface Props {
 
 const { backLink, class: className, navigation = true } = Astro.props;
 const classes = cx(
-	'sticky grid w-full grid-cols-18 grid-rows-layout bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden z-50',
+	'sticky grid w-full grid-cols-18 grid-rows-[clamp(3rem,_5.55vw,_9rem)] bg-shibui-100 mbe-layout block-start-0 dark:bg-shibui-900 print:hidden z-50',
 	className
 );
 ---

src/components/Toolbox.astro

@@ -11,7 +11,9 @@ export interface Props {
 const { tools } = Astro.props;
 ---
 
-<ul class="grid grid-cols-toolbox items-center gap-2 rounded-2 bg-black/5 p-5 dark:bg-white/5">
+<ul
+	class="grid grid-cols-[repeat(auto-fit,_minmax(80px,_1fr))] items-center gap-2 rounded-2 bg-black/5 p-5 dark:bg-white/5"
+>
 	{
 		tools.map(({ name, url, image }) => (
 			<li>

src/pages/[...slug].astro

@@ -97,9 +97,9 @@ const description = '…';
 
 	<Pagination
 		nextText={'Next'}
-		nextUrl={next.slug && next.slug}
+		nextUrl={next.slug && `/${next.slug}/`}
 		previousText={'Next'}
-		previousUrl={prev.slug && prev.slug}
+		previousUrl={prev.slug && `/${prev.slug}/`}
 	/>
 </GridLayout>
 
@@ -129,11 +129,20 @@ const description = '…';
 		}
 
 		& > pre {
-			@apply md:mie-[calc(5.55vw_*_-1)] md:mis-[calc(5.55vw_*_-1)];
+			@apply md:-mie-[5.55vw] md:-mis-[5.55vw];
 		}
 
-		& > figure {
-			@apply md:mie-[calc(5.55vw_*_-1_*_3)] md:mis-[calc(5.55vw_*_-1_*_3)] xl:mie-[calc(5.55vw_*_-1_*_2)] xl:mis-[calc(5.55vw_*_-1_*_2)];
+		& > figure.figure-wide {
+			@apply md:-mie-[16.65vw] md:-mis-[16.65vw] xl:-mie-[11.1vw] xl:-mis-[11.1vw] [&_img]:w-full [&_img]:max-w-none;
+		}
+
+		& > figure.figure-fullsize {
+			@apply -mie-[5.55vw] -mis-[5.55vw] md:-mie-[22.2vw] md:-mis-[22.2vw] xl:-mie-[27.75vw] xl:-mis-[27.75vw] 3xl:-mie-[33.3vw] 3xl:-mis-[33.3vw] [&_img]:w-full [&_img]:max-w-none;
+		}
+
+		& > figure .image-shadow,
+		& > figure p {
+			@apply m-0;
 		}
 	}
 </style>

src/pages/ai-art.astro

@@ -31,7 +31,7 @@ const description = '…';
 
 	<nav class="col-start-1 col-end-18 md:col-start-1 md:col-end-16" aria-label="AI Art">
 		<ol
-			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-gallery md:grid-cols-gallery md:grid-rows-gallery"
+			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
 		>
 			{
 				allAiArt.map(({ slug, data }) => (

src/pages/haiku.astro

@@ -27,7 +27,9 @@ const description = '…';
 	</article>
 
 	<nav class="col-start-1 col-end-17 md:col-start-2 md:col-end-14" aria-label="Haiku">
-		<ol class="grid list-none grid-cols-haiku-list justify-items-center gap-[1rem]">
+		<ol
+			class="grid list-none grid-cols-[repeat(auto-fill,_minmax(3rem,_1fr))] justify-items-center gap-[1rem]"
+		>
 			{
 				allHaiku.map(({ slug }) => (
 					<li>

src/pages/haiku/[...slug].astro

@@ -31,14 +31,14 @@ const description = '…';
 ---
 
 <BaseLayout title={title} description={description} header={false} footer={false}>
-	<div class="grid h-full grid-cols-18 grid-rows-haiku">
+	<div class="grid-rows-[clamp(3rem,_5.55vw,_9rem) 1fr] grid h-full grid-cols-18">
 		<PageHeader
 			class="z-10 col-span-full row-start-1 bg-transparent !mbe-0 dark:bg-transparent"
 			navigation={false}
 			backLink="/haiku/"
 		/>
 		<div
-			class="haiku:grid-cols-haiku-xl col-span-full row-start-1 row-end-3 grid w-full grid-cols-haiku"
+			class="haiku:grid-cols-[repeat(auto-fit,_minmax(25rem,_1fr)] col-span-full row-start-1 row-end-3 grid w-full grid-cols-[repeat(auto-fit,_minmax(15rem,_1fr))]"
 		>
 			<div class="grid h-full w-full items-center">
 				<Verse

src/pages/projects/[...slug].astro

@@ -41,9 +41,7 @@ const description = '…';
 		{entry.data.title}
 	</PageTitle>
 
-	<article
-		class="project-content col-start-1 col-end-17 grid-cols-books gap-[20px] [&_img]:w-full"
-	>
+	<article class="project-content col-start-1 col-end-17 [&_img]:w-full">
 		<div class="mbe-7">
 			{entry.data.categories.map((category: string) => <Tag>{category}</Tag>)}
 		</div>

src/pages/sketchnotes.astro

@@ -31,7 +31,7 @@ const description = 'This is a collection of Sketchnotes I’ve drawn.';
 
 	<nav class="md:col-start-1 md:col-end-16" aria-label="Sketchnotes">
 		<ol
-			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-gallery md:grid-cols-gallery md:grid-rows-gallery"
+			class="gap-[max(25px,_2vw)] md:grid md:grid-flow-row-dense md:auto-rows-[50px] md:grid-cols-[repeat(auto-fit,_minmax(50px,_1fr))] md:grid-rows-[50px]"
 		>
 			{
 				allSketchnotes.map(({ slug, data }) => (

tailwind.config.cjs

@@ -48,20 +48,6 @@ module.exports = {
 				14: 'repeat(14, minmax(0, 1fr))',
 				16: 'repeat(16, minmax(0, 1fr))',
 				18: 'repeat(18, minmax(0, 1fr))',
-				books: 'repeat(auto-fill, minmax(150px, 1fr))',
-				haiku: 'repeat(auto-fit, minmax(15rem, 1fr))',
-				'haiku-xl': 'repeat(auto-fit, minmax(25rem, 1fr)',
-				'haiku-list': 'repeat(auto-fill, minmax(3rem, 1fr))',
-				toolbox: 'repeat(auto-fit, minmax(80px, 1fr))',
-				gallery: 'repeat(auto-fit, minmax(50px, 1fr))',
-			},
-			gridTemplateRows: ({ theme }) => ({
-				layout: `clamp(3rem, ${theme('spacing.column')}, 9rem)`,
-				haiku: `clamp(3rem, ${theme('spacing.column')}, 9rem) 1fr`,
-				gallery: '50px',
-			}),
-			gridAutoRows: {
-				gallery: '50px',
 			},
 			columns: {
 				13: '13',