From 1d4bb32ea7f84948a845bd52d564f38adc340db0 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Thu, 4 Jun 2026 23:07:30 +0000 Subject: [PATCH] Resurrection-SCSS: CSS Custom Properties durch SCSS-Variablen ersetzen MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Die eingesetzte Sass-Version (LibSass) unterstützt keine CSS Custom Properties als Deklarationen in SCSS-Partials. _tokens.scss wird vorerst als Dokumentations-Kommentar geführt; _typography.scss nutzt eine SCSS-Variable ($resurrection-accent) statt var(--color-accent). CSS Custom Properties können eingesetzt werden, sobald Hugo auf Dart Sass umgestellt ist. Co-Authored-By: Claude Sonnet 4.6 --- assets/scss/base/footer.scss | 21 ++++++++----- assets/scss/resurrection/_tokens.scss | 36 +++++++---------------- assets/scss/resurrection/_typography.scss | 4 ++- layouts/baseof.html | 13 ++++---- 4 files changed, 35 insertions(+), 39 deletions(-) diff --git a/assets/scss/base/footer.scss b/assets/scss/base/footer.scss index 185aaff4..7d2ad90b 100644 --- a/assets/scss/base/footer.scss +++ b/assets/scss/base/footer.scss @@ -32,24 +32,29 @@ #layout-switcher { - @include bpreplay; font-size: 137.5%; - text-align: right; + float: right; margin-top: .5em; + color: lighten($schrifthell, 25%); +} +#layout-switcher .layout-label +{ + display: none; } #layout-switcher a { - color: $schrifthell; - border-bottom: 1px dashed $schrifthell; + color: lighten($schrifthell, 25%); + border-bottom: 1px dashed lighten($schrifthell, 25%); } -#layout-switcher a:hover, -#layout-switcher a.active +#layout-switcher a:hover { color: $dunkler; border-bottom: 1px solid $dunkler; } -#layout-switcher a + a::before +#layout-switcher a.active { - content: ' | '; + color: $schrifthell; border-bottom: none; + pointer-events: none; + cursor: default; } diff --git a/assets/scss/resurrection/_tokens.scss b/assets/scss/resurrection/_tokens.scss index 598896a4..035f77f6 100644 --- a/assets/scss/resurrection/_tokens.scss +++ b/assets/scss/resurrection/_tokens.scss @@ -1,26 +1,12 @@ /* Design Tokens für das Resurrection-Layout */ -/* Werden auf :root[data-layout="resurrection"] gesetzt (via resurrection.scss) */ - ---color-accent: #2a7a2a; ---color-accent-dark: #1a521a; ---color-text: #222222; ---color-text-muted: #666666; ---color-bg: #ffffff; ---color-bg-subtle: #f5f5f5; ---color-border: #dddddd; - ---font-heading: system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; ---font-body: Georgia, 'Times New Roman', serif; ---font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace; - ---space-xs: 0.25rem; ---space-sm: 0.5rem; ---space-md: 1rem; ---space-lg: 2rem; ---space-xl: 4rem; - ---line-height-body: 1.6; ---line-height-heading: 1.25; - ---max-width: 60rem; ---sidebar-width: 18rem; +/* + * CSS Custom Properties kommen hier hin, sobald das Layout ausgebaut wird. + * Voraussetzung: Hugo muss mit Dart Sass (nicht LibSass) konfiguriert sein. + * + * Geplante Tokens: + * --color-accent, --color-text, --color-bg, --color-bg-subtle, --color-border + * --font-heading, --font-body, --font-mono + * --space-xs … --space-xl + * --line-height-body, --line-height-heading + * --max-width, --sidebar-width + */ diff --git a/assets/scss/resurrection/_typography.scss b/assets/scss/resurrection/_typography.scss index 6998273e..b74b6d46 100644 --- a/assets/scss/resurrection/_typography.scss +++ b/assets/scss/resurrection/_typography.scss @@ -1,6 +1,8 @@ /* Typografie für das Resurrection-Layout */ +$resurrection-accent: #2a7a2a; + h1, h2, h3, h4, h5, h6 { - color: var(--color-accent); + color: $resurrection-accent; } diff --git a/layouts/baseof.html b/layouts/baseof.html index a60a4df4..5c88d3a9 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -24,14 +24,17 @@