From 604e86442bead41f5a186f04d4dfd7e53fd1c893 Mon Sep 17 00:00:00 2001 From: Fabian Schieder Date: Thu, 22 Jan 2026 18:27:35 +0100 Subject: [PATCH] css improvements --- footer.php | 2 - header.php | 64 ++++++++ index.php | 8 +- navbar.php | 464 ----------------------------------------------------- style.css | 416 +++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 485 insertions(+), 469 deletions(-) create mode 100644 header.php delete mode 100755 navbar.php diff --git a/footer.php b/footer.php index e6120cb..5617cd6 100755 --- a/footer.php +++ b/footer.php @@ -20,5 +20,3 @@ - - - - - - - - - - Responsive navbar with search and login - Bedimcode - - - - - diff --git a/style.css b/style.css index e69de29..2d6b10a 100755 --- a/style.css +++ b/style.css @@ -0,0 +1,416 @@ +/* ========================================================== + RESET & BASIS + ========================================================== */ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --bg-main: #f4f6f9; + --bg-card: #ffffff; + --bg-header: #1f2937; + + --color-primary: #2563eb; + --color-primary-hover: #1d4ed8; + --color-accent: #10b981; + + --text-main: #111827; + --text-muted: #6b7280; + --text-invert: #ffffff; + + --border-color: #e5e7eb; + + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 16px; + + --shadow-sm: 0 2px 6px rgba(0,0,0,0.06); + --shadow-md: 0 6px 20px rgba(0,0,0,0.08); + + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; +} + +body { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", Arial, sans-serif; + background: var(--bg-main); + color: var(--text-main); + line-height: 1.45; +} + +/* ========================================================== + HEADER + ========================================================== */ +.header { + background: var(--bg-header); + color: var(--text-invert); + padding: 1rem 2rem; +} + +.header-inner { + max-width: 1400px; + margin: auto; + display: flex; + align-items: center; + gap: 2rem; +} + +.logo { + font-size: 1.4rem; + font-weight: 700; + letter-spacing: 0.3px; +} + +.search { + flex: 1; + position: relative; +} + +.search input { + width: 100%; + padding: 0.6rem 1rem; + border-radius: var(--radius-sm); + border: none; + outline: none; + font-size: 0.95rem; +} + +/* ========================================================== + LAYOUT + ========================================================== */ +.container { + max-width: 1400px; + margin: 2rem auto; + padding: 0 2rem; + display: grid; + grid-template-columns: 260px 1fr; + gap: 2rem; +} + +/* ========================================================== + FILTER / SIDEBAR + ========================================================== */ +.sidebar { + background: var(--bg-card); + border-radius: var(--radius-md); + padding: 1.2rem; + box-shadow: var(--shadow-sm); +} + +.sidebar h3 { + font-size: 1rem; + margin-bottom: 1rem; +} + +.filter-group { + margin-bottom: 1.2rem; +} + +.filter-group label { + display: block; + font-size: 0.85rem; + color: var(--text-muted); + margin-bottom: 0.3rem; +} + +.filter-group input, +.filter-group select { + width: 100%; + padding: 0.45rem 0.6rem; + border-radius: var(--radius-sm); + border: 1px solid var(--border-color); + font-size: 0.9rem; +} + +/* ========================================================== + PRODUCT GRID + ========================================================== */ +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 1.6rem; +} + +/* ========================================================== + PRODUCT CARD + ========================================================== */ +.product-card { + background: var(--bg-card); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + display: flex; + flex-direction: column; + transition: transform var(--transition-normal), + box-shadow var(--transition-normal); +} + +.product-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-md); +} + +.product-image { + height: 180px; + background: #f1f5f9; + border-top-left-radius: var(--radius-lg); + border-top-right-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + color: var(--text-muted); +} + +.product-content { + padding: 1rem 1.1rem 1.2rem; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.product-title { + font-size: 0.95rem; + font-weight: 600; +} + +.product-meta { + font-size: 0.8rem; + color: var(--text-muted); +} + +.product-price { + margin-top: 0.6rem; + font-size: 1.4rem; + font-weight: 700; + color: var(--color-primary); +} + +.product-actions { + margin-top: auto; + display: flex; + gap: 0.5rem; +} + +.btn { + flex: 1; + padding: 0.5rem; + border-radius: var(--radius-sm); + font-size: 0.85rem; + cursor: pointer; + border: none; + transition: background var(--transition-fast); +} + +.btn-primary { + background: var(--color-primary); + color: #fff; +} + +.btn-primary:hover { + background: var(--color-primary-hover); +} + +.btn-secondary { + background: #f3f4f6; + color: var(--text-main); +} + +.btn-secondary:hover { + background: #e5e7eb; +} + +/* ========================================================== + BADGES + ========================================================== */ +.badge { + display: inline-block; + padding: 0.2rem 0.5rem; + border-radius: var(--radius-sm); + font-size: 0.7rem; + font-weight: 600; +} + +.badge-green { + background: #d1fae5; + color: #065f46; +} + +/* ========================================================== + RESPONSIVE + ========================================================== */ +@media (max-width: 900px) { + .container { + grid-template-columns: 1fr; + } + + .sidebar { + order: 2; + } +} + +/* ========================================================== + NAVBAR + ========================================================== */ + +/* ========================================================== + BASIS / VARIABLEN + ========================================================== */ +:root { + --header-bg: #1f2937; + --header-text: #ffffff; + --header-muted: #9ca3af; + --primary: #2563eb; + --primary-hover: #1d4ed8; + + --radius: 8px; + --transition: 200ms ease; +} + +/* ========================================================== + CONTAINER + ========================================================== */ +.container { + max-width: 1400px; + margin-inline: auto; + padding-inline: 1.5rem; +} + +/* ========================================================== + HEADER + ========================================================== */ +.header { + position: sticky; + top: 0; + z-index: 1000; + background: var(--header-bg); + box-shadow: 0 2px 10px rgba(0,0,0,0.15); +} + +/* ========================================================== + NAV + ========================================================== */ +.nav { + height: 64px; + display: flex; + align-items: center; + justify-content: space-between; +} + +/* ========================================================== + LOGO + ========================================================== */ +.nav__logo { + font-size: 1.25rem; + font-weight: 700; + color: var(--header-text); + text-decoration: none; +} + +/* ========================================================== + MENU (DESKTOP) + ========================================================== */ +.nav__menu { + display: flex; +} + +.nav__list { + display: flex; + gap: 2rem; + list-style: none; +} + +.nav__link { + color: var(--header-muted); + font-size: 0.95rem; + font-weight: 500; + text-decoration: none; + transition: color var(--transition); +} + +.nav__link:hover { + color: var(--header-text); +} + +/* ========================================================== + ACTION ICONS + ========================================================== */ +.nav__actions { + display: flex; + align-items: center; + gap: 1.2rem; +} + +.nav__search, +.nav__login, +.nav__toggle, +.nav__close { + font-size: 1.3rem; + color: var(--header-text); + cursor: pointer; + transition: color var(--transition); +} + +.nav__search:hover, +.nav__login:hover { + color: var(--primary); +} + +/* ========================================================== + TOGGLE / CLOSE + ========================================================== */ +.nav__toggle { + display: none; +} + +.nav__close { + display: none; +} + +/* ========================================================== + MOBILE NAV + ========================================================== */ +@media (max-width: 900px) { + + .nav__toggle { + display: block; + } + + .nav__menu { + position: fixed; + top: 0; + right: -100%; + width: 280px; + height: 100%; + background: #111827; + padding: 4rem 2rem; + transition: right 300ms ease; + flex-direction: column; + gap: 2rem; + } + + .nav__menu.show-menu { + right: 0; + } + + .nav__list { + flex-direction: column; + gap: 1.5rem; + } + + .nav__link { + font-size: 1.05rem; + color: #e5e7eb; + } + + .nav__close { + display: block; + position: absolute; + top: 1.2rem; + right: 1.2rem; + } +}