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>