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

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]}>
{
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">
<div class="col-start-1 col-end-3 row-start-1 md:col-start-1 md:col-end-2 md:row-start-1">
<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 xl:col-start-1 xl:col-end-2 xl:row-start-1">
<ProjectImage project={project} />
</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} />
</figcaption>
</figure>
@@ -31,11 +31,11 @@ const {
}
{
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">
<div class="col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1">
<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 xl:col-start-2 xl:row-start-1">
<ProjectImage project={project} />
</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} />
</figcaption>
</figure>
@@ -44,10 +44,10 @@ const {
{
format === '70-start' && (
<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} />
</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} />
</figcaption>
</figure>
@@ -56,10 +56,10 @@ const {
{
format === '70-end' && (
<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} />
</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} />
</figcaption>
</figure>
@@ -71,7 +71,7 @@ const {
<div class="col-start-1 col-end-19 row-start-1">
<ProjectImage project={project} />
</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} />
</figcaption>
</figure>
@@ -83,7 +83,7 @@ const {
<div class="col-start-1 col-end-19 row-start-1">
<ProjectImage project={project} />
</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} />
</figcaption>
</figure>