feat: smartin3.de gallery — add VW Golf MK1 cover photo with caption
Add real product photo (VW Golf MK1 trunk cover) to gallery with description. Extend gallery CSS to support figcaption elements.
This commit is contained in:
@@ -228,6 +228,40 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-item figcaption {
|
||||
padding: 12px 14px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
.gallery-item figcaption strong {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-family: 'Space Grotesk', sans-serif;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.gallery-item figure {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gallery-item figure img {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.gallery-item.has-caption {
|
||||
aspect-ratio: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@@ -394,8 +428,14 @@
|
||||
</div>
|
||||
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-item">
|
||||
<img src="https://images.unsplash.com/photo-1636955816868-fcb881e57954?w=600&h=450&fit=crop" alt="3D-Druck Prototyp">
|
||||
<div class="gallery-item has-caption">
|
||||
<figure>
|
||||
<img src="img/vw-golf-mk1-abdeckung.jpg" alt="VW Golf MK1 Kofferraumklappe Abdeckung">
|
||||
<figcaption>
|
||||
<strong>VW Golf MK1 Kofferraumklappe</strong>
|
||||
Abdeckung fuer die offenen Loecher in der Kofferraumklappe des alten Golfs. Auf Wunsch auch mit Kunstleder oder anderen Folien lieferbar.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="gallery-item">
|
||||
<img src="https://images.unsplash.com/photo-1612815154858-60aa4c59eaa6?w=600&h=450&fit=crop" alt="3D-Drucker bei der Arbeit">
|
||||
|
||||
Reference in New Issue
Block a user