From 46eeecdc3a57ad4278bc9470e4c6e53099f43e27 Mon Sep 17 00:00:00 2001 From: oswaldsimona Date: Sat, 25 Apr 2026 14:47:47 +0200 Subject: [PATCH] Layout Startseite/FAQ --- css/event_create.css | 2 +- css/event_overview.css | 10 +----- css/index.css | 72 ++++++++++++++++++--------------------- css/my_profil.css | 5 --- css/stylesheet_global.css | 5 +-- index.html | 28 ++++++++++----- 6 files changed, 58 insertions(+), 64 deletions(-) diff --git a/css/event_create.css b/css/event_create.css index cc2ebdc..0f40413 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -153,7 +153,7 @@ input[type="number"], textarea { font-family: var(--font-main); font-weight: 400; - font-size: 1.25rem; + font-size: 1.125rem; padding: var(--space-16) var(--space-20); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); diff --git a/css/event_overview.css b/css/event_overview.css index 0fe5ac3..d08d970 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -48,14 +48,6 @@ /* --------------------------------------------------------- Overview Header + Filters --------------------------------------------------------- */ -.filter-label { - font-family: var(--font-main); - font-size: 1rem; - font-weight: 600; - letter-spacing: var(--ls-sm); - line-height: 1; - margin-bottom: var(--space-8); -} .filter-row { display: flex; @@ -87,7 +79,7 @@ .meta-filter-group { display: flex; flex-wrap: nowrap; - gap: var(--space-2); + gap: var(--space-12); margin-bottom: 0; } diff --git a/css/index.css b/css/index.css index 2c56295..9dd7b32 100644 --- a/css/index.css +++ b/css/index.css @@ -179,7 +179,7 @@ .how-step__footer-badges { display: flex; - gap: var(--space-2); + gap: var(--space-16); justify-content: center; } @@ -204,6 +204,10 @@ /* --- Carousel gallery --- */ +.gallery { + margin-bottom: 100px; +} + .gallery__carousel { position: relative; overflow: hidden; @@ -433,35 +437,27 @@ /* --- FAQ Section: Akkordion --- */ .faq-section { - padding: var(--space-8) var(--space-24); - margin: var(--space-8) 0 var(--space-5); -} - -.faq-section h2 { - text-align: center; - margin-bottom: var(--space-5); - color: var(--brown); + margin-bottom: 0px; } .faq-accordion { width: 100%; - max-width: 56rem; - margin: 0 auto; display: flex; flex-direction: column; - gap: var(--space-2); + gap: var(--space-12); } .faq-item { border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); overflow: hidden; - background: var(--white); - transition: background-color 0.2s ease, box-shadow var(--shadow-interaction); + background: var(--butter-light); + padding: var(--space-12) var(--space-24) ; + transition: background-color 0.2s ease; } .faq-item:hover { - box-shadow: var(--shadow-interaction); + background: var(--olive-light); } .faq-trigger { @@ -469,41 +465,32 @@ display: flex; align-items: center; justify-content: space-between; - padding: var(--space-3) var(--space-24); background: transparent; border: none; cursor: pointer; + font-family: var(--font-main); font-size: 1.25rem; - font-weight: 400; - color: var(--olive); + font-weight: 400;; text-align: left; transition: background-color 0.2s ease; - font-family: var(--font-main); } -.faq-trigger:hover { - background-color: var(--butter-light); -} - -.faq-trigger:focus-visible { - outline: 2px solid var(--olive); - outline-offset: -2px; -} .faq-title { flex: 1; - font-weight: 600; + font-weight: 400; + font-size: 1.25rem; } .faq-icon { display: flex; align-items: center; justify-content: center; - width: 28px; - height: 28px; + width: 24px; + height: 24px; font-size: 1.5rem; - font-weight: 300; - color: var(--olive); + font-weight: 400; + color: var(--black); transition: transform 0.3s ease; flex-shrink: 0; } @@ -513,19 +500,16 @@ } .faq-content { - padding: 0 var(--space-24); + padding: 0; max-height: 0; overflow: hidden; - transition: max-height 0.3s ease, padding 0.3s ease; - font-size: 1.125rem; - line-height: 1.7; - color: var(--black); - font-family: var(--font-main); + transition: max-height 0.3s ease; } + .faq-content p { margin: 0; - padding: var(--space-3) 0; + padding: var(--space-12) var(--space-24) var(--space-12) 0; } .faq-trigger[aria-expanded="true"] + .faq-content { @@ -534,6 +518,16 @@ padding: var(--space-3) var(--space-24); } +.faq-list { + padding-left: var(--space-24); + margin: var(--space-12) var(--space-24) var(--space-12) 0; +} + +.faq-list li { + font-size: 1.125rem; + margin-bottom: var(--space-12) +} + /* --- Responsive: FAQ Section --- */ diff --git a/css/my_profil.css b/css/my_profil.css index 887d9ac..6df6ec2 100644 --- a/css/my_profil.css +++ b/css/my_profil.css @@ -51,11 +51,6 @@ border-radius: var(--radius-pill); } -.category-item.is-active .btn-count { - background: var(--butter-light); -} - - /* Konsistentes Karten-Layout für alle Profilsektionen. */ .profile-panel { background: var(--butter-light); diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 3e74d74..4963210 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -120,7 +120,8 @@ p { margin-bottom: 0rem; } -.label-input-field { +.label-input-field, +.filter-label { font-family: var(--font-main); font-size: 1rem; font-weight: 400; @@ -574,7 +575,7 @@ label { font-weight: 400; font-size: 1.125rem; line-height: 1; - padding: var(--space-1) var(--space-20); + padding: var(--space-6) var(--space-20); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } diff --git a/index.html b/index.html index fe890e6..82c94cc 100644 --- a/index.html +++ b/index.html @@ -82,7 +82,7 @@
-

Einblick in Cooking-Erlebnisse

+

Einblick in Cooking-Erlebnisse

#gemeinsam_invité auf Instagram

@@ -221,7 +221,6 @@
- +