kogakure/website-astro-stefanimhoff.de
1
0
Fork 0
mirror of https://github.com/kogakure/website-astro-stefanimhoff.de.git synced 2026-02-03 20:15:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add page layout and grid layout

Browse Source
This commit is contained in:
Stefan Imhoff
2023-04-04 19:42:44 +02:00
parent 761c37fc8b
commit da324dec74
3 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/BaseLayout.astro
View File

@@ -51,7 +51,7 @@ const { title, backLink } = Astro.props;
<ThemeProvider /> <ThemeProvider />
</head> </head>
<body <body
class="flex h-screen flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures discretionary-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]" class="flex h-screen flex-col bg-shibui-100 font-sans font-normal leading-relaxed text-shibui-950 common-ligatures dark:bg-shibui-900 dark:text-shibui-200/[0.87]"
> >
<Sprite.Provider> <Sprite.Provider>
<PageHeader backLink={backLink} /> <PageHeader backLink={backLink} />

28
src/layouts/GridLayout.astro Normal file
View File

@@ -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' }
);
---
<BaseLayout title={frontmatter.title}>
<div class={gridClasses}>
<div class={wrapperClasses}>
<slot />
</div>
</div>
</BaseLayout>

15
src/layouts/PageLayout.astro
View File

@@ -1,11 +1,18 @@
--- ---
import BaseLayout from '../layouts/BaseLayout.astro';
import { Title } from '../components/Title'; 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;
--- ---
<BaseLayout title={frontmatter.title}> <GridLayout grid={gridVariant} class={className} {frontmatter}>
<Title>{frontmatter.title}</Title> <Title>{frontmatter.title}</Title>
<slot /> <slot />
</BaseLayout> </GridLayout>