Felix Schneider
0f19729a88
- Ordnerstruktur mit public/-Docroot, Deny-.htaccess für app/bin/config/data/storage - CLAUDE.md mit Leitplanken (self-hosted only, Single Source of Truth, Component-first) - Design-Tokens aus alter Seite extrahiert (Akzent #e20612, Coolvetica/Abel als woff2) - Front Controller mit Routen-Register, Sitemap, Canonical, JSON-LD (SportsClub) - Startseite: Hero, Instagram-Feed (lokaler Cache), Historie/Sportheim, Stats, Partner, Kontakt - Kontaktformular via PHPMailer/Brevo mit Honeypot + HMAC-Time-Trap (kein reCAPTCHA) - bin/instagram-sync.php: Scraper mit Strategie-Kette, flock, atomarem Cache, lokalen Bildern Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
107 lines
2.1 KiB
CSS
107 lines
2.1 KiB
CSS
/* ============================================================
|
|
BASE — Fonts, Typografie, Links, Fokus, Skip-Link
|
|
============================================================ */
|
|
@font-face {
|
|
font-family: 'Coolvetica';
|
|
src: url('../fonts/coolvetica.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Abel';
|
|
src: url('../fonts/abel.woff2') format('woff2');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--ff-body);
|
|
font-size: var(--fs-600);
|
|
font-weight: var(--fw-regular);
|
|
line-height: var(--lh-body);
|
|
color: var(--clr-text);
|
|
background-color: var(--clr-bg);
|
|
background-image: url('../img/background.jpg');
|
|
background-size: 100% auto;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
/* fixed-Attachment ruckelt auf Mobile */
|
|
background-attachment: scroll;
|
|
background-size: auto;
|
|
}
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--ff-heading);
|
|
font-weight: var(--fw-regular);
|
|
line-height: var(--lh-heading);
|
|
text-transform: uppercase;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
h1 { font-size: var(--fs-900); }
|
|
h2 { font-size: var(--fs-800); }
|
|
h3 { font-size: var(--fs-700); }
|
|
h4 { font-size: 1.625rem; }
|
|
h5,
|
|
h6 { font-size: var(--fs-600); }
|
|
|
|
p {
|
|
max-width: 70ch;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 0.2em;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--clr-text-muted);
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--clr-text);
|
|
outline-offset: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--clr-accent);
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 1rem;
|
|
z-index: 100;
|
|
padding: 0.75em 1.25em;
|
|
background: var(--clr-accent);
|
|
color: var(--clr-text);
|
|
text-decoration: none;
|
|
border-radius: 0 0 var(--radius-btn) var(--radius-btn);
|
|
}
|
|
|
|
.skip-link:focus-visible {
|
|
top: 0;
|
|
color: var(--clr-text);
|
|
}
|
|
|
|
/* Scrollbar dezent dunkel */
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--clr-bg-corporate) transparent;
|
|
}
|