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

refactor: the chaotic grid to use subgrid and be much simpler

Browse Source
This commit is contained in:
Stefan Imhoff
2026-01-27 16:25:50 +01:00
committed by Stefan Imhoff
parent 02ba52cefc
commit 585ad0a481
8 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/PageTitle.astro
View File

@@ -3,7 +3,7 @@ import Title from './Title.astro';
export interface Props {
class?: string;
grid?: 'fullsize' | 'wide' | 'narrow';
grid?: 'narrow' | 'wide' | 'fullsize';
innerGrid?: boolean;
}
@@ -12,12 +12,11 @@ const { class: className, grid = 'narrow', innerGrid } = Astro.props;
<Title
class:list={[
'col-start-2 col-end-18 !mbe-0',
'col-start-1 col-end-19 !mbe-0',
{
'col-start-1 col-end-18': grid === 'fullsize',
'md:col-start-3 md:col-end-17': grid === 'wide',
'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
'!col-start-1 row-start-1': innerGrid,
'col-start-2 col-end-3 md:col-start-3 md:col-end-17': grid === 'narrow',
'row-start-1': innerGrid,
'!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17': !innerGrid,
},
className,
]}

2
src/layouts/AboutLayout.astro
View File

@@ -29,7 +29,7 @@ const schema = JSON.stringify({
---
<GridLayout title={frontmatter.title} grid="narrow" backLink="/" {...frontmatter}>
<PageTitle slot="title" grid="narrow" {...frontmatter}>
<PageTitle grid="narrow" slot="title" {...frontmatter}>
{frontmatter.title}
</PageTitle>
<div

15
src/layouts/GridLayout.astro
View File

@@ -8,7 +8,7 @@ export interface Props {
description?: string;
footer?: boolean;
gap?: boolean;
grid?: 'fullsize' | 'wide' | 'narrow';
grid?: 'narrow' | 'wide' | 'fullsize';
header?: boolean;
innerGrid?: boolean;
multicolumn?: boolean;
@@ -51,17 +51,14 @@ const {
grid !== 'fullsize' ? (
<div
class:list={[
{ 'col-start-2 col-end-18': grid === 'wide' || grid === 'narrow' },
'grid-cols-subgrid',
{ grid: innerGrid },
{
'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',
'col-start-2 col-end-18 md:col-start-3 md:col-end-17': grid === 'wide',
},
{ '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',
'col-start-2 col-end-18 md:col-start-5 md:col-end-15 lg:col-start-6 lg:col-end-14 xl:col-start-7 xl:col-end-13':
grid === 'narrow',
},
{ 'gap-y-gap': gap },
{

2
src/layouts/PageLayout.astro
View File

@@ -18,7 +18,7 @@ const gridVariant = frontmatter.grid || grid;
---
<GridLayout grid={gridVariant} class={className} {...frontmatter}>
<PageTitle slot="title" grid={gridVariant} {...frontmatter}>
<PageTitle slot="title" grid={gridVariant}>
{frontmatter.title}
</PageTitle>
{

2
src/pages/haiku.astro
View File

@@ -24,7 +24,7 @@ const description =
<PageTitle grid="wide" innerGrid>Haiku</PageTitle>
<article
class="col-start-1 col-end-17 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
>
<Intro components={mapping} />
</article>

3
src/pages/index.astro
View File

@@ -35,9 +35,6 @@ rssPosts.sort(sortMarkdownByDate);
<GridLayout title={title} description={description} grid="fullsize" class="grid" innerGrid>
<PageTitle class="!text-6 sm:!text-7">
{site.title}
<small class="block text-[0.198em] font-light tracking-normal dark:text-[0.195em]"
>{site.tagline}</small
>
</PageTitle>
<div
class="col-start-1 col-end-19 md:col-start-1 md:col-end-11 xl:col-end-11 [&_div]:!border-x-0 [&_div]:!mbe-0 [&_div]:md:!border-s-0"

4
src/pages/journal.astro
View File

@@ -24,11 +24,11 @@ const title = 'Journal';
const description = 'I am writing essays about various topics in this Journal.';
---
<GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
<GridLayout title={title} description={description} grid="wide" backLink="/" innerGrid>
<PageTitle grid="wide" innerGrid>Journal</PageTitle>
<article
class="col-start-1 col-end-18 grid md:col-start-4 md:col-end-12 xl:col-start-5 xl:col-end-11"
class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
data-pagefind-ignore
>
<Intro components={mapping} />

6
src/pages/projects.astro
View File

@@ -21,9 +21,11 @@ const description =
---
<GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
<PageTitle grid="fullsize" innerGrid class=""> Projects </PageTitle>
<PageTitle grid="wide" innerGrid class="">Projects</PageTitle>
<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
<article
class="col-start-1 col-end-19 md:col-start-3 md:col-end-13 lg:col-start-4 lg:col-end-12 xl:col-start-5 xl:col-end-11"
>
<Intro components={mapping} />
</article>