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: improve project page

Browse Source
This commit is contained in:
Stefan Imhoff
2026-01-25 13:50:03 +01:00
committed by Stefan Imhoff
parent adf4084a42
commit ae5249359d
4 changed files with 17 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/PageTitle.astro
View File

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

24
src/components/ProjectContainer.astro
View File

@@ -19,11 +19,11 @@ const {
<article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]}> <article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]}>
{ {
format === '50-start' && ( format === '50-start' && (
<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap"> <figure class="col-start-1 col-end-19 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
<div class="col-start-1 col-end-3 row-start-1 md:col-start-1 md:col-end-2 md:row-start-1"> <div class="col-start-1 col-end-3 row-start-1 xl:col-start-1 xl:col-end-2 xl:row-start-1">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-2 md:row-start-1"> <figcaption class="col-start-1 col-end-3 row-start-2 text-start xl:col-start-2 xl:row-start-1">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -31,11 +31,11 @@ const {
} }
{ {
format === '50-end' && ( format === '50-end' && (
<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap"> <figure class="col-start-1 col-end-19 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
<div class="col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1"> <div class="col-start-1 col-end-3 row-start-1 xl:col-start-2 xl:row-start-1">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-1 md:col-end-2 md:row-start-1"> <figcaption class="col-start-1 col-end-3 row-start-2 text-start xl:col-start-1 xl:col-end-2 xl:row-start-1">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -44,10 +44,10 @@ const {
{ {
format === '70-start' && ( format === '70-start' && (
<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"> <figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
<div class="col-start-1 col-end-19 xl:col-end-13"> <div class="col-start-1 col-end-19 xl:col-end-11">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 md:col-start-10 xl:col-start-14 xl:col-end-18"> <figcaption class="col-start-1 col-end-19 xl:col-start-12">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -56,10 +56,10 @@ const {
{ {
format === '70-end' && ( format === '70-end' && (
<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"> <figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
<div class="col-start-1 col-end-19 grid xl:col-start-7"> <div class="col-start-1 col-end-19 grid xl:col-start-9">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 md:col-end-10 xl:col-end-6 xl:row-start-1"> <figcaption class="col-start-1 col-end-19 xl:col-end-8 xl:row-start-1">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -71,7 +71,7 @@ const {
<div class="col-start-1 col-end-19 row-start-1"> <div class="col-start-1 col-end-19 row-start-1">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 md:col-end-13 xl:col-end-10"> <figcaption class="col-start-1 col-end-19 xl:col-end-13">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -83,7 +83,7 @@ const {
<div class="col-start-1 col-end-19 row-start-1"> <div class="col-start-1 col-end-19 row-start-1">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 md:col-start-8 md:col-end-18 xl:col-start-10 xl:col-end-18"> <figcaption class="col-start-1 col-end-19 xl:col-start-7">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>

17
src/pages/projects.astro
View File

@@ -20,21 +20,8 @@ const description =
'I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are projects I created over the last years.'; 'I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are projects I created over the last years.';
--- ---
<GridLayout <GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
title={title} <PageTitle grid="fullsize" innerGrid class=""> Projects </PageTitle>
description={description}
grid="fullsize"
class="grid"
backLink="/"
innerGrid
>
<PageTitle
grid="wide"
innerGrid
class="!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17"
>
Projects
</PageTitle>
<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14"> <article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
<Intro components={mapping} /> <Intro components={mapping} />

2
src/pages/projects/[...slug].astro
View File

@@ -41,7 +41,7 @@ const title = entry.data.title;
const description = entry.data.intro || `The detail for project "${entry.data.title}"`; const description = entry.data.intro || `The detail for project "${entry.data.title}"`;
--- ---
<GridLayout title={title} description={description} grid="wide" innerGrid backLink="/projects/"> <GridLayout title={title} description={description} grid="narrow" innerGrid backLink="/projects/">
<PageTitle slot="title"> <PageTitle slot="title">
{entry.data.title} {entry.data.title}
</PageTitle> </PageTitle>