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

5 Säulen: eine Fläche mit sanftem Grün-Verlauf pro Zeile

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed 2026-10-01 23:53:48 +02:00
1 parent b76b7d1730
commit 0ca675320d
4 files changed
+64 -54
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/site.css
+33 -12
View File
@@ -279,6 +279,7 @@ svg { flex: none; }
.tone-3 { --tone: #234f4a; } /* Tiefes Teal */
.tone-4 { --tone: #2f5a45; } /* Moos */
.tone-5 { --tone: #3f6a4c; } /* Waldgrün */
.tone-6 { --tone: #4a7553; } /* Blattgrün */
.tone-7 { --tone: #bcd69a; } /* Lindgrün */
.tone-8 { --tone: #d0e6a5; } /* Salbei */
.tone-9 { --tone: #e5efd1; } /* Helles Salbei */
@@ -367,20 +368,39 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
}
.statement-by { display: block; text-align: center; margin-top: 28px; font-size: 1.15rem; opacity: .7; }
/* 5 Säulen als große Wörter */
.words { list-style: none; padding: 0; margin: 10px 0 0; }
.words li {
display: flex; align-items: baseline; gap: clamp(16px, 2vw, 32px);
padding: clamp(10px, 1.4vw, 18px) 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
font-size: clamp(2.4rem, 6vw, 6rem);
/* 5 Säulen: eine Fläche, jede Zeile in leicht anderem Grünton */
.pillars {
list-style: none; padding: 0; margin: 0;
border-radius: var(--radius);
overflow: hidden;
}
.pillar {
display: flex; align-items: center; gap: clamp(18px, 3vw, 48px);
background: var(--tone);
color: var(--bg);
padding: clamp(22px, 2.6vw, 36px) clamp(26px, 4.2vw, 72px);
transition: padding .5s var(--ease);
}
.pillar--head { display: block; padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px); }
.pillar--head .kicker { color: var(--sage); opacity: 1; }
.pillar small { flex: none; width: 2.4em; font-size: 1rem; letter-spacing: .1em; opacity: .7; }
.pillar strong {
font-weight: 400;
font-size: clamp(2.4rem, 5.6vw, 5.6rem);
line-height: 1;
letter-spacing: -.03em;
transition: color .3s var(--ease), padding .4s var(--ease);
}
.words li:hover { color: var(--sage); padding-left: 12px; }
.words small { font-size: 1rem; letter-spacing: .1em; color: var(--sage); width: 2.2em; flex: none; }
.words span { font-size: clamp(1.05rem, 1.4vw, 1.3rem); letter-spacing: 0; color: color-mix(in srgb, var(--bg) 70%, transparent); margin-left: auto; text-align: right; max-width: 26ch; line-height: 1.35; }
.pillar span:not(.kicker) {
margin-left: auto;
max-width: 30ch;
text-align: right;
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.35;
opacity: .82;
}
@media (hover: hover) {
.pillar:not(.pillar--head):hover { padding-left: clamp(40px, 5.5vw, 96px); }
}
/* Schritte */
.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
@@ -487,7 +507,8 @@ a.panel:hover .panel-arrow svg { transform: rotate(-45deg); }
.panel--photo { min-height: 64svh; }
.panel--photo.tall { min-height: 80svh; }
.plate-panel { min-height: 0; padding-block: 56px; }
.words span { display: none; }
.pillar { flex-wrap: wrap; row-gap: 8px; }
.pillar span:not(.kicker) { margin-left: 0; text-align: left; width: 100%; }
}
@media (max-width: 767px) {
body { font-size: 18px; }