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

refactor: replace classnames with class:list

Browse Source
This commit is contained in:
Stefan Imhoff
2024-09-11 13:21:11 +02:00
parent 526fe22cda
commit c9461b356d
48 changed files with 535 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/layouts/GridLayout.astro
View File

@@ -1,7 +1,5 @@
---
// Cspell:words astro classnames fullsize noindex
import cx from 'classnames';
// Cspell:words astro fullsize noindex
import BaseLayout from './BaseLayout.astro';
export interface Props {
@@ -33,24 +31,6 @@ const {
noindex,
title,
} = Astro.props;
const gridClasses = cx('grid w-full grid-cols-18', { 'gap-y-gap': gap }, className);
const wrapperClasses = cx(
{ 'col-start-1 col-end-19': grid === 'fullsize' },
{ 'col-start-2 col-end-18': grid === 'wide' || grid === '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':
grid === 'narrow',
},
{ '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',
},
{ 'gap-y-gap': gap }
);
---
<BaseLayout
@@ -63,12 +43,28 @@ const wrapperClasses = cx(
noindex={noindex}
title={title}
>
<div class={gridClasses}>
<div class:list={['grid w-full grid-cols-18', { 'gap-y-gap': gap }, className]}>
<slot name="title" />
<slot name="before-content" />
{
grid !== 'fullsize' ? (
<div class={wrapperClasses}>
<div
class:list={[
{ 'col-start-2 col-end-18': grid === 'wide' || grid === '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':
grid === 'narrow',
},
{ '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',
},
{ 'gap-y-gap': gap },
]}
>
<slot />
</div>
) : (