From 2bf3609662c07d52f877accf41bb14d697286c53 Mon Sep 17 00:00:00 2001 From: oswaldsimona Date: Sat, 25 Apr 2026 16:33:28 +0200 Subject: [PATCH] Styling Event erstellen --- css/event_create.css | 119 ++++++++++++-------------------------- css/event_overview.css | 25 +++----- css/index.css | 2 +- css/login_signup.css | 5 +- css/my_profil.css | 13 +++-- css/stylesheet_global.css | 77 ++++++++++-------------- event_create.html | 26 +++++---- 7 files changed, 101 insertions(+), 166 deletions(-) diff --git a/css/event_create.css b/css/event_create.css index 0f40413..67b364d 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -36,7 +36,7 @@ .submission-success-title-row { display: flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); width: 100%; } @@ -93,7 +93,6 @@ .form-field, fieldset { display: grid; - gap: var(--space-24); } .step-copy { @@ -102,7 +101,7 @@ fieldset { } .step-fields { - gap: var(--space-5); + gap: var(--space-32); } .form-field, @@ -110,7 +109,6 @@ fieldset { margin: 0; padding: 0; border: 0; - gap: var(--space-16); } @@ -141,9 +139,9 @@ fieldset { } .field-hint { - margin: -0.25rem 0 0; - color: var(--color-muted); - font-size: 0.95rem; + color: var(--olive); + font-size: 1rem; + margin-bottom: var(--space-8); } input[type="text"], @@ -184,7 +182,7 @@ input[type="date"]:hover, input[type="time"]:hover, input[type="number"]:hover, textarea:hover { - border-color: rgba(102, 52, 13, 0.28); + border: 2px solid var(--olive); } input[type="text"]:focus, @@ -192,7 +190,7 @@ input[type="date"]:focus, input[type="time"]:focus, input[type="number"]:focus, textarea:focus { - border-color: var(--olive-dark); + border: 2px solid var(--olive); } .field-invalid { @@ -224,13 +222,12 @@ textarea:focus { justify-items: center; align-content: center; gap: var(--space-12); - color: var(--brown); + color: var(--black); } .option-card__icon { - color: var(--brown); - font-size: 1.35rem; - line-height: 1; + color: var(--black); + font-size: 1.25rem; pointer-events: none; } @@ -246,38 +243,25 @@ textarea:focus { } .option-grid--tomato-choices .option-card:hover, -.option-grid--tomato-choices .option-card:has(input:focus-visible) { - border-color: var(--tomato); - background: var(--tomato); - color: var(--butter-light); -} - +.option-grid--tomato-choices .option-card:has(input:focus-visible), .option-grid--tomato-choices .option-card:has(input:checked) { - border-color: var(--tomato); - background: var(--tomato); - color: var(--butter-light); -} - -.option-grid--icon-choices .option-card--with-icon:hover .option-card__icon, -.option-grid--icon-choices .option-card--with-icon:has(input:focus-visible) .option-card__icon, -.option-grid--icon-choices .option-card--with-icon:has(input:checked) .option-card__icon { - color: var(--butter-light); + background: var(--olive-light); } .option-grid--icon-choices .option-card--with-icon:has(input:disabled) { - opacity: 0.45; + opacity: 0.6; } .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover { border-color: var(--olive-light); background: var(--butter-light); - color: var(--brown); + color: var(--black); box-shadow: none; transform: none; } .option-grid--icon-choices .option-card--with-icon:has(input:disabled):hover .option-card__icon { - color: var(--brown); + color: var(--blaxk); } .option-card input { @@ -294,21 +278,16 @@ textarea:focus { .option-card--invalid { border-color: var(--error) !important; - box-shadow: 0 0 0 2px rgba(212, 75, 36, 0.14); + box-shadow: var(--shadow-error); } .guest-count-icon { - display: flex; - justify-content: center; - width: 100%; - color: var(--brown); - font-size: 3rem; - line-height: 1; -} - -.guest-count-icon::before { display: block; - transform: translateX(1.1rem); + text-align: center; + width: 100%; + color: var(--black); + font-size: 1.5rem; + line-height: 1; } .counter { @@ -319,7 +298,7 @@ textarea:focus { .counter-value-group { display: grid; - justify-items: stretch; + justify-items: center; row-gap: var(--space-8); width: 6rem; } @@ -343,7 +322,7 @@ textarea:focus { .review-card--success { display: grid; - gap: var(--space-5); + gap: var(--space-32); padding: var(--space-16) 0 0; border: 0; border-radius: 0; @@ -353,45 +332,33 @@ textarea:focus { .review-list { display: grid; - gap: var(--space-24); + gap: var(--space-12); margin: 0; } .review-item { display: grid; - gap: var(--space-12); padding: 1rem 1.1rem; - border: 1px solid var(--input-border-soft); + border: 1.5px solid var(--olive-light); border-radius: 1.125rem; background: var(--butter-light); - box-shadow: 0 1px 2px rgba(102, 52, 13, 0.04); cursor: pointer; - transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease; + transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } -.review-item:last-child { - border-bottom: 1px solid var(--input-border-soft); -} - -.review-item:hover { - border-color: rgba(102, 52, 13, 0.28); - background: rgba(247, 246, 230, 0.92); - transform: translateY(-1px); -} - -.review-item:focus-visible { - outline: 3px solid rgba(107, 107, 5, 0.2); - outline-offset: 3px; +.review-item:hover, +.review-item:focus-visible { + border: 2px solid var(--olive); + box-shadow: var(--shadow-interaction); + transform: translateY(-3px); } .review-item dt { - font-weight: 700; + font-weight: 600; } .review-item dd { margin: 0; - white-space: pre-wrap; - color: var(--color-text-secondary); } .review-gallery { @@ -415,9 +382,8 @@ textarea:focus { } .flow-footer { - bottom: 0; + padding-top: var(--space-80); backdrop-filter: none; - padding-top: var(--space-24); padding-bottom: env(safe-area-inset-bottom); } @@ -471,7 +437,6 @@ textarea:focus { align-items: center; justify-content: space-between; gap: var(--space-24); - padding: var(--space-24) 0; width: 100%; } @@ -498,37 +463,27 @@ textarea:focus { margin-top: var(--space-12); } -.gallery-upload { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--space-16); -} - .gallery-preview { display: contents; } .gallery-add-button { - width: 7rem; - height: 7rem; display: grid; place-items: center; align-content: center; gap: var(--space-8); - padding: var(--space-8); + padding: var(--space-20); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); background: var(--butter-light); - color: var(--olive); font-family: var(--font-main); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .gallery-add-button__icon { - color: var(--brown); - font-size: 2rem; + color: var(--black); + font-size: 1.5rem; line-height: 1; } @@ -584,7 +539,7 @@ textarea:focus { .site-footer { width: min(100% - 2rem, var(--max-width)); margin: 0 auto; - padding: var(--space-5) 0 var(--space-40); + padding: var(--space-32) 0 var(--space-40); color: var(--color-muted); text-align: center; } diff --git a/css/event_overview.css b/css/event_overview.css index f38bba2..605b301 100644 --- a/css/event_overview.css +++ b/css/event_overview.css @@ -12,15 +12,6 @@ } /* Heading hierarchy: page title > detail title > card title > section title */ -.overview-title { - margin: 0 0 var(--space-24); - color: var(--olive); - font-family: "Bagel Fat One", cursive; - font-size: clamp(38px, 5vw, 44px); - font-weight: 400; - line-height: 1.15; -} - .overview-title-row { display: flex; align-items: flex-start; @@ -147,7 +138,7 @@ background: var(--butter-light); border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); - padding: var(--space-5) var(--space-40); + padding: var(--space-32) var(--space-40); display: flex; gap: var(--space-40); cursor: pointer; @@ -282,7 +273,7 @@ --------------------------------------------------------- */ .empty-state { text-align: center; - padding: 42px var(--space-5); + padding: 42px var(--space-32); border: 2px solid var(--olive-light); border-radius: var(--radius-lg); background: var(--butter-light); @@ -294,7 +285,7 @@ color: var(--olive); font-size: 13px; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .empty-state h3 { @@ -335,7 +326,7 @@ .detail-top-row { display: inline-flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); flex-wrap: wrap; } @@ -390,7 +381,7 @@ font-weight: 400; font-size: 1rem; line-height: 1; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); padding: var(--space-8) var(--space-20); }*/ @@ -516,7 +507,7 @@ .detail-panel { background: var(--butter-light); border-radius: var(--radius-md); - padding: var(--space-24) var(--space-5); + padding: var(--space-24) var(--space-32); } .detail-panel-compact { @@ -541,7 +532,7 @@ font-size: 12px; font-weight: 600; color: var(--tomato); - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); text-decoration: none; } @@ -615,7 +606,7 @@ border-radius: var(--radius-md); box-shadow: var(--shadow-interaction); - padding: var(--space-24) var(--space-5); + padding: var(--space-24) var(--space-32); margin-top: var(--space-40); position: sticky; bottom: var(--space-40); diff --git a/css/index.css b/css/index.css index 67b289b..bdca38b 100644 --- a/css/index.css +++ b/css/index.css @@ -534,7 +534,7 @@ @media (max-width: 768px) { .faq-section { padding: var(--space-40) var(--space-24); - margin: var(--space-40) 0 var(--space-5); + margin: var(--space-40) 0 var(--space-32); } .faq-trigger { diff --git a/css/login_signup.css b/css/login_signup.css index ba67901..b1c731c 100644 --- a/css/login_signup.css +++ b/css/login_signup.css @@ -87,6 +87,7 @@ input:focus { .form-group.has-error input { border-color: var(--error); + box-shadow: var(--shadow-error); } .form-group.has-error .error-message--field-callout { @@ -149,7 +150,7 @@ input:focus { } .btn-primary { - padding: var(--space-2) var(--space-5); + padding: var(--space-2) var(--space-32); background-color: var(--olive); color: var(--white); border: none; @@ -172,7 +173,7 @@ input:focus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; - padding: var(--space-16) var(--space-5); + padding: var(--space-16) var(--space-32); border: none; margin-top: 40px; } diff --git a/css/my_profil.css b/css/my_profil.css index 6df6ec2..453cc57 100644 --- a/css/my_profil.css +++ b/css/my_profil.css @@ -6,7 +6,7 @@ justify-content: space-between; align-items: flex-start; gap: var(--space-24); - margin-bottom: var(--space-5); + margin-bottom: var(--space-32); } .profile-kicker { @@ -14,7 +14,7 @@ color: var(--olive); font-size: 1rem; font-weight: 500; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } #headline { @@ -55,7 +55,7 @@ .profile-panel { background: var(--butter-light); border-radius: var(--radius-lg); - padding: var(--space-5); + padding: var(--space-32); } .panel-head { @@ -76,7 +76,7 @@ border: 1.5px solid var(--olive-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-interaction); - padding: var(--space-5) var(--space-40); + padding: var(--space-32) var(--space-40); display: flex; justify-content: space-between; gap: var(--space-40); @@ -114,7 +114,7 @@ color: var(--olive); font-size: 0.72rem; font-weight: 700; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .profile-event-address { @@ -163,7 +163,7 @@ color: var(--olive); font-size: 0.8rem; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); } .profile-empty-state h3 { @@ -225,6 +225,7 @@ .form-group.has-error input { border-color: var(--error); + box-shadow: var(--shadow-error); } .profile-feedback { diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 4963210..369587c 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -48,7 +48,7 @@ --space-16: 1rem; /* 16px */ --space-20: 1.25rem; /* 20px */ --space-24: 1.5rem; /* 24px */ - --space-5: 2rem; /* 32px */ + --space-32: 2rem; /* 32px */ --space-40: 2.5rem; /* 40px */ --space-7: 3rem; /* 48px */ --space-64: 4rem; /* 64px */ @@ -64,7 +64,7 @@ /* Letter Spacing */ --ls-none: 0; --ls-sm: 2.5%; - --ls-la: 5%; + --ls-lg: 5%; } /* Base Styles */ @@ -91,7 +91,7 @@ h1, h2, h3, h4, h5, h6 { h1 { font-size: clamp(2.25rem, 5vw, 3rem); letter-spacing: var(--ls-sm); - margin-bottom: var(--space-5); + margin-bottom: var(--space-32); } h2 { @@ -129,15 +129,15 @@ p { margin-bottom: var(--space-8); } -/* + label { - font-family: var(--font-main); - font-size: 1.125rem; - font-weight: 600; - letter-spacing: var(--ls-sm); - line-height: 1; - margin-bottom: var(--space-0); -}*/ + font-family: var(--font-main); + font-size: 1.125rem; + font-weight: 600; + letter-spacing: var(--ls-lg); + line-height: 1; + margin-bottom: var(--space-16); +} .option { font-family: var(--font-main); @@ -145,7 +145,7 @@ label { font-weight: 600; letter-spacing: var(--ls-sm); line-height: 1; - margin-bottom: var(--space-16); + margin-bottom: var(--space-8); } .link-text a{ @@ -211,16 +211,13 @@ label { display: none; width: max-content; max-width: 15rem; - padding: 0.7rem 1.15rem; - border-radius: 1rem; + padding: var(--space-6) var(--space-16); + border-radius: var(--radius-md); background: var(--error); - color: #ffffff; + color: var(--butter-light); text-align: center; - font-size: 0.95rem; - line-height: 1.25; - white-space: normal; overflow-wrap: anywhere; - box-shadow: var(--shadow-interaction); + z-index: 1; } @@ -342,7 +339,7 @@ label { justify-content: space-between; align-items: center; min-height: 3rem; - padding: 0.1875rem 0.75rem 0.1875rem var(--space-5); + padding: 0.1875rem 0.75rem 0.1875rem var(--space-32); max-width: none; width: 100%; box-sizing: border-box; @@ -388,7 +385,7 @@ label { .nav-tab-links { display: flex; align-items: center; - gap: var(--space-5); + gap: var(--space-32); } @@ -402,7 +399,7 @@ label { font-family: var(--font-main); font-size: 1rem; font-weight: 600; - letter-spacing: var(--ls-la); + letter-spacing: var(--ls-lg); z-index: 0; } @@ -760,7 +757,7 @@ label { .modal-content { background-color: var(--white); - padding: var(--space-20) var(--space-20) var(--space-40) var(--space-20); + padding: var(--space-40); border-radius: var(--radius-lg); box-shadow: var(--shadow-interaction); max-width: 500px; @@ -773,27 +770,21 @@ label { width: 48px; height: 48px; flex: 0 0 48px; - border: 1.5px solid var(--olive); - border-radius: 999px; + border: 1.5px solid var(--olive-light); + border-radius: var(--radius-pill); + color: var(--black); background: var(--butter-light); - color: var(--olive); - font-family: "Bagel Fat One", cursive; - font-size: 1.7rem; + font-family: "Bagel Fat One"; + font-size: 1.75rem; + font-weight: 500; line-height: 1; cursor: pointer; - box-shadow: var(--shadow-interaction); - transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease; + transition: background-color 0.2s ease; } .btn-info:hover, .btn-info:focus-visible { - background: var(--butter); - border-color: var(--olive-dark); - transform: translateY(-1px); -} - -.btn-info:focus-visible { - outline: 2px solid var(--olive-dark); + background: var(--olive-light); } @keyframes modalSlideIn { @@ -822,7 +813,7 @@ label { margin-left: auto; border: none; background: transparent; - color: var(--olive); + color: var(--black); font-size: 2rem; line-height: 1; cursor: pointer; @@ -830,20 +821,14 @@ label { align-items: center; justify-content: center; padding: 0; - transition: color 0.2s ease, transform 0.2s ease; + transition: transform 0.2s ease; } .modal-close:hover, .modal-close:focus-visible { - color: var(--olive-dark); transform: translateY(-1px); } -.modal-close:focus-visible { - outline: 2px solid var(--olive-dark); - outline-offset: 2px; -} - .close-btn { font-size: 28px; color: var(--black); @@ -959,7 +944,7 @@ input[type="password"] { padding: var(--space-12) var(--space-16); border: 1.5px solid var(--olive-light); border-radius: var(--radius-md); - background: transparent; + background: var(--butter-light); transition: border-color 0.3s ease; } diff --git a/event_create.html b/event_create.html index 4887b14..2149d5e 100644 --- a/event_create.html +++ b/event_create.html @@ -70,7 +70,7 @@

Schritt 1

Was hast du vor?

-

+

Erzähl uns, was für ein Event du planst. Ist es ein gemütlicher Brunch, ein Dinner mit Wow-Effekt oder einfach ein entspanntes Mittagessen mit gutem Essen?

@@ -150,7 +150,7 @@

Schritt 2

Was kommt auf den Tisch?

-

+

Mach uns neugierig. Was gibt es zu essen? Gibt es eine bestimmte Ernährungsform oder ein Motto? Je mehr du verrätst, desto besser können sich deine Gäste auf dein Event freuen.

@@ -199,7 +199,7 @@

Schritt 3

Gibt es etwas zu beachten?

-

+

Gibt es Allergien, Unverträglichkeiten oder andere Hinweise, die für dein Event wichtig sind? So wissen deine Gäste gleich, worauf sie sich einstellen können.

@@ -228,7 +228,8 @@
- + +

Optional – nur auswählen, wenn es für dein Event relevant ist.

@@ -240,7 +241,7 @@

Schritt 4

Wann findet dein Event statt?

-

+

Wähle Datum und Uhrzeit für dein Event. So können deine Gäste direkt einschätzen, ob der Termin für sie passt.

@@ -266,7 +267,7 @@

Schritt 5

Wo findet dein Event statt?

-

+

Sag uns, wo dein Event stattfindet. Keine Sorge: Die genaue Adresse sehen Gäste erst nach der Buchung.

@@ -290,7 +291,7 @@

Schritt 6

Gib deinem Event den letzten Schliff.

-

+

Jetzt bekommt dein Event seinen Namen und die Atmosphäre, die Lust aufs Dabeisein macht. Ein klarer Titel (z.B. "Italienische Tavolata") und ein guter Beschreibungstext (Ablauf etc.) machen den Unterschied.

@@ -308,12 +309,13 @@
- -
+ +

Optional – füge Bilder zu deinem Event hinzu.

+
@@ -327,7 +329,7 @@

Schritt 7

Dein Event auf einen Blick.

-

+

Schau dir alle Details nochmal in Ruhe an. Wenn alles passt, kannst du dein Event jetzt veröffentlichen und Gäste einladen.

@@ -449,7 +451,7 @@
-

+

Sieht gut aus: Deine Idee ist jetzt live und bereit für Gäste. Im Profil kannst du dein Event anschauen, verwalten oder direkt das nächste planen.