diff --git a/src/layouts/GridLayout.astro b/src/layouts/GridLayout.astro index 5b19c4b..ec10800 100644 --- a/src/layouts/GridLayout.astro +++ b/src/layouts/GridLayout.astro @@ -5,24 +5,36 @@ import BaseLayout from './BaseLayout.astro'; export interface Props { class?: string; - grid?: 'wide' | 'narrow'; + gap?: boolean; + grid?: 'fullsize' | 'wide' | 'narrow'; } -const { frontmatter, class: className, grid = 'wide' } = Astro.props; +const { frontmatter, class: className, gap = true, grid = 'narrow' } = Astro.props; const gridVariant = frontmatter.grid || grid; -const gridClasses = cx('grid w-full grid-cols-18', className); +const gridClasses = cx('grid w-full grid-cols-18', { 'gap-y-gap': gap }, className); const wrapperClasses = cx( - 'col-start-2 col-end-18', - { 'md:col-start-6 md:col-end-14 xl:col-start-7 xl:col-end-13': gridVariant === 'narrow' }, + { 'col-start-1 col-end-19': gridVariant === 'fullsize' }, + { 'col-start-2 col-end-18': gridVariant === 'wide' || gridVariant === 'narrow' }, + { + 'md:col-start-5 md:col-end-15 xl:col-start-6 xl:col-end-14 3xl:col-start-7 3xl:col-end-13': + gridVariant === 'narrow', + }, { 'md:col-start-3 md:col-end-16': gridVariant === 'wide' } ); ---
-
- -
+ + { + gridVariant !== 'fullsize' ? ( +
+ +
+ ) : ( + + ) + }
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index adf04a7..ec028cd 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -1,4 +1,5 @@ --- +import cx from 'classnames'; import { Title } from '../components/Title'; import GridLayout from './GridLayout.astro'; @@ -8,11 +9,21 @@ export interface Props { grid?: 'wide' | 'narrow'; } -const { frontmatter, class: className, grid = 'wide' } = Astro.props; +const { frontmatter, class: className, grid = 'narrow' } = Astro.props; const gridVariant = frontmatter.grid || grid; +const titleClasses = cx( + 'col-start-2 col-end-18 !mbe-0', + { + 'md:col-start-3 md:col-end-17': gridVariant === 'wide', + 'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': gridVariant === 'narrow', + }, + className +); --- - {frontmatter.title} + + {frontmatter.title} +