From 4e1b5a549590fbabf6f6c1b096b5edee05320c96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C2=ABschmona=C2=BB?= <«simona.oswald@proton.me»> Date: Sun, 29 Mar 2026 23:17:37 +0200 Subject: [PATCH] Globales Stylesheet und clean up --- assets/invite-logo.svg | 20 ++-- css/event_create.css | 67 -------------- css/landingpage.css | 22 ----- css/login_signup.css | 151 +++++-------------------------- css/stylesheet_global.css | 186 ++++++++++++++++++++++---------------- event_create.html | 20 ++-- event_detail.html | 2 +- event_overview.html | 2 +- index.html | 29 ++++-- login.html | 24 ++--- signup.html | 35 ++++--- 11 files changed, 200 insertions(+), 358 deletions(-) diff --git a/assets/invite-logo.svg b/assets/invite-logo.svg index ff16a2c..ab87e7f 100644 --- a/assets/invite-logo.svg +++ b/assets/invite-logo.svg @@ -1,13 +1,9 @@ - - - - - - - - - - - - + + + + + + + + diff --git a/css/event_create.css b/css/event_create.css index 9bccef6..cd972a3 100644 --- a/css/event_create.css +++ b/css/event_create.css @@ -18,72 +18,12 @@ html { font-size: 100%; } -body { - margin: 0; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - background: var(--color-bg); - color: var(--color-text); - line-height: 1.5; -} - -a, -button, -input, -textarea { - font: inherit; -} - -a { - color: inherit; - text-decoration: none; -} - .site-header { background: var(--color-bg); border-top: 2px solid #232323; border-bottom: 1px solid var(--color-border); } -.site-nav { - width: min(100% - 2rem, var(--max-width)); - margin: 0 auto; - min-height: var(--header-height); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); -} - -.site-logo { - font-size: 2rem; - font-weight: 800; - letter-spacing: 0.02em; -} - -.site-nav-links { - display: flex; - align-items: center; - gap: var(--space-5); - margin: 0; - padding: 0; - list-style: none; -} - -.site-nav-links a { - font-weight: 500; -} - -.site-nav-links li:last-child a { - width: 2.25rem; - height: 2.25rem; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 50%; - background: #231f20; - color: #ffffff; - font-weight: 700; -} .event-create-page { width: min(100% - 2rem, var(--max-width)); @@ -156,13 +96,6 @@ fieldset { letter-spacing: 0.02em; } -h1, -h2 { - margin: 0; - font-size: clamp(2rem, 4vw, 4rem); - line-height: 1.03; - letter-spacing: -0.03em; -} .step-text { margin: 0; diff --git a/css/landingpage.css b/css/landingpage.css index b5db748..a2ed242 100644 --- a/css/landingpage.css +++ b/css/landingpage.css @@ -5,12 +5,6 @@ --white: #ffffff; } -body { - margin: 0; - font-family: 'Inter', sans-serif; - background: #f5f5f5; /* Light grey background to see the white page-wrapper */ -} - .page-wrapper { max-width: 1440px; margin: 0 auto; @@ -51,22 +45,6 @@ body { margin-bottom: 30px; /* Space between photos and dots */ } -/* Container for the dots to keep them in the middle */ -.gallery__dots { - display: flex; - justify-content: center; /* This is the "magic" line that centers them */ - gap: 12px; /* Space between the dots */ - width: 100%; -} - -/* The actual black dots */ -.dot { - width: 12px; - height: 12px; - background-color: #000; /* Solid black */ - border-radius: 50%; /* Makes them round */ - display: inline-block; -} /* --- 2. Button & Link Styling --- */ .btn { diff --git a/css/login_signup.css b/css/login_signup.css index f2d2e93..a289f64 100644 --- a/css/login_signup.css +++ b/css/login_signup.css @@ -1,87 +1,7 @@ -/* Grundlegende Resets */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: Arial, sans-serif; - background-color: #f5f5f5; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -/* Header Styles */ -.header { - background-color: white; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); - padding: 15px 30px; - display: flex; - justify-content: space-between; - align-items: center; -} - -.header-logo { - font-size: 24px; - font-weight: bold; - color: #0084ff; - text-decoration: none; - letter-spacing: 1px; -} - -.header-buttons { - display: flex; - gap: 15px; - align-items: center; -} - -.header-btn { - padding: 10px 20px; - border: none; - border-radius: 4px; - font-size: 14px; - font-weight: bold; - cursor: pointer; - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; -} - -.header-btn-secondary { - background-color: transparent; - color: #0084ff; - border: 2px solid #0084ff; -} - -.header-btn-secondary:hover { - background-color: #0084ff; - color: white; -} - -.header-btn-primary { - background-color: #0084ff; - color: white; -} - -.header-btn-primary:hover { - background-color: #0073e6; -} - -/* Main content wrapper */ -.main-content { - display: flex; - justify-content: center; - align-items: center; - flex: 1; - padding: 20px; -} - .container { - background-color: white; - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + margin-top: 5rem; + background-color: var(--white); + border-radius: var(--radius-lg); max-width: 1000px; width: 100%; display: flex; @@ -91,7 +11,7 @@ body { .image-section { flex: 1; - background-color: #e8f4f8; + background-color: var(--white); display: flex; align-items: center; justify-content: center; @@ -113,21 +33,14 @@ body { } /* Formularelemente */ -h1 { - color: #333; - margin-bottom: 20px; - text-align: center; -} - .info-box { - background-color: #e8f4f8; - border-left: 4px solid #0084ff; + background-color: var(--olive-light); padding: 15px; margin-bottom: 30px; - border-radius: 4px; - font-size: 14px; - color: #333; - line-height: 1.5; + border-radius: 8px; + font-size: 16px; + color: var(--black); + line-height: 1.4; } .form-group { @@ -137,8 +50,8 @@ h1 { label { display: block; margin-bottom: 6px; - color: #333; - font-weight: bold; + color: var(--black); + font-weight: 500; font-size: 14px; } @@ -151,66 +64,46 @@ input[type="password"] { border-radius: 4px; font-size: 14px; transition: border-color 0.3s ease; - font-family: Arial, sans-serif; } input:focus { outline: none; - border-color: #0084ff; - box-shadow: 0 0 5px rgba(0, 132, 255, 0.3); + border-color: var(--olive-dark); } -button { - width: 100%; - padding: 12px; - background-color: #0084ff; - color: white; - border: none; - border-radius: 4px; - font-size: 16px; - font-weight: bold; - cursor: pointer; - transition: background-color 0.3s ease; - margin-top: 10px; -} -button:hover { - background-color: #0073e6; -} - -button:active { - background-color: #0063cc; -} /* Hilfstexte & Fehler */ .signup-hint, .login-hint { - text-align: center; + text-align: left; margin-top: 20px; - color: #666; - font-size: 14px; + color: var(--black); + font-size: 1rem; + line-height: 130%; } .signup-hint a, .login-hint a { - color: #0084ff; + color: var(--blue); text-decoration: none; - font-weight: bold; + font-weight: 500; transition: color 0.3s ease; } .signup-hint a:hover, .login-hint a:hover { text-decoration: underline; + text-underline-offset: 2px; + color: var(--blue); } .error-message { - color: #d32f2f; + color: var(--error); font-size: 13px; margin-top: 5px; display: none; } .form-group.has-error input { - border-color: #d32f2f; - box-shadow: 0 0 5px rgba(211, 47, 47, 0.3); + border-color: var(--error); } .form-group.has-error .error-message { diff --git a/css/stylesheet_global.css b/css/stylesheet_global.css index 5b2120b..6f9f57f 100644 --- a/css/stylesheet_global.css +++ b/css/stylesheet_global.css @@ -1,9 +1,7 @@ -/* Font Import */ - +/* Font Import */ @import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap'); - /* Reset / Normalize */ *, *::before, @@ -15,43 +13,54 @@ /* Colors + Main Font */ :root { + --max-width: 1200px; + --padding: 1.5rem; + + --tomato: #D44B24; --tomato-dark: #D44B24; --olive: #6B6B05; --olive-dark: #5C5C05; - --olive-light: #E5E1B7; - --butter: #FFFBD1; - --butter-light: #FFFDE3; + --olive-light: #C8CC7A; + --butter: #F5F1BC; + --butter-light: #F7F6E6; --white: #ffffff; - --black: #221C1A; + --black: #22211A; --brown: #66340d; + --blue: #3489DA; + --blue-dark: #1D70BF; + --error: #FF3B30; --font-main: 'Jost', sans-serif; - --font-size-base: 16px; + --font-size-base: 1rem; -/* Spacing Scale */ - --space-1: 8px; - --space-2: 12px; - --space-3: 16px; - --space-4: 20px; - --space-5: 24px; - --space-6: 32px; + /* Spacing Scale */ + --space-1: 0.5rem; + --space-2: 0.75rem; + --space-3: 1rem; + --space-4: 1.25rem; + --space-5: 1.5rem; + --space-6: 2rem; + --space-7: 3rem; + --space-8: 4rem; -/* Radius Scale */ - --radius-pill: 999px; - --radius-md: 20px; - --radius-lg: 30px; -/* Letter Spacing Scale */ + /* Radius Scale */ + --radius-pill: 62.4375rem; + --radius-sm: 0.5rem; + --radius-md: 1.5rem; + --radius-lg: 1.875rem; + + /* Letter Spacing */ --ls-none: 0; - --ls-ui: 0.03em; - --ls-label: 0.045em; + --ls-sm: 2.5%; + --ls-label: 0.045rem; } /* Base Styles */ body { font-family: var(--font-main); - font-size: 1.125em; + font-size: 1.125rem; line-height: 1.5; color: var(--black); background-color: var(--butter); @@ -66,96 +75,139 @@ img { h1, h2 { font-family: 'Bagel Fat One'; - margin-bottom: 0.5em; +} + +h1 { + font-size: 2em; + font-weight: 600; + line-height: 120%; + letter-spacing: var(--ls-sm); + color: var(--brown); } p { font-family: 'Jost', sans-serif; - margin-bottom: 1em; + margin-bottom: 1rem; } /* Layout */ + +.main-content { + margin-top: var(--space-8); + +} + .container { width: 90%; - max-width: 1200px; + max-width: 75rem; margin: 0 auto; } /* Top Navigation */ .top-nav-wrap { - background: var(--butter); - padding: 6px 12px; + position: sticky; + height: 58px; + top: 1rem; + z-index: 1000; + background: none; + padding: 0 1rem; } .top-nav { - background: rgba(255, 255, 255, 0.95); + background: var(--white); + /*backdrop-filter: blur(3px) saturate(140%); + -webkit-backdrop-filter: blur(3px) saturate(140%);*/ + border-radius: var(--radius-lg); - box-shadow: 0 3px 12px rgba(102, 52, 13, 0.1); + box-shadow: 0 0.1875rem 0.75rem rgba(102, 52, 13, 0.1); display: flex; justify-content: space-between; align-items: center; - min-height: 58px; - padding: 3px 9px 3px var(--space-5); + min-height: 3.625rem; + padding: 0.1875rem 0.5625rem 0.1875rem var(--space-5); max-width: none; width: 100%; box-sizing: border-box; - margin: 0 auto; } .brand { display: inline-flex; align-items: center; - height: 50px; + height: 3.125rem; text-decoration: none; } .brand img { width: auto; height: 100%; - max-width: 104px; + max-width: 6.5rem; display: block; } -.top-nav-links { +.button-small-links { display: flex; align-items: center; - gap: 16px; - + gap: var(--space-1); } -.nav-link { + +/* Buttons */ +.button { + display: inline-block; + padding: 0.5rem 1.25rem; + background-color: var(--olive); + border: none; + border-radius: var(--radius-lg); + font-family: 'Jost', sans-serif; + font-weight: 400; + font-size: 1.25rem; + color: var(--butter-light); + cursor: pointer; +} + +.button:hover { + background-color: var(--olive-dark); +} + +.button-small { color: var(--black); - line-height: 1.3; + font-size: 1.125rem; + font-weight: 500; + letter-spacing: var(--ls-sm); + line-height: 1; text-decoration: none; + padding: var(--space-1) var(--space-4); border-radius: var(--radius-md); - border-width: 2px; - border-color: none; - border-radius: 20px } -.nav-link:hover, -.nav-link:focus-visible { +.button-small:hover, .button-small:active, +.button-small:focus-visible { background: var(--olive-light); color: var(--black); } -.login-pill { + +.button-login { background: var(--olive); - border-radius: var(--radius-md); - color: var(--butter); - line-height: 1.3; - padding: var(--space-1) var(--space-4); + color: var(--butter-light); + font-size: 1.125rem; + font-weight: 500; + letter-spacing: var(--ls-sm); + line-height: 1; text-decoration: none; + + padding: var(--space-1) var(--space-4); + border-radius: var(--radius-md); } .profile-pill { - width: 38px; - height: 38px; - border-radius: 19px; + width: 2.375rem; + height: 2.375rem; + border-radius: 1.1875rem; background: var(--tomato); color: var(--butter); - font-size: 17px; + font-size: 1.0625rem; font-weight: 500; letter-spacing: var(--ls-ui); line-height: 1.3; @@ -165,30 +217,6 @@ p { text-decoration: none; } -/* Components */ -.button { - display: inline-block; - padding: 0.5em 1.25em; - background-color: var(--olive-color); - font-family: 'Jost', sans-serif; - font-size: 1em; - color: var(--butter-light); - border: none; - border-radius: 2em; - cursor: pointer; - -} - -.button:hover { - background-color: var(--olive-dark); -} - -/* Navigation */ -.nav { - display: flex; - gap: 1rem; -} - /* Utilities */ .text-center { text-align: left; @@ -199,7 +227,7 @@ p { } /* Media Queries (Responsive) */ -@media (max-width: 768px) { +@media (max-width: 48rem) { .container { width: 95%; } diff --git a/event_create.html b/event_create.html index 54b635b..fb5db0b 100644 --- a/event_create.html +++ b/event_create.html @@ -12,23 +12,22 @@ - +
Invite Logo
- Abbrechen
@@ -39,8 +38,8 @@ >
-

Event erstellen

-

Hey {{username}}, was hast du vor?

+

Event erstellen

+

Hey {{username}}, was hast du vor?

Erzähl uns von deiner Idee – vom Essen bis zur Stimmung. Ob Dinner, Brunch oder etwas ganz Eigenes – wir helfen dir dabei, dein Event Schritt für Schritt aufzubauen. @@ -49,11 +48,6 @@ Los geht’s!

- -
@@ -70,7 +64,7 @@
- +
diff --git a/event_detail.html b/event_detail.html index cf73b50..713ab6b 100644 --- a/event_detail.html +++ b/event_detail.html @@ -11,7 +11,7 @@ - +
diff --git a/event_overview.html b/event_overview.html index dd405f8..7ce750c 100644 --- a/event_overview.html +++ b/event_overview.html @@ -13,7 +13,7 @@ - +
diff --git a/index.html b/index.html index a78b069..a2c08fc 100644 --- a/index.html +++ b/index.html @@ -4,19 +4,28 @@ Social Cooking Wireframe + + + + + -
-
-
LOGO
- -
- - Login -
+ + + +
+
+ + Invite Logo + + +
diff --git a/login.html b/login.html index cb1deec..58cc8e1 100644 --- a/login.html +++ b/login.html @@ -8,21 +8,21 @@ - + - +
Invite Logo -
@@ -35,30 +35,30 @@
-

Willkommen zurück

+

Login

- +
Bitte gib eine gültige E-Mail Adresse ein.
- +
Bitte gib dein Passwort ein.
- +
-
+
diff --git a/signup.html b/signup.html index db2098b..36859b5 100644 --- a/signup.html +++ b/signup.html @@ -4,17 +4,27 @@ Kontaktseite - Invité + + + + + - -
- -
- - Login -
-
+ +
+
+ + Invite Logo + + +
+
@@ -27,7 +37,7 @@

Erstelle deinen Account

- Hinweis: Sichtbar auf der Plattform ist nur der Vorname, erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar. + Hinweis: Sichtbar auf der Plattform ist nur dein Vorname. Erst einer Anmeldung zum Event ist der Nachname für die Teilnehmenden sichtbar.
@@ -44,7 +54,7 @@
- +
Bitte gib eine gültige E-Mail Adresse ein.
@@ -55,10 +65,11 @@
Dein Passwort muss mindestens 8 Zeichen lang sein.
- + +
- Du hast bereits einen Account? Hier geht's zum Log-in + Du hast bereits einen Account? Hier geht es zum Login.