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>}
<h2>{featured.name[lang]}</h2>
<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 && (
<p class="character-more">
Wosch meh über {sub.name[lang]} wüsse? Klick da:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</p>
<div class="character-more">
<p>Wosch meh über {sub.name[lang]} wüsse?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</div>
)}
</div>
</div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && (
<p class="character-more">
Wosch meh über {sub.name[lang]} wüsse? Klick da:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</p>
<div class="character-more">
<p>Wosch meh über {sub.name[lang]} wüsse?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">da →</a>
</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>}
<h2>{featured.name[lang]}</h2>
<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 && (
<p class="character-more">
Want to learn more about {sub.name[lang]}? Click here:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</p>
<div class="character-more">
<p>Want to learn more about {sub.name[lang]}?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</div>
)}
</div>
</div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && (
<p class="character-more">
Want to learn more about {sub.name[lang]}? Click here:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</p>
<div class="character-more">
<p>Want to learn more about {sub.name[lang]}?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">here →</a>
</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>}
<h2>{featured.name[lang]}</h2>
<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 && (
<p class="character-more">
Tu veux en savoir plus sur {sub.name[lang]} ? Clique ici :{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</p>
<div class="character-more">
<p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</div>
)}
</div>
</div>
@@ -68,10 +65,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && (
<p class="character-more">
Tu veux en savoir plus sur {sub.name[lang]} ? Clique ici :{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</p>
<div class="character-more">
<p>Tu veux en savoir plus sur {sub.name[lang]} ?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">ici →</a>
</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>}
<h2>{featured.name[lang]}</h2>
<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 && (
<p class="character-more">
Du willst mehr über {sub.name[lang]} erfahren, dann klicke hier:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</p>
<div class="character-more">
<p>Du willst mehr über {sub.name[lang]} erfahren?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</div>
)}
</div>
</div>
@@ -71,10 +68,10 @@ const weitere = echtProdukte.slice(1);
<div class="character-intro">
{sub.vorstellung[lang].split("\n").map((line) => <p>{line}</p>)}
{sub.mehrLink && (
<p class="character-more">
Du willst mehr über {sub.name[lang]} erfahren, dann klicke hier:{" "}
<a class="character-more-link" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</p>
<div class="character-more">
<p>Du willst mehr über {sub.name[lang]} erfahren?</p>
<a class="btn btn-outline" href={sub.mehrLink} target="_blank" rel="noopener">hier →</a>
</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: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 {
color: var(--c-accent);
font-weight: 600;
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.2s var(--ease);
}
.character-intro .character-more-link:hover { text-decoration-color: currentColor; }
/* "Willst du mehr über X erfahren?" + Link-Button — sowohl innerhalb der character-intro-Box
(falls noch kein echtes Produkt zugeordnet ist) als auch frei im Intro-Layout (sobald ein
echtes Produkt featured wird). */
.character-more { margin-top: 1rem; }
.character-more p { margin: 0 0 0.6em; color: var(--c-text-muted); }
/* 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