Anpassung CSS an globales Stylesheet
This commit is contained in:
«schmona»
parent
434d0f34b9
commit
de625bbc49
15
.vscode/launch.json
vendored
Normal file
15
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
// Use IntelliSense to learn about possible attributes.
|
||||
// Hover to view descriptions of existing attributes.
|
||||
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,35 +1,4 @@
|
||||
:root {
|
||||
--color-bg: #f7f7f2;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-soft: #f0eee7;
|
||||
--color-text: #1f1f1f;
|
||||
--color-text-secondary: #303030;
|
||||
--color-muted: #6b6b6b;
|
||||
--color-border: #d8d8d2;
|
||||
--color-border-strong: #202020;
|
||||
--color-primary: #222222;
|
||||
--color-primary-hover: #111111;
|
||||
--color-focus: #2f6fed;
|
||||
--color-error: #b42318;
|
||||
--color-progress-bg: #ddddda;
|
||||
--color-divider: #ecece7;
|
||||
|
||||
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
|
||||
|
||||
--radius-sm: 0.875rem;
|
||||
--radius-md: 1.25rem;
|
||||
--radius-lg: 1.5rem;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.5rem;
|
||||
--space-6: 2rem;
|
||||
--space-7: 3rem;
|
||||
--space-8: 4rem;
|
||||
|
||||
--max-width: 1120px;
|
||||
--content-width: 760px;
|
||||
--header-height: 4.5rem;
|
||||
|
||||
@ -1,41 +1,3 @@
|
||||
:root {
|
||||
--black: #221c1a;
|
||||
--white: #fff;
|
||||
--gray-bg: #f4f4f4;
|
||||
--border: 1px solid #221c1a;
|
||||
--olive: #6b6b05;
|
||||
--tomato: #d44b24;
|
||||
--olive-light: #e5e1b7;
|
||||
--cream: #f3efcf;
|
||||
--butter: #fffde3;
|
||||
--brown: #66340D;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-1: 8px;
|
||||
--space-2: 12px;
|
||||
--space-3: 16px;
|
||||
--space-4: 20px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
|
||||
/* Radius Scale */
|
||||
--radius-pill: 999px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 30px;
|
||||
|
||||
/* Letter Spacing Scale */
|
||||
--ls-none: 0;
|
||||
--ls-ui: 0.03em;
|
||||
--ls-label: 0.045em;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Jost", sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--butter);
|
||||
}
|
||||
|
||||
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
@ -101,95 +63,6 @@ body {
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Top Navigation
|
||||
--------------------------------------------------------- */
|
||||
.top-nav-wrap {
|
||||
background: var(--butter);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px 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);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
border-radius: var(--radius-md);
|
||||
border-width: 2px;
|
||||
border-color: var(--olive-light);
|
||||
border-style: solid;
|
||||
border-radius: 20px
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link.active,
|
||||
.nav-link:focus-visible {
|
||||
background: var(--olive);
|
||||
color: var(--white);
|
||||
border-color: var(--olive);
|
||||
}
|
||||
|
||||
.login-pill {
|
||||
background: var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--butter);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-pill {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
background: var(--tomato);
|
||||
color: var(--butter);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------
|
||||
Overview Header + Filters
|
||||
--------------------------------------------------------- */
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
/* 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,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Colors + Main Font */
|
||||
:root {
|
||||
--primary-color: #D44B24;
|
||||
--primary-color-dark: #D44B24;
|
||||
--secondary-color: #6B6B05;
|
||||
--secondary-color-dark: #5C5C05;
|
||||
--white: #ffffff;
|
||||
--black: #221C1A;
|
||||
--brown: #66340d;
|
||||
|
||||
--font-main: 'Jost', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
background-color: #FFFDE3;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Bagel Fat One';
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Components */
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.5em 1.25em;
|
||||
background-color: var(--secondary-color);
|
||||
font-family: 'Jost', sans-serif;
|
||||
font-size: 1em;
|
||||
color: #FFFDE3;
|
||||
border: none;
|
||||
border-radius: 2em;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--secondary-color-dark);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.text-center {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
210
css/stylesheet_global.css
Normal file
210
css/stylesheet_global.css
Normal file
@ -0,0 +1,210 @@
|
||||
/* 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,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Colors + Main Font */
|
||||
:root {
|
||||
--tomato: #D44B24;
|
||||
--tomato-dark: #D44B24;
|
||||
--olive: #6B6B05;
|
||||
--olive-dark: #5C5C05;
|
||||
--olive-light: #E5E1B7;
|
||||
--butter: #FFFBD1;
|
||||
--butter-light: #FFFDE3;
|
||||
--white: #ffffff;
|
||||
--black: #221C1A;
|
||||
--brown: #66340d;
|
||||
|
||||
--font-main: 'Jost', sans-serif;
|
||||
--font-size-base: 16px;
|
||||
|
||||
/* Spacing Scale */
|
||||
--space-1: 8px;
|
||||
--space-2: 12px;
|
||||
--space-3: 16px;
|
||||
--space-4: 20px;
|
||||
--space-5: 24px;
|
||||
--space-6: 32px;
|
||||
|
||||
/* Radius Scale */
|
||||
--radius-pill: 999px;
|
||||
--radius-md: 20px;
|
||||
--radius-lg: 30px;
|
||||
|
||||
/* Letter Spacing Scale */
|
||||
--ls-none: 0;
|
||||
--ls-ui: 0.03em;
|
||||
--ls-label: 0.045em;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-main);
|
||||
font-size: 1.125em;
|
||||
line-height: 1.5;
|
||||
color: var(--black);
|
||||
background-color: var(--butter);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Bagel Fat One';
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: 'Jost', sans-serif;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.container {
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Top Navigation */
|
||||
.top-nav-wrap {
|
||||
background: var(--butter);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 3px 12px 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);
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
max-width: 104px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: var(--black);
|
||||
line-height: 1.3;
|
||||
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 {
|
||||
background: var(--olive-light);
|
||||
color: var(--black);
|
||||
}
|
||||
|
||||
.login-pill {
|
||||
background: var(--olive);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--butter);
|
||||
line-height: 1.3;
|
||||
padding: var(--space-1) var(--space-4);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile-pill {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 19px;
|
||||
background: var(--tomato);
|
||||
color: var(--butter);
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-ui);
|
||||
line-height: 1.3;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Media Queries (Responsive) */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@ -4,19 +4,27 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Event erstellen | Invité</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/event_create.css" />
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="site-nav" aria-label="Hauptnavigation">
|
||||
<a href="" class="site-logo">INVITÉ</a>
|
||||
|
||||
<ul class="site-nav-links">
|
||||
<li><a href="">Events</a></li>
|
||||
<li><a href="" aria-label="Zum Profil">M</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||
<img src="assets/invite-logo.svg" alt="Invite Logo">
|
||||
</a>
|
||||
<nav class="top-nav-links" aria-label="Hauptnavigation">
|
||||
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
|
||||
<a class="nav-link" href="event_create.html">Event erstellen</a>
|
||||
<a class="profile-pill" href="login.html" aria-label="Profil">M</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="event-create-page">
|
||||
<section class="event-flow-header" aria-label="Event erstellen Aktionen">
|
||||
|
||||
@ -4,10 +4,13 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Event-Overview</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/event_overview.css">
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/stylesheet_global.css">
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
|
||||
27
login.html
27
login.html
@ -4,17 +4,28 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Social Cooking</title>
|
||||
|
||||
<!-- Stylesheet für diese Seite-->
|
||||
<link rel="stylesheet" href="css/login_signup.css">
|
||||
<!-- Globales Stylesheet -->
|
||||
<link rel="stylesheet" href="stylesheet.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-logo">Invité</div>
|
||||
<div class="header-buttons">
|
||||
<button class="header-btn header-btn-secondary">Event finden</button>
|
||||
<a href="signup.html" class="header-btn header-btn-primary">Anmeldung</a>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Top navigation: global entry points and current page indicator -->
|
||||
<header class="top-nav-wrap">
|
||||
<div class="top-nav">
|
||||
<a class="brand" href="index.html" aria-label="Zur Startseite">
|
||||
<img src="assets/invite-logo.svg" alt="Invite Logo">
|
||||
</a>
|
||||
<nav class="top-nav-links" aria-label="Hauptnavigation">
|
||||
<a class="nav-link active" href="event_overview.html" aria-current="page">Event finden</a>
|
||||
<a class="nav-link" href="event_create.html">Event erstellen</a>
|
||||
<a class="profile-pill" href="login.html" aria-label="Profil">M</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user