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

"Unterkategorien" & "Hauptkategorie" auf der Kategorie-Seite deutlicher erkennbar

Browse Source 
Beide Beschriftungen waren identisch schlichter grauer Kleinschrift-Text, kaum
von normalem Fliesstext zu unterscheiden. Jetzt: "Unterkategorien" bekommt ein
kleines Icon + zwei kurze Verlaufslinien als dezenten Trenner, "Hauptkategorie"
zusaetzlich einen Farbverlaufs-Icon-Kreis (Kategorie-Icon) und einen schmalen
Leucht-Trenner darunter, der die eigentliche Produktreihe einleitet - bewusst
mit den schon vorhandenen Marken-Verlaufsfarben statt neuer Effekte.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
2026-08-03 02:41:47 +02:00
co-authored by Claude Sonnet 5
parent 4f8e6d87a7
commit af0093e401
5 changed files with 72 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/ch/shop/[kategorie].astro
+5 -2
View File
@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
<div class="container">
{category.subcategories && category.subcategories.length > 0 && (
<>
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/ch/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
</>
)}
{items.length > 0 && (
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
<>
<h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
<div class="kategorie-section-label-rule" aria-hidden="true"></div>
</>
)}
{items.length > 0 ? (
<div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
src/pages/en/shop/[kategorie].astro
+5 -2
View File
@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
<div class="container">
{category.subcategories && category.subcategories.length > 0 && (
<>
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/en/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
</>
)}
{items.length > 0 && (
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
<>
<h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
<div class="kategorie-section-label-rule" aria-hidden="true"></div>
</>
)}
{items.length > 0 ? (
<div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
src/pages/fr/shop/[kategorie].astro
+5 -2
View File
@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
<div class="container">
{category.subcategories && category.subcategories.length > 0 && (
<>
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/fr/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
</>
)}
{items.length > 0 && (
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
<>
<h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
<div class="kategorie-section-label-rule" aria-hidden="true"></div>
</>
)}
{items.length > 0 ? (
<div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
src/pages/shop/[kategorie].astro
+5 -2
View File
@@ -32,7 +32,7 @@ const items = productsByCategory(category.slug);
<div class="container">
{category.subcategories && category.subcategories.length > 0 && (
<>
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.subcategoriesLabel}</h2>
<h2 class="section-label-sub"><span aria-hidden="true">🗂️</span> {t.shop.subcategoriesLabel}</h2>
<div class="subcategory-chips">
{category.subcategories.map((s) => (
<a class="subcategory-chip" href={`/shop/${category.slug}/${s.slug}/`}>{subcategoryChipLabel(s, lang)}</a>
@@ -41,7 +41,10 @@ const items = productsByCategory(category.slug);
</>
)}
{items.length > 0 && (
<h2 class="text-center small" style="text-transform:uppercase; letter-spacing:0.08em; color:var(--c-text-muted); margin-bottom:0.8rem;">{t.shop.mainCategoryLabel}</h2>
<>
<h2 class="kategorie-section-label"><span class="label-icon" aria-hidden="true">{category.icon}</span> {t.shop.mainCategoryLabel}</h2>
<div class="kategorie-section-label-rule" aria-hidden="true"></div>
</>
)}
{items.length > 0 ? (
<div class="grid grid-3">{items.map((p) => <ProductCard product={p} lang={lang} />)}</div>
src/styles/global.css
+52 -2
View File
@@ -948,14 +948,64 @@ a:focus-visible, button:focus-visible {
.contact-highlight p { margin: 0 0 0.3rem; }
.contact-highlight p:last-child { margin-bottom: 0; }
/* "Unterkategorien"-Beschriftung auf der Hauptkategorie-Seite — vorher reiner grauer
Kleinschrift-Text, kaum von Fließtext zu unterscheiden. Jetzt: Akzentfarbe statt Grau, ein
kleines Icon und zwei kurze Verlaufslinien links/rechts (dezenter "Trenner"-Look statt
auffälliger Balken), damit auf einen Blick klar ist: hier beginnt ein neuer Abschnitt. */
.section-label-sub {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6em;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-accent);
margin: 0 0 1rem;
}
.section-label-sub::before,
.section-label-sub::after {
content: "";
height: 1px;
width: clamp(1.6rem, 6vw, 3.2rem);
background: linear-gradient(90deg, transparent, var(--c-purple-glow), transparent);
opacity: 0.7;
}
/* Hauptkategorie-Überschrift zwischen den Unterkategorie-Chips und der eigentlichen
Produktreihe auf der Kategorie-Seite — macht klar, welche Hauptkategorie man gerade
durchstöbert, fällt bewusst etwas mehr auf als die stille "Unterkategorien"-Beschriftung. */
durchstöbert. Deutlich kräftiger als die "Unterkategorien"-Beschriftung (größer, mit
Verlaufs-Icon-Kreis und einem schmalen Leucht-Trenner darunter), weil sie die eigentliche
Produktreihe einleitet — bewusst nicht übertrieben (kein neuer Farbton, keine Animation). */
.kategorie-section-label {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55em;
text-align: center;
font-size: 1.3rem;
color: var(--c-accent);
margin: 2.2rem 0 1.3rem;
margin: 2.2rem 0 0;
}
.kategorie-section-label .label-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
font-size: 1rem;
background: linear-gradient(135deg, var(--c-accent), var(--c-purple-glow) 45%, var(--c-sale) 100%);
color: #08181c;
}
.kategorie-section-label-rule {
height: 2px;
width: clamp(3.5rem, 16vw, 7rem);
margin: 0.9rem auto 1.3rem;
border-radius: 999px;
background: linear-gradient(90deg, transparent, var(--c-accent), var(--c-purple-glow), var(--c-sale), transparent);
opacity: 0.85;
}
@media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }