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%;
padding: 8px 0;
background-color: rgba(255,255,255,0.08);
background-color: rgb(45, 59, 80);
color: #ffffff;
font-weight: 600;
font-size: 0.9rem;
border: none;
border-radius: 0; /* 🔥 ECKIG */
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0; /* 🔥 eckig */
transition: background-color 0.2s ease;
}
/* Hover */
.home-nav__list li button[type="categorybutton"]:hover {
.home-nav__list li a:hover {
background-color: rgba(255,255,255,0.18);
}
/* Active */
.home-nav__list li button[type="categorybutton"]:active {
/* Active (Mausklick) */
.home-nav__list li a:active {
background-color: rgba(255,255,255,0.28);
}
/* Fokus */
.home-nav__list li button[type="categorybutton"]:focus-visible {
/* Fokus (Tastatur) */
.home-nav__list li a:focus-visible {
outline: none;
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 {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2px;
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 {
background-color: #ffffff;
background-color: #2d3b50;
border-radius: 18px;
overflow: hidden;
@ -51,13 +51,13 @@
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.4rem;
color: #1d1d1f; /* Apple Schwarz */
color: #ffffff; /* Apple Schwarz */
}
/* Beschreibung */
.product-card__content p {
font-size: 0.85rem;
color: #6e6e73;
color: #ffffff;
margin-bottom: 0.75rem;
}

12
catbar.php
View File

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