refactor: the chaotic grid to use subgrid and be much simpler

src/components/PageTitle.astro

@@ -3,7 +3,7 @@ import Title from './Title.astro';
 
 export interface Props {
 	class?: string;
-	grid?: 'fullsize' | 'wide' | 'narrow';
+	grid?: 'narrow' | 'wide' | 'fullsize';
 	innerGrid?: boolean;
 }
 
@@ -12,12 +12,11 @@ const { class: className, grid = 'narrow', innerGrid } = Astro.props;
 
 <Title
 	class:list={[
-		'col-start-2 col-end-18 !mbe-0',
+		'col-start-1 col-end-19 !mbe-0',
 		{
-			'col-start-1 col-end-18': grid === 'fullsize',
+			'col-start-2 col-end-3 md:col-start-3 md:col-end-17': grid === 'narrow',
-			'md:col-start-3 md:col-end-17': grid === 'wide',
+			'row-start-1': innerGrid,
-			'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
+			'!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17': !innerGrid,
-			'!col-start-1 row-start-1': innerGrid,
 		},
 		className,
 	]}

src/layouts/AboutLayout.astro

@@ -29,7 +29,7 @@ const schema = JSON.stringify({
 ---
 
 <GridLayout title={frontmatter.title} grid="narrow" backLink="/" {...frontmatter}>
-	<PageTitle slot="title" grid="narrow" {...frontmatter}>
+	<PageTitle grid="narrow" slot="title" {...frontmatter}>
 		{frontmatter.title}
 	</PageTitle>
 	<div

src/layouts/GridLayout.astro

@@ -8,7 +8,7 @@ export interface Props {
 	description?: string;
 	footer?: boolean;
 	gap?: boolean;
-	grid?: 'fullsize' | 'wide' | 'narrow';
+	grid?: 'narrow' | 'wide' | 'fullsize';
 	header?: boolean;
 	innerGrid?: boolean;
 	multicolumn?: boolean;
@@ -51,17 +51,14 @@ const {
 			grid !== 'fullsize' ? (
 				<div
 					class:list={[
-						{ 'col-start-2 col-end-18': grid === 'wide' || grid === 'narrow' },
+						'grid-cols-subgrid',
+						{ grid: innerGrid },
 						{
-							'md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13':
+							'col-start-2 col-end-18 md:col-start-3 md:col-end-17': grid === 'wide',
-								grid === 'narrow',
 						},
-						{ 'md:col-start-3 md:col-end-17': grid === 'wide' },
-						{ 'grid w-full': innerGrid },
-						{ 'grid-cols-16 md:grid-cols-14': innerGrid && grid === 'wide' },
 						{
-							'grid-cols-16 md:grid-cols-10 xl:grid-cols-8 3xl:grid-cols-6':
+							'col-start-2 col-end-18 md:col-start-5 md:col-end-15 lg:col-start-6 lg:col-end-14 xl:col-start-7 xl:col-end-13':
-								innerGrid && grid === 'narrow',
+								grid === 'narrow',
 						},
 						{ 'gap-y-gap': gap },
 						{

src/layouts/PageLayout.astro

@@ -18,7 +18,7 @@ const gridVariant = frontmatter.grid || grid;
 ---
 
 <GridLayout grid={gridVariant} class={className} {...frontmatter}>
-	<PageTitle slot="title" grid={gridVariant} {...frontmatter}>
+	<PageTitle slot="title" grid={gridVariant}>
 		{frontmatter.title}
 	</PageTitle>
 	{

src/pages/haiku.astro

@@ -24,7 +24,7 @@ const description =
 	<PageTitle grid="wide" innerGrid>Haiku</PageTitle>
 
 	<article
-		class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
 	>
 		<Intro components={mapping} />
 	</article>

src/pages/index.astro

@@ -35,9 +35,6 @@ rssPosts.sort(sortMarkdownByDate);
 <GridLayout title={title} description={description} grid="fullsize" class="grid" innerGrid>
 	<PageTitle class="!text-6 sm:!text-7">
 		{site.title}
-		<small class="block text-[0.198em] font-light tracking-normal dark:text-[0.195em]"
-			>{site.tagline}</small
-		>
 	</PageTitle>
 	<div
 		class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"

src/pages/journal.astro

@@ -24,11 +24,11 @@ const title = 'Journal';
 const description = 'I am writing essays about various topics in this Journal.';
 ---
 
-<GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
+<GridLayout title={title} description={description} grid="wide" backLink="/" innerGrid>
 	<PageTitle grid="wide" innerGrid>Journal</PageTitle>
 
 	<article
-		class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
+		class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
 		data-pagefind-ignore
 	>
 		<Intro components={mapping} />

src/pages/projects.astro

@@ -21,9 +21,11 @@ const description =
 ---
 
 <GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
-	<PageTitle grid="fullsize" innerGrid class=""> Projects </PageTitle>
+	<PageTitle grid="wide" innerGrid class="">Projects</PageTitle>
 
-	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
+	<article
+		class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
+	>
 		<Intro components={mapping} />
 	</article>