DogFatherGit/vans-diy-bastelbedarf
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Blauen "Jetzt entdecken"-Button auf Unterkategorie-Seiten entfernt, Link-Wort wird jetzt selbst zum Button

Browse Source 
Der große blaue "Jetzt entdecken"-Button neben dem featured Produkt (z.B.
HasiDog) fällt weg. Der kleine Text-Link ("hier"/"here"/"da"/"ici" zur
externen HasiDog-Universum-Seite) ist jetzt selbst ein richtiger,
klickbarer Button statt eines unauffälligen Inline-Links.
This commit is contained in:
qcigano
2026-08-02 19:07:06 +02:00
parent 5c612ef98e
commit 334df113ae
5 changed files with 38 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/shop/[kategorie]/[unterkategorie].astro
+8 -11
View File
@@ -49,14 +49,11 @@ const weitere = echtProdukte.slice(1);
{sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>} {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
<h2>{featured.name[lang]}</h2> <h2>{featured.name[lang]}</h2>
<p class="lead">{featured.beschreibung[lang]}</p> <p class="lead">{featured.beschreibung[lang]}</p>
<div class="btn-row">
<a class="btn btn-primary" href={`/ch/produkt/${featured.slug}/`}>{t.common.discoverNow} →</a>
</div>
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Wosch meh über {sub.name[lang]} wüsse? Klick da:{" "} <p>Wosch meh über {sub.name[lang]} wüsse?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">da →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</p> </div>
)} )}
</div> </div>
</div> </div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro"> <div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)} {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Wosch meh über {sub.name[lang]} wüsse? Klick da:{" "} <p>Wosch meh über {sub.name[lang]} wüsse?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">da →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</p> </div>
)} )}
</div> </div>
)} )}
src/pages/en/shop/[kategorie]/[unterkategorie].astro
+8 -11
View File
@@ -49,14 +49,11 @@ const weitere = echtProdukte.slice(1);
{sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>} {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
<h2>{featured.name[lang]}</h2> <h2>{featured.name[lang]}</h2>
<p class="lead">{featured.beschreibung[lang]}</p> <p class="lead">{featured.beschreibung[lang]}</p>
<div class="btn-row">
<a class="btn btn-primary" href={`/en/produkt/${featured.slug}/`}>{t.common.discoverNow} →</a>
</div>
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Want to learn more about {sub.name[lang]}? Click here:{" "} <p>Want to learn more about {sub.name[lang]}?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">here →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</p> </div>
)} )}
</div> </div>
</div> </div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro"> <div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)} {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Want to learn more about {sub.name[lang]}? Click here:{" "} <p>Want to learn more about {sub.name[lang]}?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">here →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</p> </div>
)} )}
</div> </div>
)} )}
src/pages/fr/shop/[kategorie]/[unterkategorie].astro
+8 -11
View File
@@ -49,14 +49,11 @@ const weitere = echtProdukte.slice(1);
{sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>} {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
<h2>{featured.name[lang]}</h2> <h2>{featured.name[lang]}</h2>
<p class="lead">{featured.beschreibung[lang]}</p> <p class="lead">{featured.beschreibung[lang]}</p>
<div class="btn-row">
<a class="btn btn-primary" href={`/fr/produkt/${featured.slug}/`}>{t.common.discoverNow} →</a>
</div>
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Tu veux en savoir plus sur {sub.name[lang]} ? Clique ici :{" "} <p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</p> </div>
)} )}
</div> </div>
</div> </div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro"> <div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)} {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Tu veux en savoir plus sur {sub.name[lang]} ? Clique ici :{" "} <p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</p> </div>
)} )}
</div> </div>
)} )}
src/pages/shop/[kategorie]/[unterkategorie].astro
+8 -11
View File
@@ -52,14 +52,11 @@ const weitere = echtProdukte.slice(1);
{sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>} {sub.vorstellung && <span class="eyebrow">{sub.vorstellung[lang].split("\n")[0]}</span>}
<h2>{featured.name[lang]}</h2> <h2>{featured.name[lang]}</h2>
<p class="lead">{featured.beschreibung[lang]}</p> <p class="lead">{featured.beschreibung[lang]}</p>
<div class="btn-row">
<a class="btn btn-primary" href={`/produkt/${featured.slug}/`}>{t.common.discoverNow} →</a>
</div>
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Du willst mehr über {sub.name[lang]} erfahren, dann klicke hier:{" "} <p>Du willst mehr über {sub.name[lang]} erfahren?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</p> </div>
)} )}
</div> </div>
</div> </div>
@@ -71,10 +68,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro"> <div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)} {sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && ( {sub.mehrLink && (
<p class="character-more"> <div class="character-more">
Du willst mehr über {sub.name[lang]} erfahren, dann klicke hier:{" "} <p>Du willst mehr über {sub.name[lang]} erfahren?</p>
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a> <a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</p> </div>
)} )}
</div> </div>
)} )}
src/styles/global.css
+6 -9
View File
@@ -681,15 +681,12 @@ a:focus-visible, button:focus-visible {
} }
.character-intro p { margin: 0; white-space: pre-line; } .character-intro p { margin: 0; white-space: pre-line; }
.character-intro p:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-text); margin-bottom: 0.5em; } .character-intro p:first-child { font-family: var(--font-head); font-weight: 600; color: var(--c-text); margin-bottom: 0.5em; }
.character-intro p.character-more { margin-top: 0.9em; color: var(--c-text-muted); }
.character-intro .character-more-link { /* "Willst du mehr über X erfahren?" + Link-Button — sowohl innerhalb der character-intro-Box
color: var(--c-accent); (falls noch kein echtes Produkt zugeordnet ist) als auch frei im Intro-Layout (sobald ein
font-weight: 600; echtes Produkt featured wird). */
text-decoration: underline; .character-more { margin-top: 1rem; }
text-decoration-color: transparent; .character-more p { margin: 0 0 0.6em; color: var(--c-text-muted); }
transition: text-decoration-color 0.2s var(--ease);
}
.character-intro .character-more-link:hover { text-decoration-color: currentColor; }
/* Seiten-Banner (Shop, Sale, ...): echtes Foto/Grafik als Kopfbild mit Verlauf-Überblendung /* Seiten-Banner (Shop, Sale, ...): echtes Foto/Grafik als Kopfbild mit Verlauf-Überblendung
unten, damit Titel/Text darauf lesbar bleiben — ersetzt die reine Text-Kopfzeile durch ein unten, damit Titel/Text darauf lesbar bleiben — ersetzt die reine Text-Kopfzeile durch ein