WEBklar/emmas-schatzkiste
4
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Geschichte größer, Opa Martins Name mit Kontur

Browse Source 
- 'Wie alles angefangen hat': Überschrift 48px, Text 20px in ink-700
- Name unter dem Porträt in Display-Größe mit derselben Kontur wie die Hero-Headline

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5.5 committed 2026-09-24 22:22:24 +02:00
1 parent 9d100734a9
commit ab41686689
6 files changed
+22 -7
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+17 -2
View File
@@ -378,6 +378,14 @@ a:hover{color:var(--sky-600)}
}
.story__copy{display:grid; gap:var(--space-4)}
.story__copy p{max-width:50ch}
/* Kundenwunsch 2026-09-24: Geschichte größer. Überschrift auf Display-Niveau, Text eine
Stufe hoch auf 20px (vorhandene h3-Stufe, keine neue Größe) in ink-700 — er ist hier
der Inhalt, nicht Beiwerk. Guardrail Typo-Extreme: groß wird wirklich groß. */
#ueber-uns .sh h2{font-size:clamp(32px, 4.6vw, 48px); line-height:1.05}
#ueber-uns .sh__chip{width:52px; height:52px}
#ueber-uns .sh svg{width:26px; height:26px}
.story__copy{gap:var(--space-5)}
.story__copy p{font-size:20px; line-height:1.6; color:var(--ink-700); max-width:44ch}
.story__img{
/* height:auto ist noetig: die width/height-Attribute im HTML (gegen Layout-Shift)
machen beide Achsen definit, dann ignoriert der Browser aspect-ratio. */
@@ -420,7 +428,13 @@ a:hover{color:var(--sky-600)}
border-radius:var(--radius-xl); border:6px solid var(--surface-card);
box-shadow:var(--shadow-band); transform:rotate(1.5deg);
}
.portrait__name{font:var(--t-h2); color:var(--accent-text); letter-spacing:var(--ls-display)} /* 4.43 auf sun-200 */
/* Wie die Hero-Headline: Display-Größe, helles Markenblau mit dunkler Kontur (die Kontur
trägt den Kontrast), leicht gekippt wie jede Headline-Zeile. */
.portrait__name{
font:var(--t-display); font-size:clamp(40px, 6vw, 60px); letter-spacing:var(--ls-display);
color:var(--sky-500); -webkit-text-stroke:.1em var(--ink-700); paint-order:stroke fill;
transform:rotate(-2deg);
}
/* Audio */
.song{
@@ -625,7 +639,6 @@ a:hover{color:var(--sky-600)}
.hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 7.4))}
/* "zusammenhalten!" ist breiter: ≈ 8.0 × Schriftgröße inkl. Kontur. */
.hero--verein .hl{font-size:min(48px, calc((100vw - 2 * var(--page-pad-x)) / 8.1))}
.hero .hl span{-webkit-text-stroke-width:.075em}
.section{padding-block:var(--space-10)}
.section--tight{padding-block:var(--space-8)}
@@ -633,6 +646,8 @@ a:hover{color:var(--sky-600)}
.sh{margin-bottom:var(--space-4)}
.story{gap:var(--space-5)}
.story__img{aspect-ratio:3/2}
.story__copy p{font-size:18px}
.hero .hl span, .portrait__name{-webkit-text-stroke-width:.075em}
.portrait{max-width:260px; gap:var(--space-3)}
.tiles{gap:var(--space-3)}
.tile{padding:var(--space-5)}
datenschutz.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" />
</head>
<body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
hilfe-verein.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" />
</head>
<body class="page-verein">
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
impressum.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" />
</head>
<body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
index.html
+1 -1
View File
@@ -10,7 +10,7 @@
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" />
</head>
<body class="page-shop">
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
shop.html
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
<link rel="stylesheet" href="assets/site.css?v=b9a3adde" />
<link rel="stylesheet" href="assets/site.css?v=9e53ff22" />
</head>
<body class="page-shop parked">
<a class="skip" href="#inhalt">Zum Inhalt springen</a>