From da324dec741586720a6babf30169a0855a0bb6a7 Mon Sep 17 00:00:00 2001 From: Stefan Imhoff Date: Tue, 4 Apr 2023 19:42:44 +0200 Subject: [PATCH] feat: add page layout and grid layout --- src/layouts/BaseLayout.astro | 2 +- src/layouts/GridLayout.astro | 28 ++++++++++++++++++++++++++++ src/layouts/PageLayout.astro | 15 +++++++++++---- 3 files changed, 40 insertions(+), 5 deletions(-) create mode 100644 src/layouts/GridLayout.astro diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 73bf9b1..963c93d 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -51,7 +51,7 @@ const { title, backLink } = Astro.props; diff --git a/src/layouts/GridLayout.astro b/src/layouts/GridLayout.astro new file mode 100644 index 0000000..5b19c4b --- /dev/null +++ b/src/layouts/GridLayout.astro @@ -0,0 +1,28 @@ +--- +import cx from 'classnames'; + +import BaseLayout from './BaseLayout.astro'; + +export interface Props { + class?: string; + grid?: 'wide' | 'narrow'; +} + +const { frontmatter, class: className, grid = 'wide' } = Astro.props; +const gridVariant = frontmatter.grid || grid; + +const gridClasses = cx('grid w-full grid-cols-18', 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' }, + { 'md:col-start-3 md:col-end-16': gridVariant === 'wide' } +); +--- + + +
+
+ +
+
+ diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro index b7364a4..adf04a7 100644 --- a/src/layouts/PageLayout.astro +++ b/src/layouts/PageLayout.astro @@ -1,11 +1,18 @@ --- -import BaseLayout from '../layouts/BaseLayout.astro'; import { Title } from '../components/Title'; -const { frontmatter } = Astro.props; +import GridLayout from './GridLayout.astro'; + +export interface Props { + class?: string; + grid?: 'wide' | 'narrow'; +} + +const { frontmatter, class: className, grid = 'wide' } = Astro.props; +const gridVariant = frontmatter.grid || grid; --- - + {frontmatter.title} - +