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
+92 -153
1 changed files with 92 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit dfb5076032 - Show all commits
css/main.css
+116 -177
View File
@@ -1,179 +1,118 @@
* { * {
box-sizing: border-box; :root {
} --bg: #f1f5f9; /* etwas weniger „blau-stichig“, ruhiger Hintergrund */
--white: #ffffff;
/* =========================
Farben /* Navigation: dunkler für besseren Kontrast */
========================= */ --nav: #0f172a;
--nav-hover: #1e293b;
:root {
--bg: #eef2f7; /* Primary: etwas dunkler für besseren Kontrast auf Weiß */
--white: #ffffff; --primary: #1d4ed8;
--primary-hover: #1e40af;
--nav: #1e293b;
--nav-hover: #334155; /* Text: deutlich dunkler (wichtig für Accessibility) */
--text: #0f172a;
--primary: #2563eb; --text-light: #334155;
--primary-hover: #1d4ed8;
/* Border: etwas stärker sichtbar */
--text: #1e293b; --border: #cbd5e1;
--text-light: #64748b; }
--border: #dbe4ee; /* =========================
} 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 / Nav
========================= */
/* =========================
Header header,
========================= */ nav {
background-color: var(--nav);
header { }
background-color: var(--nav);
} /* =========================
Links
/* ========================= ========================= */
Logo / Bild
========================= */ a {
color: var(--primary);
header img { transition: 0.25s ease;
object-fit: cover; }
background-color: white;
border-radius: 14px; a:hover {
} color: var(--primary-hover);
text-decoration: underline; /* wichtig für Screenreader + Klarheit */
/* ========================= }
Navigation
========================= */ /* =========================
Navigation Links
nav { ========================= */
background-color: var(--nav);
} nav a {
color: #f8fafc;
nav a { border-radius: 10px;
text-decoration: none; }
color: #f1f5f9;
font-weight: 600; nav a:hover {
border-radius: 10px; background-color: var(--nav-hover);
transition: 0.3s ease; color: #ffffff;
} }
nav a:hover { /* =========================
background-color: var(--nav-hover); Buttons
color: white; ========================= */
}
button {
/* ========================= background-color: var(--primary);
Suchfeld color: white;
========================= */ border-radius: 12px;
font-weight: 600;
input[type="text"], transition: 0.25s ease;
input[type="search"] { }
border: 1px solid var(--border);
background-color: white; /* klarer Hover-Kontrast */
font-size: 1rem;
border-radius: 12px; button:hover {
} background-color: var(--primary-hover);
transform: translateY(-2px);
input:focus { }
border-color: var(--primary);
} /* Tastatur-Fokus (SEHR wichtig für Accessibility) */
/* ========================= button:focus,
Buttons nav a:focus,
========================= */ input:focus {
outline: 3px solid #93c5fd;
button { outline-offset: 2px;
background-color: var(--primary); }
color: white;
border: none; /* =========================
font-size: 1rem; Inputs
font-weight: 600; ========================= */
cursor: pointer;
input[type="text"],
border-radius: 12px; input[type="search"] {
border: 1px solid var(--border);
transition: 0.25s ease; border-radius: 12px;
} background-color: white;
color: var(--text);
/* Hover Bewegung */ }
button:hover {
background-color: var(--primary-hover); /* =========================
transform: translateY(-2px); Texte
} ========================= */
/* Klick-Effekt */ p {
button:active { color: var(--text-light);
transform: translateY(0px); line-height: 1.8;
} font-size: 1.08rem;
}
/* =========================
Hauptinhalt
========================= */
main {
background-color: var(--white);
border-radius: 24px;
}
/* =========================
Überschriften
========================= */
h1 {
color: var(--primary);
font-size: 3.5rem;
}
h2 {
color: var(--primary);
}
/* =========================
Texte
========================= */
p {
color: var(--text-light);
line-height: 1.8;
font-size: 1.08rem;
}
/* =========================
Links
========================= */
a {
color: var(--primary);
transition: 0.3s ease;
}
a:hover {
color: var(--primary-hover);
}
/* =========================
Footer
========================= */
footer {
background-color: var(--white);
}
footer a {
text-decoration: none;
color: var(--text-light);
font-weight: 500;
}
footer a:hover {
color: var(--primary);
} }