FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

dynamic product cards

Browse Source
This commit is contained in:
Paul Eisenbock 2026-01-29 22:14:53 +01:00
parent f50d2a2f19
commit 59ee8a1abd
3 changed files with 34 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
assets/css/catbar.css
View File

@ -31,73 +31,68 @@
} }
/* =============================== */ /* =============================== */
/* HOME CATEGORY BUTTON */ /* HOME CATEGORY LINKS */
/* =============================== */ /* =============================== */
.home-nav__list li button[type="categorybutton"] { .home-nav__list li a {
width: 100%; width: 100%;
padding: 8px 0; padding: 8px 0;
background-color: rgba(255,255,255,0.08); background-color: rgb(45, 59, 80);
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
border: none; text-decoration: none;
border-radius: 0; /* 🔥 ECKIG */
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 0; /* 🔥 eckig */
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
/* Hover */ /* Hover */
.home-nav__list li button[type="categorybutton"]:hover { .home-nav__list li a:hover {
background-color: rgba(255,255,255,0.18); background-color: rgba(255,255,255,0.18);
} }
/* Active */ /* Active (Mausklick) */
.home-nav__list li button[type="categorybutton"]:active { .home-nav__list li a:active {
background-color: rgba(255,255,255,0.28); background-color: rgba(255,255,255,0.28);
} }
/* Fokus */ /* Fokus (Tastatur) */
.home-nav__list li button[type="categorybutton"]:focus-visible { .home-nav__list li a:focus-visible {
outline: none; outline: none;
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.5);
} }
/* Trennstriche */ /* Aktive Kategorie (per PHP) */
.home-nav__list li a.active {
background-color: rgba(255,255,255,0.25);
}
/* =============================== */
/* TRENNSTRICHE ZWISCHEN KATEGORIEN */
/* =============================== */
.home-nav__list li {
position: relative;
}
/* Trennstrich rechts – außer beim letzten */
.home-nav__list li:not(:last-child)::after { .home-nav__list li:not(:last-child)::after {
content: ""; content: "";
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
width: 2px; width: 2px;
background-color: rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.3);
} }
/* =============================== */
/* OPTIONAL: FALLS .cat-btn VERWENDET */
/* =============================== */
.cat-btn {
display: block;
padding: 8px 0;
text-align: center;
border-radius: 0; /* 🔥 ECKIG */
color: white;
text-decoration: none;
font-weight: 600;
background: rgba(255,255,255,0.08);
}
.cat-btn.active {
background: rgba(255,255,255,0.25);
}

6
assets/css/compcard.css
View File

@ -14,7 +14,7 @@
/* =============================== */ /* =============================== */
.product-card { .product-card {
background-color: #ffffff; background-color: #2d3b50;
border-radius: 18px; border-radius: 18px;
overflow: hidden; overflow: hidden;
@ -51,13 +51,13 @@
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
color: #1d1d1f; /* Apple Schwarz */ color: #ffffff; /* Apple Schwarz */
} }
/* Beschreibung */ /* Beschreibung */
.product-card__content p { .product-card__content p {
font-size: 0.85rem; font-size: 0.85rem;
color: #6e6e73; color: #ffffff;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }

12
catbar.php
View File

@ -12,27 +12,27 @@
<ul class="home-nav__list"> <ul class="home-nav__list">
<li class="home-nav__item"> <li class="home-nav__item">
<a href='index.php?category=iphone'">iPhone</a> <a href='index.php?category=iphone'>iPhone</a>
</li> </li>
<li class="home-nav__item"> <li class="home-nav__item">
<button onclick="location.href='index.php?category=ipad'">iPad</button> <a href='index.php?category=ipad'>iPad</a>
</li> </li>
<li class="home-nav__item"> <li class="home-nav__item">
<button onclick="location.href='index.php?category=macbook'">MacBook</button> <a href='index.php?category=macbook'>MacBook</a>
</li> </li>
<li class="home-nav__item"> <li class="home-nav__item">
<button onclick="location.href='index.php?category=airpods'">AirPods</button> <a href='index.php?category=airpods'>AirPods</a>
</li> </li>
<li class="home-nav__item"> <li class="home-nav__item">
<button onclick="location.href='index.php?category=watch'">Watch</button> <a href='index.php?category=watch'>Watch</a>
</li> </li>
<li class="home-nav__item"> <li class="home-nav__item">
<button onclick="location.href='index.php?category=accessories'">Accessories</button> <a href='index.php?category=accessories'>Accessories</a>
</li> </li>
</ul> </ul>