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 fullsize grid and align grid columns with title

Browse Source
This commit is contained in:
Stefan Imhoff
2023-04-06 10:20:50 +02:00
parent f6fde2c422
commit 08089f2324
2 changed files with 33 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/layouts/GridLayout.astro
View File

@@ -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' }
);
---
<BaseLayout title={frontmatter.title}>
<div class={gridClasses}>
<div class={wrapperClasses}>
<slot />
</div>
<slot name="title" />
{
gridVariant !== 'fullsize' ? (
<div class={wrapperClasses}>
<slot />
</div>
) : (
<slot />
)
}
</div>
</BaseLayout>

15
src/layouts/PageLayout.astro
View File

@@ -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
);
---
<GridLayout grid={gridVariant} class={className} {frontmatter}>
<Title>{frontmatter.title}</Title>
<Title slot="title" class={titleClasses}>
{frontmatter.title}
</Title>
<slot />
</GridLayout>