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

fix: broken grids on project page

Browse Source
This commit is contained in:
Stefan Imhoff
2024-09-11 16:34:05 +02:00
parent c9461b356d
commit 518ae3aba3
3 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Image.astro
View File

@@ -6,7 +6,7 @@ const { class: className, noMargin, src, ...props } = Astro.props;
<div <div
class:list={[ class:list={[
'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none', 'image-shadow mbe-10 mbs-0 [&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none',
{ 'mbe-0': noMargin }, { '!mbe-0': noMargin },
className, className,
]} ]}
> >

16
src/components/ProjectContainer.astro
View File

@@ -50,13 +50,13 @@ const {
{ {
format === '70-start' && ( format === '70-start' && (
<figure <figure
class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap" class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
{...animation} {...animation}
> >
<div class="col-start-1 col-end-19 grid self-start xl:col-end-13"> <div class="col-start-1 col-end-19 xl:col-end-13">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 xl:col-start-13"> <figcaption class="col-start-2 col-end-18 md:col-start-10 xl:col-start-14 xl:col-end-18">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -65,13 +65,13 @@ const {
{ {
format === '70-end' && ( format === '70-end' && (
<figure <figure
class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap" class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap"
{...animation} {...animation}
> >
<div class="col-start-1 col-end-19 row-start-1 grid self-start xl:col-start-7 xl:col-end-19"> <div class="col-start-1 col-end-19 grid xl:col-start-7">
<ProjectImage project={project} /> <ProjectImage project={project} />
</div> </div>
<figcaption class="col-start-2 col-end-18 xl:col-start-2 xl:col-end-7"> <figcaption class="col-start-2 col-end-18 md:col-end-10 xl:col-end-6 xl:row-start-1">
<ProjectContent project={project} /> <ProjectContent project={project} />
</figcaption> </figcaption>
</figure> </figure>
@@ -80,7 +80,7 @@ const {
{ {
format === '100-start' && ( format === '100-start' && (
<figure <figure
class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap" class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
{...animation} {...animation}
> >
<div class="col-start-1 col-end-19 row-start-1"> <div class="col-start-1 col-end-19 row-start-1">
@@ -95,7 +95,7 @@ const {
{ {
format === '100-end' && ( format === '100-end' && (
<figure <figure
class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-x-gap gap-y-halfgap" class="col-start-1 col-end-19 row-start-1 grid grid-cols-18 gap-y-halfgap"
{...animation} {...animation}
> >
<div class="col-start-1 col-end-19 row-start-1"> <div class="col-start-1 col-end-19 row-start-1">

3
src/components/ProjectImage.astro
View File

@@ -13,13 +13,14 @@ const { project } = Astro.props;
{ {
project.data.image && project.data.image &&
(project.data.image.src.includes('.svg') ? ( (project.data.image.src.includes('.svg') ? (
<div class="image-shadow mbe-10 mbs-0"> <div class="image-shadow mbe-0 mbs-0">
<img class="image-border" alt={project.data.title} src={project.data.image.src} /> <img class="image-border" alt={project.data.title} src={project.data.image.src} />
</div> </div>
) : ( ) : (
<Image <Image
alt={project.data.title} alt={project.data.title}
class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none" class="[&_img]:!w-full [&_img]:!max-w-none [&_picture]:!w-full [&_picture]:!max-w-none"
noMargin
src={project.data.image.src} src={project.data.image.src}
/> />
)) ))