diff --git a/src/components/PageTitle.astro b/src/components/PageTitle.astro index b9e9860..b329d6a 100644 --- a/src/components/PageTitle.astro +++ b/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; - <PageTitle slot="title" grid="narrow" {...frontmatter}> + <PageTitle grid="narrow" slot="title" {...frontmatter}> {frontmatter.title} </PageTitle> <div diff --git a/src/layouts/GridLayout.astro b/src/layouts/GridLayout.astro index d9d1c7a..30e0b03 100644 --- a/src/layouts/GridLayout.astro +++ b/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': - grid === 'narrow', + 'col-start-2 col-end-18 md:col-start-3 md:col-end-17': grid === 'wide', }, - { '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': - innerGrid && grid === 'narrow', + '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': + grid === 'narrow', }, { 'gap-y-gap': gap }, { diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index 6d16ce7..dc1330d 100644 --- a/src/layouts/PageLayout.astro +++ b/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> { diff --git a/src/pages/haiku.astro b/src/pages/haiku.astro index 27b1a86..8f2a8a4 100644 --- a/src/pages/haiku.astro +++ b/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> diff --git a/src/pages/index.astro b/src/pages/index.astro index a290a2c..8b19681 100644 --- a/src/pages/index.astro +++ b/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" diff --git a/src/pages/journal.astro b/src/pages/journal.astro index ba15ec7..996e491 100644 --- a/src/pages/journal.astro +++ b/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} /> diff --git a/src/pages/projects.astro b/src/pages/projects.astro index 34a3499..63364b7 100644 --- a/src/pages/projects.astro +++ b/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>