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

Layout und Styling Login/Registration

Browse Source
This commit is contained in:
Simona Oswald 2026-04-25 13:32:21 +02:00
parent 3b65e392fe
commit 0041ab8d7a
10 changed files with 199 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/event_create.css
View File

@ -30,7 +30,7 @@
} }
.submission-success { .submission-success {
padding: var(--space-4) 0 var(--space-7); padding: var(--space-24) 0 var(--space-7);
} }
.submission-success-title-row { .submission-success-title-row {
@ -76,7 +76,9 @@
} }
.startseite { .startseite {
display: flex; display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
} }
.step-layout--intro { .step-layout--intro {
@ -91,11 +93,11 @@
.form-field, .form-field,
fieldset { fieldset {
display: grid; display: grid;
gap: var(--space-4); gap: var(--space-24);
} }
.step-copy { .step-copy {
gap: var(--space-4); gap: var(--space-24);
align-content: start; align-content: start;
} }
@ -130,25 +132,14 @@ fieldset {
background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft)); background: linear-gradient(135deg, var(--color-surface), var(--color-surface-soft));
} }
.intro-card--image {
width: 60%;
padding: 0;
border: 0;
overflow: hidden;
background: transparent;
box-shadow: none;
}
.intro-image { .intro-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
object-fit: cover; object-fit: cover;
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
} }
.field-hint { .field-hint {
margin: -0.25rem 0 0; margin: -0.25rem 0 0;
color: var(--color-muted); color: var(--color-muted);
@ -162,8 +153,8 @@ input[type="number"],
textarea { textarea {
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.25rem;; font-size: 1.25rem;
padding: 1rem 1.25rem; padding: var(--space-16) var(--space-20);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--butter-light); background: var(--butter-light);
@ -211,7 +202,7 @@ textarea:focus {
.field-row { .field-row {
display: grid; display: grid;
gap: var(--space-4); gap: var(--space-24);
} }
.option-grid { .option-grid {
@ -232,7 +223,7 @@ textarea:focus {
.option-card--with-icon { .option-card--with-icon {
justify-items: center; justify-items: center;
align-content: center; align-content: center;
gap: var(--space-2); gap: var(--space-12);
color: var(--brown); color: var(--brown);
} }
@ -329,7 +320,7 @@ textarea:focus {
.counter-value-group { .counter-value-group {
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
row-gap: var(--space-1); row-gap: var(--space-8);
width: 6rem; width: 6rem;
} }
@ -342,7 +333,7 @@ textarea:focus {
.review-card { .review-card {
display: grid; display: grid;
gap: var(--space-4); gap: var(--space-24);
padding: 0; padding: 0;
border: 0; border: 0;
border-radius: 0; border-radius: 0;
@ -362,13 +353,13 @@ textarea:focus {
.review-list { .review-list {
display: grid; display: grid;
gap: var(--space-4); gap: var(--space-24);
margin: 0; margin: 0;
} }
.review-item { .review-item {
display: grid; display: grid;
gap: var(--space-2); gap: var(--space-12);
padding: 1rem 1.1rem; padding: 1rem 1.1rem;
border: 1px solid var(--input-border-soft); border: 1px solid var(--input-border-soft);
border-radius: 1.125rem; border-radius: 1.125rem;
@ -406,7 +397,7 @@ textarea:focus {
.review-gallery { .review-gallery {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: var(--space-1); gap: var(--space-8);
} }
.review-gallery__thumb { .review-gallery__thumb {
@ -426,7 +417,7 @@ textarea:focus {
.flow-footer { .flow-footer {
bottom: 0; bottom: 0;
backdrop-filter: none; backdrop-filter: none;
padding-top: var(--space-4); padding-top: var(--space-24);
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
} }
@ -479,8 +470,8 @@ textarea:focus {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-4); gap: var(--space-24);
padding: var(--space-4) 0; padding: var(--space-24) 0;
width: 100%; width: 100%;
} }
@ -504,7 +495,7 @@ textarea:focus {
.button--intro { .button--intro {
justify-self: start; justify-self: start;
margin-top: var(--space-2); margin-top: var(--space-12);
} }
.gallery-upload { .gallery-upload {
@ -524,8 +515,8 @@ textarea:focus {
display: grid; display: grid;
place-items: center; place-items: center;
align-content: center; align-content: center;
gap: var(--space-1); gap: var(--space-8);
padding: var(--space-1); padding: var(--space-8);
border: 1.5px solid var(--olive-light); border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--butter-light); background: var(--butter-light);
@ -626,7 +617,7 @@ textarea:focus-visible {
position: static; position: static;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
margin-bottom: var(--space-2); margin-bottom: var(--space-12);
} }
.progress-wrap { .progress-wrap {

38
css/event_overview.css
View File

@ -13,7 +13,7 @@
/* Heading hierarchy: page title > detail title > card title > section title */ /* Heading hierarchy: page title > detail title > card title > section title */
.overview-title { .overview-title {
margin: 0 0 var(--space-4); margin: 0 0 var(--space-24);
color: var(--olive); color: var(--olive);
font-family: "Bagel Fat One", cursive; font-family: "Bagel Fat One", cursive;
font-size: clamp(38px, 5vw, 44px); font-size: clamp(38px, 5vw, 44px);
@ -25,15 +25,15 @@
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: var(--space-4); gap: var(--space-24);
} }
.overview-title-row .overview-title { .overview-title-row .overview-title {
margin-bottom: var(--space-4); margin-bottom: var(--space-24);
} }
.detail-title { .detail-title {
margin-bottom: var(--space-4); margin-bottom: var(--space-24);
} }
.detail-section-title { .detail-section-title {
@ -54,7 +54,7 @@
font-weight: 600; font-weight: 600;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
margin-bottom: var(--space-1); margin-bottom: var(--space-8);
} }
.filter-row { .filter-row {
@ -67,7 +67,7 @@
.category-group { .category-group {
display: flex; display: flex;
gap: var(--space-1); gap: var(--space-8);
margin-bottom: 0; margin-bottom: 0;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
@ -81,7 +81,7 @@
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
padding: var(--space-1) var(--space-20); padding: var(--space-8) var(--space-20);
} }
.meta-filter-group { .meta-filter-group {
@ -105,7 +105,7 @@
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--butter-light); background: var(--butter-light);
height: 37px; height: 37px;
padding: 0 var(--space-4); padding: 0 var(--space-24);
box-sizing: border-box; box-sizing: border-box;
} }
@ -138,7 +138,7 @@
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='currentColor' stroke-width='1.5' fill='none' stroke-linecap='butt' stroke-linejoin='miter'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;
color: var(--black); color: var(--black);
background-position: right var(--space-4) center; background-position: right var(--space-24) center;
} }
/* --------------------------------------------------------- /* ---------------------------------------------------------
@ -183,7 +183,7 @@
/* Primary metadata line: location + date/time/guest counters. */ /* Primary metadata line: location + date/time/guest counters. */
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-4); gap: var(--space-24);
margin-bottom: var(--space-0); margin-bottom: var(--space-0);
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -203,7 +203,7 @@
.event-meta-row { .event-meta-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-8);
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -215,7 +215,7 @@
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
padding: var(--space-1) var(--space-20); padding: var(--space-8) var(--space-20);
} }
.event-spec-chip { .event-spec-chip {
@ -247,7 +247,7 @@
.button-plaetze { .button-plaetze {
border: none; border: none;
padding: var(--space-01) var(--space-4); padding: var(--space-8) var(--space-24);
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1.125rem; font-size: 1.125rem;
@ -263,7 +263,7 @@
.event-spots-full, .detail-spots-pill-full { .event-spots-full, .detail-spots-pill-full {
/* Sold-out visual state, intentionally high-contrast and always filled. */ /* Sold-out visual state, intentionally high-contrast and always filled. */
border: 1.5px solid var(--tomato-light); border: 1.5px solid var(--tomato-light);
padding: var(--space-01) var(--space-4); padding: var(--space-8) var(--space-24);
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
color: var(--butter-light); color: var(--butter-light);
background: var(--tomato-light); background: var(--tomato-light);
@ -399,7 +399,7 @@
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
letter-spacing: var(--ls-la); letter-spacing: var(--ls-la);
padding: var(--space-1) var(--space-20); padding: var(--space-8) var(--space-20);
}*/ }*/
.detail-gallery { .detail-gallery {
@ -524,7 +524,7 @@
.detail-panel { .detail-panel {
background: var(--butter-light); background: var(--butter-light);
border-radius: var(--radius-md); border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5); padding: var(--space-24) var(--space-5);
} }
.detail-panel-compact { .detail-panel-compact {
@ -623,7 +623,7 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-interaction); box-shadow: var(--shadow-interaction);
padding: var(--space-4) var(--space-5); padding: var(--space-24) var(--space-5);
margin-top: var(--space-40); margin-top: var(--space-40);
position: sticky; position: sticky;
bottom: var(--space-40); bottom: var(--space-40);
@ -671,13 +671,13 @@
.detail-action-buttons { .detail-action-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-1); gap: var(--space-8);
} }
.detail-spots-pill { .detail-spots-pill {
border: none; border: none;
padding: var(--space-01) var(--space-4); padding: var(--space-8) var(--space-24);
font-family: var(--font-main); font-family: var(--font-main);
font-weight: 400; font-weight: 400;
font-size: 1rem; font-size: 1rem;

18
css/index.css
View File

@ -152,7 +152,7 @@
.how-step_icon { .how-step_icon {
font-size: 3.5rem; font-size: 3.5rem;
color: var(--brown); color: var(--brown);
margin: var(--space-4) 0; margin: var(--space-24) 0;
} }
.how-step__png { .how-step__png {
@ -166,7 +166,7 @@
} }
.how-step_text { .how-step_text {
margin-bottom: var(--space-4); margin-bottom: var(--space-24);
text-align: center; text-align: center;
} }
@ -308,11 +308,11 @@
} }
.gallery__arrow--prev { .gallery__arrow--prev {
left: var(--space-4); left: var(--space-24);
} }
.gallery__arrow--next { .gallery__arrow--next {
right: var(--space-4); right: var(--space-24);
} }
@ -433,7 +433,7 @@
/* --- FAQ Section: Akkordion --- */ /* --- FAQ Section: Akkordion --- */
.faq-section { .faq-section {
padding: var(--space-8) var(--space-4); padding: var(--space-8) var(--space-24);
margin: var(--space-8) 0 var(--space-5); margin: var(--space-8) 0 var(--space-5);
} }
@ -469,7 +469,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-24);
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
@ -513,7 +513,7 @@
} }
.faq-content { .faq-content {
padding: 0 var(--space-4); padding: 0 var(--space-24);
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease; transition: max-height 0.3s ease, padding 0.3s ease;
@ -531,7 +531,7 @@
.faq-trigger[aria-expanded="true"] + .faq-content { .faq-trigger[aria-expanded="true"] + .faq-content {
display: block; display: block;
max-height: 500px; max-height: 500px;
padding: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-24);
} }
@ -539,7 +539,7 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.faq-section { .faq-section {
padding: var(--space-40) var(--space-4); padding: var(--space-40) var(--space-24);
margin: var(--space-40) 0 var(--space-5); margin: var(--space-40) 0 var(--space-5);
} }

129
css/login_signup.css
View File

@ -4,139 +4,76 @@
typography) are in stylesheet_global.css typography) are in stylesheet_global.css
=========================================== */ =========================================== */
.container-login {
/* --- Page layout --- */ background-color: var(--butter-light);
border: 1.5px solid var(--olive-light);
.container { border-radius: var(--radius-lg);
display: flex; padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
justify-content: center;
align-items: center;
flex: 1;
padding: var(--space-4);
} }
.container { .container-registration {
background-color: var(--white); display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-64);
background-color: var(--butter-light);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 1000px;
width: 100%;
display: flex;
gap: var(--space-4);
overflow: hidden; overflow: hidden;
} }
.text-section {
padding: var(--space-40) var(--space-80) var(--space-80) var(--space-80);
}
/* --- Image section --- */ /* --- Image section --- */
.image-section { .image-section {
flex: 1; height: 100%;
background-color: var(--butter-light);
display: flex; display: flex;
align-items: center;
justify-content: center;
min-height: 500px;
} }
.image-section img { .image-section img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
display: block;
} }
/* --- Form section --- */
.form-section {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
color: var(--black);
margin-bottom: var(--space-4);
text-align: center;
}
/* --- Form elements --- */
.form-group {
margin-bottom: var(--space-4);
}
.form-group.has-error { .form-group.has-error {
margin-bottom: var(--space-2); margin-bottom: 0;
}
label {
display: block;
margin-bottom: var(--space-1);
color: var(--black);
font-weight: 600;
font-size: 0.9rem;
} }
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"] { input[type="password"] {
width: 100%; font-size: 1.125rem;
padding: var(--space-2);
border: 2px solid var(--olive-light);
border-radius: var(--radius-md);
font-size: 0.9rem;
font-family: var(--font-main); font-family: var(--font-main);
width: 100%;
padding: var(--space-8) var(--space-16);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md);
background: transparent;
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
background: var(--white);
color: var(--black);
} }
input:focus { input:focus {
outline: none; outline: none;
border-color: var(--olive); border: 2px solid var(--olive);
box-shadow: 0 0 5px rgba(107, 107, 5, 0.25);
}
button[type="submit"] {
width: 100%;
padding: var(--space-2);
background-color: var(--olive);
color: var(--white);
border: none;
border-radius: var(--radius-pill);
font-size: 1rem;
font-weight: 700;
font-family: var(--font-main);
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
margin-top: var(--space-2);
}
button[type="submit"]:hover {
background-color: var(--olive-dark);
transform: translateY(-1px);
}
button[type="submit"]:active {
background-color: var(--olive-dark);
transform: translateY(0);
} }
/* --- Info box --- */ /* --- Info box --- */
.info-box { .info-box {
background-color: var(--butter-light); background-color: var(--olive-light);
border-left: 4px solid var(--olive);
padding: var(--space-16); padding: var(--space-16);
margin-bottom: var(--space-40); margin-bottom: var(--space-40);
border-radius: 4px; border-radius: var(--radius-md);
font-size: 0.9rem; font-size: 1rem;
color: var(--black); color: var(--black);
line-height: 1.5; line-height: 1.4;
} }
@ -150,13 +87,12 @@ button[type="submit"]:active {
.form-group.has-error input { .form-group.has-error input {
border-color: var(--error); border-color: var(--error);
box-shadow: 0 0 5px rgba(212, 75, 36, 0.3);
} }
.form-group.has-error .error-message--field-callout { .form-group.has-error .error-message--field-callout {
display: block; display: block;
} }
*/
/* --- Modal / Popup --- */ /* --- Modal / Popup --- */
@ -232,7 +168,6 @@ button[type="submit"]:active {
/* --- Footer --- */ /* --- Footer --- */
.footer { .footer {
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
@ -263,7 +198,7 @@ button[type="submit"]:active {
.footer-right { .footer-right {
justify-self: end; justify-self: end;
display: flex; display: flex;
gap: var(--space-4); gap: var(--space-24);
} }

16
css/my_profil.css
View File

@ -5,7 +5,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
gap: var(--space-4); gap: var(--space-24);
margin-bottom: var(--space-5); margin-bottom: var(--space-5);
} }
@ -36,7 +36,7 @@
.profile-grid { .profile-grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: var(--space-4); gap: var(--space-24);
} }
.btn-count { .btn-count {
@ -72,7 +72,7 @@
.profile-card-list { .profile-card-list {
display: grid; display: grid;
gap: var(--space-2); gap: var();
} }
/* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */ /* Einzelne Eventkarte für "Meine Events" und "Meine Anmeldungen". */
@ -146,7 +146,7 @@
.profile-event-actions { .profile-event-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2); gap: var();
} }
.profile-empty { .profile-empty {
@ -188,16 +188,14 @@
gap: var(--space-16); gap: var(--space-16);
} }
.form-group { /*
margin-bottom: var(--space-16);
}
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 0.35rem; margin-bottom: 0.35rem;
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 500; font-weight: 500;
} }*/
.form-group input { .form-group input {
width: 100%; width: 100%;
@ -243,7 +241,7 @@
.profile-cta-row { .profile-cta-row {
display: flex; display: flex;
gap: var(--space-2); gap: var();
margin-top: var(--space-16); margin-top: var(--space-16);
} }

95
css/stylesheet_global.css
View File

@ -42,16 +42,17 @@
/* Spacing Scale > 1rem = 16px*/ /* Spacing Scale > 1rem = 16px*/
--space-0: 0.25rem; /* 4px */ --space-0: 0.25rem; /* 4px */
--space-01: 0.375rem; /* 6px */ --space-6: 0.375rem; /* 6px */
--space-1: 0.5rem; /* 8px */ --space-8: 0.5rem; /* 8px */
--space-2: 0.75rem; /* 12px */ --space-12: 0.75rem; /* 12px */
--space-16: 1rem; /* 16px */ --space-16: 1rem; /* 16px */
--space-20: 1.25rem; /* 20px */ --space-20: 1.25rem; /* 20px */
--space-4: 1.5rem; /* 24px */ --space-24: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */ --space-5: 2rem; /* 32px */
--space-40: 2.5rem; /* 40px */ --space-40: 2.5rem; /* 40px */
--space-7: 3rem; /* 48px */ --space-7: 3rem; /* 48px */
--space-8: 4rem; /* 64px */ --space-64: 4rem; /* 64px */
--space-80: 5rem; /* 80px */
/* Radius Scale */ /* Radius Scale */
@ -81,32 +82,25 @@ img {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: 'Bagel Fat One'; font-family: 'Bagel Fat One';
font-weight: 500;
letter-spacing: var(--ls-sm);
line-height: 120%;
color: var(--brown);
} }
h1 { h1 {
font-size: clamp(2.25rem, 5vw, 3rem); font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 600;
line-height: 120%;
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
color: var(--brown);
margin-bottom: var(--space-5); margin-bottom: var(--space-5);
} }
h2 { h2 {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 600; margin-bottom: var(--space-24);
line-height: 120%;
letter-spacing: var(--ls-sm);
color: var(--brown);
margin-bottom: var(--space-4);
} }
h3 { h3 {
font-size: 2rem; font-size: 2rem;
font-weight: 600;
line-height: 120%;
letter-spacing: var(--ls-sm);
color: var(--brown);
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -121,19 +115,20 @@ p {
.p-small { .p-small {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1rem; font-size: 1rem;
font-weight: 400;
line-height: 1.5; line-height: 1.5;
margin-bottom: 0rem; margin-bottom: 0rem;
} }
.label-input-field { .label-input-field {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1.125rem; font-size: 1rem;
font-weight: 600; font-weight: 400;
letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
margin-bottom: var(--space-16); margin-bottom: var(--space-8);
} }
/*
label { label {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1.125rem; font-size: 1.125rem;
@ -141,7 +136,7 @@ label {
letter-spacing: var(--ls-sm); letter-spacing: var(--ls-sm);
line-height: 1; line-height: 1;
margin-bottom: var(--space-0); margin-bottom: var(--space-0);
} }*/
.option { .option {
font-family: var(--font-main); font-family: var(--font-main);
@ -154,7 +149,7 @@ label {
.link-text a{ .link-text a{
color: var(--blue); color: var(--blue);
margin-top: var(--space-4); margin-top: var(--space-24);
text-decoration: none; text-decoration: none;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
@ -177,7 +172,7 @@ label {
.error-message { .error-message {
font-family: var(--font-main); font-family: var(--font-main);
font-size: 1rem; font-size: 1rem;
line-height: 1.4; line-height: 1.5;
} }
.error-message--inline { .error-message--inline {
@ -188,14 +183,13 @@ label {
display: none; display: none;
width: fit-content; width: fit-content;
max-width: min(100%, 20rem); max-width: min(100%, 20rem);
padding: 0.35rem 0.8rem; padding: var(--space-6) var(--space-16);
/*margin-bottom: -32px;*/
border-radius: var(--radius-md); border-radius: var(--radius-md);
background: var(--error); background: var(--error);
color: var(--white); color: var(--butter-light);
text-align: center; text-align: center;
font-size: 0.8125rem;
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere; overflow-wrap: anywhere;
position: relative; position: relative;
} }
@ -247,8 +241,12 @@ label {
/* Margins */ /* Margins */
.margin-bottom-16 {
margin-bottom: var(--space-16);
}
.margin-bottom-24 { .margin-bottom-24 {
margin-bottom: var(--space-4); margin-bottom: var(--space-24);
} }
.margin-bottom-40 { .margin-bottom-40 {
@ -428,7 +426,7 @@ label {
/* Buttons */ /* Buttons */
.button-primary { .button-primary {
display: inline-block; display: inline-block;
padding: var(--space-01) var(--space-4); padding: var(--space-6) var(--space-24);
background-color: var(--olive); background-color: var(--olive);
border: 1.5px solid var(--olive); border: 1.5px solid var(--olive);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
@ -451,7 +449,7 @@ label {
background: transparent; background: transparent;
color: var(--olive-dark); color: var(--olive-dark);
opacity: 0.6; opacity: 0.6;
padding: var(--space-01) 0 var(--space-01) var(--space-4); padding: var() 0 var(--space-6) var(--space-24);
cursor: not-allowed; cursor: not-allowed;
} }
@ -602,7 +600,7 @@ label {
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
height: 44px; height: 44px;
padding: 0 var(--space-4); padding: 0 var(--space-24);
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-16); gap: var(--space-16);
@ -806,7 +804,7 @@ label {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: var(--space-4); gap: var(--space-24);
} }
.modal-header h2 { .modal-header h2 {
@ -859,14 +857,14 @@ label {
} }
.modal-body { .modal-body {
padding: var(--space-4) 0 0; padding: var(--space-24) 0 0;
text-align: left; text-align: left;
line-height: 1.7; line-height: 1.7;
} }
.modal-footer { .modal-footer {
display: flex; display: flex;
gap: var(--space-2); gap: var();
justify-content: center; justify-content: center;
} }
@ -949,6 +947,27 @@ label {
cursor: pointer; cursor: pointer;
} }
/* Formulare */
input[type="text"],
input[type="email"],
input[type="password"] {
font-size: 1.125rem;
font-family: var(--font-main);
width: 100%;
padding: var(--space-12) var(--space-16);
border: 1.5px solid var(--olive-light);
border-radius: var(--radius-md);
background: transparent;
transition: border-color 0.3s ease;
}
input:focus {
outline: none;
border: 2px solid var(--olive);
}
/* Footer */ /* Footer */
.footer { .footer {
@ -961,7 +980,7 @@ label {
.footer-links { .footer-links {
display: flex; display: flex;
gap: var(--space-4); gap: var(--space-24);
} }
/* Left aligned */ /* Left aligned */
@ -978,6 +997,6 @@ label {
.footer-right { .footer-right {
justify-self: end; justify-self: end;
display: flex; display: flex;
gap: var(--space-4); gap: var(--space-24);
} }

22
event_create.html
View File

@ -32,13 +32,13 @@
</header> </header>
<main class="event-create-page"> <main class="event-create-page layout-narrow">
<section class="event-flow-header" aria-label="Event erstellen Aktionen"> <section class="event-flow-header" aria-label="Event erstellen Aktionen">
</section> </section>
<form id="eventForm" class="event-form" novalidate> <form id="eventForm" class="event-form" novalidate>
<section <section
class="step step--active step--intro layout-wide" class="step step--active step--intro"
data-step="0" data-step="0"
aria-labelledby="intro-title" aria-labelledby="intro-title"
> >
@ -55,7 +55,7 @@
</button> </button>
</div> </div>
<div class="intro-card intro-card--image hero__right" aria-label="Stimmungsbild zur Event-Erstellung"> <div class="hero__right" aria-label="Stimmungsbild zur Event-Erstellung">
<img <img
class="intro-image" class="intro-image"
src="assets/eventcreate_foodtable-new.jpg" src="assets/eventcreate_foodtable-new.jpg"
@ -65,7 +65,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="1" aria-labelledby="step1-title"> <section class="step" data-step="1" aria-labelledby="step1-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 1</p> <p class="badge">Schritt 1</p>
@ -145,7 +145,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="2" aria-labelledby="step2-title"> <section class="step" data-step="2" aria-labelledby="step2-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 2</p> <p class="badge">Schritt 2</p>
@ -194,7 +194,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="3" aria-labelledby="step3-title"> <section class="step" data-step="3" aria-labelledby="step3-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 3</p> <p class="badge">Schritt 3</p>
@ -235,7 +235,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="4" aria-labelledby="step4-title"> <section class="step" data-step="4" aria-labelledby="step4-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 4</p> <p class="badge">Schritt 4</p>
@ -261,7 +261,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="5" aria-labelledby="step5-title"> <section class="step" data-step="5" aria-labelledby="step5-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 5</p> <p class="badge">Schritt 5</p>
@ -285,7 +285,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="6" aria-labelledby="step6-title"> <section class="step" data-step="6" aria-labelledby="step6-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 6</p> <p class="badge">Schritt 6</p>
@ -322,7 +322,7 @@
</div> </div>
</section> </section>
<section class="step layout-narrow" data-step="7" aria-labelledby="step7-title"> <section class="step" data-step="7" aria-labelledby="step7-title">
<div class="step-layout"> <div class="step-layout">
<div class="step-copy"> <div class="step-copy">
<p class="badge">Schritt 7</p> <p class="badge">Schritt 7</p>
@ -404,7 +404,7 @@
</section> </section>
<div class="flow-footer layout-narrow" id="flowFooter" hidden> <div class="flow-footer" id="flowFooter" hidden>
<div class="flow-actions"> <div class="flow-actions">
<button type="button" id="backButton" class="button-secondary"> <button type="button" id="backButton" class="button-secondary">
Zurück Zurück

35
login.html
View File

@ -5,10 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Invité | Login</title> <title>Invité | Login</title>
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<!-- Stylesheet für diese Seite --> <!-- Stylesheet für diese Seite -->
<link rel="stylesheet" href="css/login_signup.css"> <link rel="stylesheet" href="css/login_signup.css">
<!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css">
<script src="js/navigation.js" defer></script> <script src="js/navigation.js" defer></script>
</head> </head>
@ -26,36 +27,34 @@
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<div class="container"> <div class="container-login layout-narrow">
<div class="container">
<div class="image-section">
<img src="assets/index_cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section"> <div>
<h1>Login</h1> <h1>Login</h1>
<form id="loginForm" novalidate> <form id="loginForm" novalidate >
<div class="form-group"> <div class="form-group margin-bottom-16">
<label for="email">E-Mail</label> <p class= "label-input-field" for="email">E-Mail</p>
<input type="email" id="email" name="email" required placeholder="deine.email@example.com"> <input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div> <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
</div> </div>
<div class="form-group"> <div class="form-group margin-bottom-40">
<label for="passwort">Passwort</label> <p class= "label-input-field" for="passwort">Passwort</p>
<input type="password" id="passwort" name="passwort" required placeholder="Gib dein Passwort ein"> <input type="password" id="passwort" name="passwort" required placeholder="Dein Passwort">
<div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div> <div class="error-message error-message--field-callout" id="passwortError">Bitte gib dein Passwort ein.</div>
</div> </div>
<button type="submit" class="button-primary">Login</button> <button class="button-primary margin-bottom-24">Login</button>
<div class="link-text"> <div class="link-text">
Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Anmeldung.</a> Du hast noch keinen Account? <a href="signup.html">Hier geht es zur Registration.</a>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> <!-- Schliesst container --> </div> <!-- Schliesst container -->
<div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div> <div class="snackbar" id="snackbar">Willkommen zurück! Du wirst weitergeleitet...</div>
<script src="js/login.js"></script> <script src="js/login.js"></script>

8
my_profil.html
View File

@ -85,26 +85,26 @@
<h2 class="panel-title">Profil verwalten</h2> <h2 class="panel-title">Profil verwalten</h2>
<form id="profile-form" novalidate> <form id="profile-form" novalidate>
<div class="form-grid"> <div class="form-grid">
<div class="form-group"> <div class="margin-bottom-16">
<label for="vorname">Vorname</label> <label for="vorname">Vorname</label>
<input type="text" id="vorname" name="vorname" required> <input type="text" id="vorname" name="vorname" required>
<p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p> <p class="input-error" id="vorname-error">Bitte gib deinen Vornamen ein.</p>
</div> </div>
<div class="form-group"> <div class="margin-bottom-16">
<label for="nachname">Nachname</label> <label for="nachname">Nachname</label>
<input type="text" id="nachname" name="nachname" required> <input type="text" id="nachname" name="nachname" required>
<p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p> <p class="input-error" id="nachname-error">Bitte gib deinen Nachnamen ein.</p>
</div> </div>
</div> </div>
<div class="form-group"> <div class="margin-bottom-16">
<label for="email">E-Mail</label> <label for="email">E-Mail</label>
<input type="email" id="email" name="email" required> <input type="email" id="email" name="email" required>
<p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p> <p class="input-error" id="email-error">Bitte gib eine gültige E-Mail-Adresse ein.</p>
</div> </div>
<div class="form-group"> <div class="margin-bottom-40">
<label for="passwort">Passwort</label> <label for="passwort">Passwort</label>
<input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen"> <input type="password" id="passwort" name="passwort" minlength="6" placeholder="Mindestens 6 Zeichen">
<p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p> <p class="input-hint">Nur ausfüllen, wenn du dein Passwort ändern möchtest.</p>

39
signup.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontaktseite - Invité</title> <title>Invité | Registration</title>
<!-- Globales Stylesheet --> <!-- Globales Stylesheet -->
<link rel="stylesheet" href="css/stylesheet_global.css"> <link rel="stylesheet" href="css/stylesheet_global.css">
@ -26,12 +26,8 @@
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<div class="container"> <div class="container-registration layout-wide">
<div class="container"> <div class="text-section">
<div class="image-section">
<img src="assets/index_cooking.jpg" alt="Social Cooking">
</div>
<div class="form-section"> <div class="form-section">
<h1>Erstelle deinen Account</h1> <h1>Erstelle deinen Account</h1>
@ -40,31 +36,31 @@
</div> </div>
<form id="signupForm" novalidate> <form id="signupForm" novalidate>
<div class="form-group"> <div class="margin-bottom-16">
<label for="vorname">Vorname *</label> <p class= "label-input-field" for="vorname">Vorname*</p>
<input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname"> <input type="text" id="vorname" name="vorname" required placeholder="Dein Vorname">
<div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div> <div class="error-message error-message--field-callout" id="vornameError">Bitte gib deinen Vornamen ein.</div>
</div> </div>
<div class="form-group"> <div class="margin-bottom-16">
<label for="nachname">Nachname *</label> <p class= "label-input-field" for="nachname">Nachname*</p>
<input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname"> <input type="text" id="nachname" name="nachname" required placeholder="Dein Nachname">
<div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div> <div class="error-message error-message--field-callout" id="nachnameError">Bitte gib deinen Nachnamen ein.</div>
</div> </div>
<div class="form-group"> <div class="margin-bottom-16">
<label for="email">E-Mail *</label> <p class= "label-input-field" for="email">E-Mail*</p>
<input type="email" id="email" name="email" required placeholder="deine.email@example.com"> <input type="email" id="email" name="email" required placeholder="Deine E-mail-Adresse">
<div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail Adresse ein.</div> <div class="error-message error-message--field-callout" id="emailError">Bitte gib eine gültige E-Mail-Adresse ein.</div>
</div> </div>
<div class="form-group"> <div class="margin-bottom-40">
<label for="passwort">Passwort *</label> <p class= "label-input-field" for="passwort">Passwort*</p>
<input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen"> <input type="password" id="passwort" name="passwort" required placeholder="Mindestens 8 Zeichen">
<div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div> <div class="error-message error-message--field-callout" id="passwortError">Dein Passwort muss mindestens 8 Zeichen lang sein.</div>
</div> </div>
<button type="submit" class="button-primary">Konto erstellen</button> <button type="submit" class="button-primary margin-bottom-24">Konto erstellen</button>
<div class="link-text"> <div class="link-text">
@ -72,6 +68,13 @@
</div> </div>
</form> </form>
</div> </div>
</div>
<div class="image-section">
<img src="assets/index_cooking.jpg" alt="Social Cooking">
</div>
</div> </div>
</div> <!-- Schliesst container --> </div> <!-- Schliesst container -->