diff --git a/404.php b/404.php index 2e4f590..9bcd0a5 100644 --- a/404.php +++ b/404.php @@ -14,7 +14,7 @@ error_log("[404] $ip $method $requestUri"); - + 404 – Seite nicht gefunden | Geizkragen diff --git a/assets/css/catbar.css b/assets/css/catbar.css index f499b3b..f1dac4a 100644 --- a/assets/css/catbar.css +++ b/assets/css/catbar.css @@ -106,7 +106,7 @@ @media (max-width: 768px) { .home-nav__inner { justify-content: flex-start; - padding: 0.5rem 0.75rem; + padding: 0.4rem 0.5rem; } .home-nav__list { @@ -115,9 +115,12 @@ scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; - gap: 0.25rem; + gap: 0.2rem; flex-wrap: nowrap; justify-content: flex-start; + /* Fade edges */ + mask-image: linear-gradient(90deg, transparent, black 0.5rem, black calc(100% - 0.5rem), transparent); + -webkit-mask-image: linear-gradient(90deg, transparent, black 0.5rem, black calc(100% - 0.5rem), transparent); } .home-nav__list::-webkit-scrollbar { display: none; } @@ -128,7 +131,24 @@ } .home-nav__list li a { - padding: 0.45rem 1rem; + padding: 0.5rem 1rem; font-size: 0.82rem; + min-height: 40px; + } +} + +@media (max-width: 480px) { + .home-nav__inner { + padding: 0.35rem 0.25rem; + } + + .home-nav__list li a { + padding: 0.45rem 0.8rem; + font-size: 0.78rem; + min-height: 36px; + } + + .home-nav__list li a::after { + display: none; /* Simpler on tiny screens */ } } diff --git a/assets/css/compcard.css b/assets/css/compcard.css index 9d41c93..8b9e39e 100644 --- a/assets/css/compcard.css +++ b/assets/css/compcard.css @@ -239,17 +239,84 @@ /* ─── Responsive ─── */ @media (max-width: 768px) { + .product-grid { + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: 0.8rem; + padding: 1rem; + } + + .product-section { + padding: 1.25rem 0 0.25rem; + } + .product-section h2 { margin-left: 1rem; - font-size: 1.15rem; + font-size: 1.1rem; } .product-scroll { - padding: 0.5rem 1rem 2rem; - gap: 1rem; + padding: 0.5rem 1rem 1.5rem; + gap: 0.8rem; + mask-image: linear-gradient(90deg, transparent, black 1rem, black calc(100% - 1rem), transparent); + -webkit-mask-image: linear-gradient(90deg, transparent, black 1rem, black calc(100% - 1rem), transparent); } .product-scroll .product-card { - flex: 0 0 240px; + flex: 0 0 200px; + min-height: 230px; + } + + .product-card img { + height: 130px; + padding: 10px; + } + + .product-card__content { + padding: 0.75rem 0.9rem 0.85rem; + gap: 0.25rem; + } + + .product-card__content h3 { + font-size: 0.82rem; + } + + .product-card__content p { + font-size: 0.72rem; + -webkit-line-clamp: 2; + } + + .product-card__content .price { + font-size: 0.92rem; + } +} + +@media (max-width: 480px) { + .product-grid { + grid-template-columns: repeat(2, 1fr); + gap: 0.6rem; + padding: 0.75rem; + } + + .product-scroll .product-card { + flex: 0 0 170px; + min-height: 210px; + } + + .product-card img { + height: 110px; + padding: 8px; + } + + .product-card__content { + padding: 0.6rem 0.7rem 0.7rem; + } + + .product-card__content h3 { + font-size: 0.78rem; + -webkit-line-clamp: 1; + } + + .product-card__content p { + display: none; } } diff --git a/assets/css/login.css b/assets/css/login.css index 553b850..eb7c9e7 100644 --- a/assets/css/login.css +++ b/assets/css/login.css @@ -443,6 +443,11 @@ RESPONSIVE ========================================================== */ @media (max-width: 900px) { + .auth { + padding: 1.5rem 1rem 3rem; + min-height: auto; + } + .auth__grid { width: min(480px, 100%); } @@ -453,6 +458,23 @@ width: min(480px, 100%); } + .auth__grid.auth__card__side .auth__card { + width: 100%; + } + + .auth__grid.auth__card__side .auth__card.auth__card__side__picture { + width: 100%; + justify-self: stretch; + } + + .auth__grid.auth__card__side .auth__card.auth__card__side__picture img { + max-width: 100%; + width: auto; + max-height: 200px; + margin: 0 auto; + display: block; + } + .auth__logo { width: 120px; } @@ -464,23 +486,75 @@ @media (max-width: 520px) { .auth { - padding-top: 1.5rem; + padding: 1rem 0.75rem 2rem; + } + + .auth::before { + width: 250px; + height: 250px; } .auth__card { padding: 1.25rem; + border-radius: var(--radius-md); } .auth__header { grid-template-columns: 1fr; + gap: 0.5rem; } .auth__logo { - width: 140px; + width: 120px; grid-row: auto; + margin-bottom: 0.5rem; } .auth__title { - font-size: 1.25rem; + font-size: 1.2rem; + } + + .auth__subtitle { + font-size: 0.88rem; + } + + .auth__field input[type="text"], + .auth__field input[type="password"], + .auth__field input[type="email"], + .auth__field input[type="file"] { + padding: 0.7rem 0.8rem; + font-size: 16px; /* Prevents iOS zoom on focus */ + } + + .auth__submit { + padding: 0.85rem 1rem; + font-size: 0.95rem; + min-height: 48px; + } + + .auth__muted { + font-size: 0.82rem; + } +} + +@media (max-width: 380px) { + .auth { + padding: 0.75rem 0.5rem 1.5rem; + } + + .auth__card { + padding: 1rem; + } + + .auth__logo { + width: 100px; + } + + .auth__title { + font-size: 1.1rem; + } + + .auth__grid.auth__card__side .auth__card.auth__card__side__picture img { + max-height: 160px; } } diff --git a/assets/css/productAdder.css b/assets/css/productAdder.css index c62f891..3e82943 100644 --- a/assets/css/productAdder.css +++ b/assets/css/productAdder.css @@ -156,10 +156,43 @@ textarea.auth__input { /* ─── Responsive ─── */ @media (max-width: 720px) { .auth { - padding: 1.5rem 0.75rem; + padding: 1.25rem 0.75rem; } .auth__card { padding: 1.25rem; } + + .auth__select { + font-size: 16px; /* Prevents iOS zoom */ + padding: 0.8rem 2.5rem 0.8rem 0.8rem; + } + + .auth__input { + font-size: 16px; /* Prevents iOS zoom */ + padding: 0.75rem 0.8rem; + } +} + +@media (max-width: 480px) { + .auth { + padding: 1rem 0.5rem; + } + + .auth__card { + padding: 1rem; + border-radius: var(--radius-md); + } + + .auth__grid { + gap: 1rem; + } + + .auth__title { + font-size: 1.05rem; + } + + .auth__select__wrap { + margin-top: 0.5rem; + } } diff --git a/assets/css/productpage.css b/assets/css/productpage.css index 199e66f..3759760 100644 --- a/assets/css/productpage.css +++ b/assets/css/productpage.css @@ -154,11 +154,54 @@ .product-wrapper { flex-direction: column; gap: 2rem; - margin: 2rem auto; + margin: 1.5rem auto; + padding: 0 1rem; + } + + .product-image-box { + padding: 1.5rem; } .product-title { - font-size: 1.5rem; + font-size: 1.4rem; + margin-bottom: 1rem; + padding-bottom: 0.75rem; + } + + .product-desc { + font-size: 0.92rem; + } +} + +@media (max-width: 600px) { + .product-wrapper { + gap: 1.25rem; + margin: 1rem auto; + padding: 0 0.75rem; + } + + .product-image-box { + padding: 1rem; + border-radius: var(--radius-lg); + } + + .product-title { + font-size: 1.2rem; + } + + .product-desc { + font-size: 0.88rem; + line-height: 1.6; + margin-bottom: 1rem; + } + + .product-specs p { + padding: 0.6rem 0.8rem; + font-size: 0.85rem; + } + + .product-specs p:hover { + transform: none; } } @@ -352,10 +395,59 @@ .shop-price { font-size: 1.2rem; } + + .shop-offers { + padding: 0 1rem; + margin-bottom: 3rem; + } } @media (max-width: 600px) { + .shop-line { + gap: 0.5rem; + padding: 0.85rem; + border-radius: var(--radius-md); + } + + .shop-line:hover { + padding-left: 0.85rem; + transform: none; + } + + .shop-left { + gap: 0.75rem; + } + + .shop-logo img { + max-height: 28px; + max-width: 70px; + } + + .shop-name { + font-size: 0.88rem; + } + + .shop-middle { + gap: 0.5rem; + font-size: 0.8rem; + } + + .shop-stock { + font-size: 0.72rem; + padding: 0.2rem 0.6rem; + } + + .shop-price { + font-size: 1.1rem; + } + .shop-offers { - padding: 0 1rem; + padding: 0 0.75rem; + gap: 0.5rem; + } + + .no-shop { + padding: 1.5rem; + font-size: 0.88rem; } } \ No newline at end of file diff --git a/header.php b/header.php index 5140e0d..7536faa 100644 --- a/header.php +++ b/header.php @@ -3,7 +3,7 @@ - + @@ -14,16 +14,36 @@ + + + Geizkragen + +
+ + + + diff --git a/impressum.php b/impressum.php index d74ead8..eaa38e9 100644 --- a/impressum.php +++ b/impressum.php @@ -1,11 +1,11 @@ -
+
-
+

Impressum

-

Impressum 123

+

Impressum 123

diff --git a/style.css b/style.css index 0b96a32..7728710 100755 --- a/style.css +++ b/style.css @@ -345,6 +345,10 @@ a:hover { .nav__toggle { display: none; } .nav__close { display: none; } +/* Mobile-only search + items: hidden on desktop */ +.nav__searchForm--mobile { display: none; } +.nav__item--mobile { display: none; } + /* ========================================================== MOBILE NAV ========================================================== */ @@ -353,39 +357,69 @@ a:hover { display: flex; } + .nav__item--mobile { + display: list-item; + } + .nav__menu { position: fixed; top: 0; right: -100%; - width: 300px; + width: min(300px, 85vw); height: 100%; - background: rgba(13, 17, 23, 0.95); + background: rgba(13, 17, 23, 0.97); backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); border-left: 1px solid var(--border-subtle); - padding: 5rem 2rem 2rem; + padding: 4.5rem 1.5rem 2rem; transition: right 350ms cubic-bezier(0.4, 0, 0.2, 1); flex-direction: column; align-items: flex-start; - gap: 2rem; + gap: 1.25rem; z-index: 1001; + overflow-y: auto; + -webkit-overflow-scrolling: touch; } .nav__menu.show-menu { right: 0; } + /* Show mobile search inside menu */ + .nav__searchForm--mobile { + display: block; + width: 100%; + position: static; + transform: none; + } + + .nav__searchForm--mobile .nav__searchField { + width: 100%; + } + + .nav__searchForm--mobile .nav__searchInput { + width: 100%; + height: 44px; + padding: 0 16px; + font-size: 0.92rem; + border-radius: var(--radius-md); + } + .nav__list { flex-direction: column; - gap: 0.5rem; + gap: 0.25rem; width: 100%; } .nav__link { - font-size: 1.05rem; + font-size: 1rem; color: var(--text-secondary); - display: block; - padding: 0.75rem 1rem; + display: flex; + align-items: center; + min-height: 44px; + padding: 0.6rem 1rem; border-radius: var(--radius-md); + width: 100%; } .nav__link:hover { @@ -396,9 +430,14 @@ a:hover { .nav__close { display: flex; position: absolute; - top: 1.2rem; - right: 1.2rem; + top: 1rem; + right: 1rem; color: var(--text-secondary); + padding: 0.5rem; + min-height: 44px; + min-width: 44px; + align-items: center; + justify-content: center; } .nav__close:hover { @@ -824,3 +863,187 @@ a:hover { .animate-children > *:nth-child(4) { animation-delay: 0.2s; } .animate-children > *:nth-child(5) { animation-delay: 0.25s; } .animate-children > *:nth-child(6) { animation-delay: 0.3s; } + +/* ========================================================== + MOBILE OPTIMIZATIONS + ========================================================== */ + +/* ─── Touch Optimizations ─── */ +@media (pointer: coarse) { + .nav__link, + .home-nav__list li a, + .nav__login, + .nav__wishlist, + .btn, + .auth__submit, + .shop-line { + min-height: 44px; + display: inline-flex; + align-items: center; + } + + /* Disable hover-only effects on touch */ + .product-card:hover { + transform: none; + box-shadow: var(--shadow-sm); + } + .product-card:active { + transform: scale(0.98); + box-shadow: var(--shadow-md), var(--shadow-glow-blue); + } + .shop-line:hover { + transform: none; + padding-left: 1.5rem; + } + .shop-line:active { + background: rgba(15, 21, 32, 0.9); + } +} + +/* ─── Reduce motion for accessibility ─── */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ─── Tablet (max-width: 900px) ─── */ +@media (max-width: 900px) { + :root { + --nav-gutter: 1rem; + } + + .nav { + min-height: 56px; + padding: 0 0.5rem; + } + + .nav__logo { + max-width: 120px; + } + + /* Mobile search inside hamburger */ + .nav__searchForm--mobile { + display: block; + width: 100%; + position: static; + transform: none; + margin-bottom: 1rem; + } + + .nav__searchForm--mobile .nav__searchField { + width: 100%; + } + + .nav__searchForm--mobile .nav__searchInput { + width: 100%; + height: 44px; + padding: 0 16px 0 42px; + font-size: 0.95rem; + } + + .container { + padding-inline: 1rem; + } + + .layout { + padding: 0 1rem; + margin: 1.5rem auto; + gap: 1.5rem; + } +} + +/* ─── Phone (max-width: 600px) ─── */ +@media (max-width: 600px) { + :root { + --nav-gutter: 0.75rem; + } + + body { + font-size: 0.95rem; + } + + /* Simplify background effects on mobile */ + body::before { + background-size: 60px 60px; + } + body::after { + width: 300px; + height: 300px; + } + + .nav { + min-height: 52px; + padding: 0 0.25rem; + } + + .nav__logo { + max-width: 110px; + } + + .nav__actions { + gap: 0; + } + + .nav__login, + .nav__search { + padding: 0.4rem; + } + + .icon-user { + width: 20px; + height: 20px; + } + + /* Mobile menu full-width */ + .nav__menu { + width: 100% !important; + right: -100%; + } + + .product-grid { + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 0.8rem; + } + + .product-content { + padding: 0.7rem 0.8rem 0.9rem; + } + + .product-title { + font-size: 0.82rem; + } + + .product-price { + font-size: 1.1rem; + } + + /* Buttons larger touch targets */ + .btn { + padding: 0.7rem 1.1rem; + font-size: 0.88rem; + } + + .container { + padding-inline: 0.75rem; + } +} + +/* ─── Tiny phones (max-width: 380px) ─── */ +@media (max-width: 380px) { + .nav__logo { + max-width: 90px; + } + + .nav__login, + .nav__search { + padding: 0.3rem; + } + + .icon-user { + width: 18px; + height: 18px; + } +}