pascal/larpaso-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

About: hide the photo placeholder, set the text larger

Browse source 
Without about.photo the section now uses the margin-note layout of the
other sections and a larger text size instead of an empty blob. As soon
as a photo is set, the photo layout returns.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lara 2026-10-06 15:55:17 +02:00
parent 231dc21028
commit e2a56840be
1 changed files with 45 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
src/pages/index.astro
View file

@ -215,30 +215,36 @@ const findItem = (src: string) =>
<!-- Über uns --> <!-- Über uns -->
<section class="section about section-about tint-rose"> <section class="section about section-about tint-rose">
<div class="container about-grid"> {about.photo ? (
{about.photo ? ( <div class="container about-grid">
<div class="about-photo about-photo-image"> <div class="about-photo about-photo-image">
<img src={about.photo} alt="Lara und Pascal" loading="lazy" /> <img src={about.photo} alt="Lara und Pascal" loading="lazy" />
</div> </div>
) : (
<div class="about-photo">
<span>
Foto von Lara und Pascal <span class="placeholder">einsetzen</span><br />
<small>zusammen, hochkant, echtes Licht</small>
</span>
</div>
)}
<div class="about-copy"> <div class="about-copy">
<Kicker text={about.eyebrow} />
<h2>{about.title}</h2>
<blockquote class="about-quote"><p>{about.quote}</p></blockquote>
{about.paragraphs.map((paragraph) => (
<p set:html={rich(paragraph)} />
))}
</div>
</div>
) : (
/* Ohne Foto: wie die anderen Abschnitte, Kennung in der Randspalte,
Text größer gesetzt, damit die Fläche nicht leer wirkt */
<div class="container split about-ohne-foto">
<Kicker text={about.eyebrow} /> <Kicker text={about.eyebrow} />
<h2>{about.title}</h2> <h2>{about.title}</h2>
<blockquote class="about-quote"><p>{about.quote}</p></blockquote> <blockquote class="about-quote"><p>{about.quote}</p></blockquote>
<div class="about-text">
{about.paragraphs.map((paragraph) => ( {about.paragraphs.map((paragraph) => (
<p set:html={rich(paragraph)} /> <p set:html={rich(paragraph)} />
))} ))}
</div>
</div> </div>
</div> )}
</section> </section>
<!-- FAQ --> <!-- FAQ -->
@ -865,6 +871,29 @@ const findItem = (src: string) =>
margin: 0 0 var(--space-6); margin: 0 0 var(--space-6);
} }
.about-ohne-foto .about-quote {
margin-bottom: var(--space-7);
}
.about-ohne-foto .about-quote p {
font-size: clamp(1.9rem, 3.6vw, 3rem);
max-width: 22ch;
}
.about-text {
max-width: 42rem;
}
.about-text p {
font-size: clamp(1.125rem, 1.5vw, 1.3rem);
line-height: 1.65;
color: var(--color-text);
}
.about-text p + p {
margin-top: var(--space-5);
}
.about-quote p { .about-quote p {
font-family: var(--font-serif); font-family: var(--font-serif);
font-style: italic; font-style: italic;