koehleestell/Social_Cooking
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout Startseite/FAQ

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 14:47:47 +02:00
parent 0041ab8d7a
commit 46eeecdc3a
6 changed files with 58 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/event_create.css
View File

@ -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);

10
css/event_overview.css
View File

@ -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;
}

72
css/index.css
View File

@ -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 --- */

5
css/my_profil.css
View File

@ -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);

5
css/stylesheet_global.css
View File

@ -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;
}

28
index.html
View File

@ -82,7 +82,7 @@
<!-- Main Content: uses .gallery, .gallery__carousel, .gallery__track, .gallery__item, and .gallery__info to present event carousel content -->
<section class="gallery" aria-label="Bildergalerie" aria-roledescription="Karussell">
<div class="gallery__header"> </div><h2>Einblick in Cooking-Erlebnisse</h2>
</div><h2>Einblick in Cooking-Erlebnisse</h2>
<p>#gemeinsam_invité auf Instagram</p>
</div>
<div class="gallery__carousel">
@ -221,7 +221,6 @@
<div class="gallery_dots" role="tablist" aria-label="Seite auswählen"></div>
</section>
</main>
<!-- Lightbox: Bildansicht vergrössert -->
<div class="lightbox" id="gallery-lightbox" aria-hidden="true">
@ -236,7 +235,6 @@
<!-- FAQ Section: Akkordion mit häufig gestellten Fragen -->
<section class="faq-section">
<div class="container">
<h2>Häufig gestellte Fragen</h2>
<div class="faq-accordion">
<div class="faq-item">
@ -245,10 +243,24 @@
<span class="faq-icon">+</span>
</button>
<div class="faq-content">
<p><strong>Schritt 1: Kostenloses Konto erstellen</strong><br>Gehe auf Invité, klicke auf "Jetzt beitreten" und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.</p>
<p><strong>Schritt 2: Dein Profil ausfüllen</strong><br>Lade ein Profilfoto hoch, schreib ein bisschen über dich und gib deine Allergien/Ernährungspräferenzen an. Das hilft anderen, dich besser kennenzulernen.</p>
<p><strong>Schritt 3: Erkunde Events</strong><br>Browsing durch unsere Events, filtere nach Diät oder Allergie-Einstellungen, und melde dich zu den Events an, die dich interessieren!</p>
<p><strong>Schritt 4: Erstelle dein eigenes Event</strong><br>Du kannst auch selbst ein Kochevent hosten! Klick auf "Event erstellen", beschreib dein Menü, und lade Gäste ein.</p>
<ol class="faq-list">
<li>
<strong>Kostenloses Konto erstellen</strong><br>
Gehe auf Invité, klicke auf "Jetzt beitreten" und fülle das Anmeldeformular aus. Du benötigst nur deine E-Mail und ein Passwort.
</li>
<li>
<strong>Dein Profil ausfüllen</strong><br>
Lade ein Profilfoto hoch, schreib ein bisschen über dich und gib deine Allergien/Ernährungspräferenzen an. Das hilft anderen, dich besser kennenzulernen.
</li>
<li>
<strong>Erkunde Events</strong><br>
Browsing durch unsere Events, filtere nach Diät oder Allergie-Einstellungen und melde dich zu den Events an, die dich interessieren!
</li>
<li>
<strong>Erstelle dein eigenes Event</strong><br>
Du kannst auch selbst ein Kochevent hosten! Klick auf "Event erstellen", beschreib dein Menü und lade Gäste ein.
</li>
</ol>
</div>
</div>
@ -302,8 +314,8 @@
</div>
</div>
</div>
</div>
</section>
</main>
<div class="footer">
<div class="footer-left">