niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

First Implementation #2

Closed
caroline.slt wants to merge 17 commits from design01 into dev
pull from: design01
merge into: niklas.ortmann:dev
Conversation 1 Commits 17 Files Changed 1
+143 -147
1 changed files with 143 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f1feb4677e - Show all commits
css/main.css
+181 -185
View File
@@ -1,187 +1,183 @@
* { * {
box-sizing: border-box; * {
} box-sizing: border-box;
}
/* =========================
Farben (HIGH CONTRAST) /* =========================
========================= */ Farben
========================= */
:root {
--bg: #f1f5f9; :root {
--white: #ffffff; --bg: #eef2f7;
--white: #ffffff;
/* Navigation dunkler für mehr Kontrast */
--nav: #0f172a; --nav: #1e293b;
--nav-hover: #1e293b; --nav-hover: #334155;
/* kräftigeres Blau */ --primary: #2563eb;
--primary: #1d4ed8; --primary-hover: #1d4ed8;
--primary-hover: #1e40af;
--text: #1e293b;
/* Text deutlich dunkler */ --text-light: #64748b;
--text: #0b1220;
--text-light: #1f2937; --border: #dbe4ee;
}
/* klarere Borders */
--border: #cbd5e1; /* =========================
} Body
========================= */
/* =========================
Body body {
========================= */ font-family: "Segoe UI", Arial, sans-serif;
background-color: var(--bg);
body { color: var(--text);
font-family: "Segoe UI", Arial, sans-serif; }
background-color: var(--bg);
color: var(--text); /* =========================
} Header
========================= */
/* =========================
Header header {
========================= */ background-color: var(--nav);
}
header {
background-color: var(--nav); /* =========================
} Logo / Bild
========================= */
/* =========================
Logo / Bild header img {
========================= */ object-fit: cover;
background-color: white;
header img { border-radius: 14px;
object-fit: cover; }
background-color: white;
border-radius: 14px; /* =========================
} Navigation
========================= */
/* =========================
Navigation nav {
========================= */ background-color: var(--nav);
}
nav {
background-color: var(--nav); nav a {
} text-decoration: none;
color: #f1f5f9;
nav a { font-weight: 600;
text-decoration: none; border-radius: 10px;
color: #f8fafc; /* heller für starken Kontrast */ transition: 0.3s ease;
font-weight: 600; }
border-radius: 10px;
transition: 0.3s ease; nav a:hover {
} background-color: var(--nav-hover);
color: white;
nav a:hover { }
background-color: var(--nav-hover);
color: #ffffff; /* =========================
} Suchfeld
========================= */
/* =========================
Suchfeld input[type="text"],
========================= */ input[type="search"] {
border: 1px solid var(--border);
input[type="text"], background-color: white;
input[type="search"] { font-size: 1rem;
border: 1px solid var(--border); border-radius: 12px;
background-color: white; }
font-size: 1rem;
border-radius: 12px; input:focus {
color: var(--text); border-color: var(--primary);
} }
input:focus { /* =========================
border-color: var(--primary); Buttons
outline: 3px solid #93c5fd; ========================= */
}
button {
/* ========================= background-color: var(--primary);
Buttons color: white;
========================= */ border: none;
font-size: 1rem;
button { font-weight: 600;
background-color: var(--primary); cursor: pointer;
color: white;
border: none; border-radius: 12px;
font-size: 1rem;
font-weight: 600; transition: 0.25s ease;
cursor: pointer; }
border-radius: 12px; /* Hover Bewegung */
transition: 0.25s ease;
} button:hover {
background-color: var(--primary-hover);
/* Hover Bewegung */ transform: translateY(-2px);
button:hover { }
background-color: var(--primary-hover);
transform: translateY(-2px); /* Klick-Effekt */
}
button:active {
/* Tastatur-Fokus (wichtig für Accessibility) */ transform: translateY(0px);
button:focus, }
nav a:focus {
outline: 3px solid #93c5fd; /* =========================
outline-offset: 2px; Hauptinhalt
} ========================= */
/* ========================= main {
Hauptinhalt background-color: var(--white);
========================= */ border-radius: 24px;
}
main {
background-color: var(--white); /* =========================
border-radius: 24px; Überschriften
} ========================= */
/* ========================= h1 {
Überschriften color: var(--primary);
========================= */ font-size: 3.5rem;
}
h1 {
color: var(--primary); h2 {
font-size: 3.5rem; color: var(--primary);
} }
h2 { /* =========================
color: var(--primary); Texte
} ========================= */
/* ========================= p {
Texte color: var(--text-light);
========================= */ line-height: 1.8;
font-size: 1.08rem;
p { }
color: var(--text-light);
line-height: 1.8; /* =========================
font-size: 1.08rem; Links
} ========================= */
/* ========================= a {
Links color: var(--primary);
========================= */ transition: 0.3s ease;
}
a {
color: var(--primary); a:hover {
transition: 0.3s ease; color: var(--primary-hover);
} }
a:hover { /* =========================
color: var(--primary-hover); Footer
text-decoration: underline; ========================= */
}
footer {
/* ========================= background-color: var(--white);
Footer }
========================= */
footer a {
footer { text-decoration: none;
background-color: var(--white); color: var(--text-light);
} font-weight: 500;
}
footer a {
text-decoration: none; footer a:hover {
color: var(--text-light); color: var(--primary);
font-weight: 500; }
}
footer a:hover {
color: var(--primary);
} }