From: Kai Moritz Date: Thu, 4 Jun 2026 23:36:44 +0000 (+0000) Subject: Resurrection-Layout: SCSS durch natives CSS ersetzen X-Git-Url: https://juplo.de/gitweb/?a=commitdiff_plain;h=79d216f98ccd0b39cf49e90f7f04e85ca631f9dc;p=website Resurrection-Layout: SCSS durch natives CSS ersetzen Die SCSS-Platzhalter (resurrection.scss + resurrection/_*.scss) werden durch eine einzige native CSS-Datei (assets/css/resurrection.css) ersetzt. Vorteile: - CSS Custom Properties funktionieren ohne Dart Sass direkt - @layer für explizite Cascade-Kontrolle statt Spezifitäts-Reihenfolge - CSS Nesting (nativ, alle modernen Browser seit 2023) - Kein Build-Step, kein Preprocessor für das neue Layout nötig Struktur der Datei: - Tokens: Custom Properties auf :root[data-layout="resurrection"], bewusst außerhalb der @layer um volle Priorität zu behalten - @layer resurrection.{reset,base,layout,components} als Grundgerüst - base: Überschriften in --color-accent (#2a7a2a) als Platzhalter Dart Sass bleibt vorerst unnötig: Classic-SCSS verwendet keine Custom Properties und funktioniert weiterhin mit LibSass. Co-Authored-By: Claude Sonnet 4.6 --- diff --git a/CLAUDE.md b/CLAUDE.md index 9aa418eb..0e3e8655 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -39,23 +39,68 @@ hugo-juplo/ │ ├── categories/ ← Kategorie-Templates │ ├── tags/ ← Tag-Templates │ └── ... ← Weitere Layouts (section, page, article, taxonomy, term) -├── assets/scss/ ← SCSS-Quellen -│ ├── base.scss ← Basis-Styles (immer geladen) -│ ├── screen.scss ← Desktop-Styles -│ ├── tablet.scss ← Tablet-Breakpoint -│ ├── phone.scss ← Mobil-Breakpoint -│ ├── tiny.scss ← Kleinstgeräte -│ └── print.scss ← Druck-Styles +├── assets/ +│ ├── scss/ ← SCSS-Quellen (Classic-Layout, via LibSass/Dart Sass) +│ │ ├── screen.scss ← Classic-Layout-Entry-Point (alle Styles unter :root[data-layout="classic"]) +│ │ ├── print.scss ← Druck-Styles +│ │ ├── variables.scss ← SCSS-Variablen (Farben, Breakpoints, Mixins) +│ │ ├── base/ ← Basis-Styles (Reset, Typo, Navigation, Footer, …) +│ │ ├── screen/ ← Desktop-spezifische Styles +│ │ ├── tablet/ ← Tablet-Breakpoint-Overrides +│ │ ├── phone/ ← Mobil-Breakpoint-Overrides +│ │ └── tiny/ ← Kleinstgeräte-Overrides +│ ├── css/ ← Natives CSS (kein Preprocessor) +│ │ └── resurrection.css ← Resurrection-Layout (natives CSS, @layer, Custom Properties) +│ └── js/ +│ └── main.js ← Layout-Switcher (setzt data-layout, speichert in localStorage) ├── content/ ← Struktureller Theme-Content │ ├── about/ ← About-Sektion mit Unterseiten │ ├── blog/archive/ ← Blog-Archiv-Index │ ├── categories/ ← Kategorie-Taxonomy-Index │ └── tags/ ← Tag-Taxonomy-Index -├── static/ ← Statische Assets (JS, vorcompiliertes CSS) -│ └── js/prettify.js ← Syntax-Highlighting (Google Code Prettify) +├── static/ +│ └── js/ ← Legacy-JS (für Maven-generierte Projektseiten) └── exampleSite/ ← Standalone-Testsite für Theme-Entwicklung ``` +## CSS-Architektur und Layout-System + +### Layout-Weiche + +Die Seite unterstützt drei Layouts, die per `data-layout`-Attribut auf `` gesteuert werden: + +| Wert | Beschreibung | +|---|---| +| `classic` | Bestehendes Layout (SCSS, LibSass) — Standard/Fallback | +| `resurrection` | Neues Layout in Entwicklung (natives CSS) | +| `none` | Keine Styles — Browser-Defaults | + +Das Attribut wird als HTML-Fallback auf `` gesetzt. Ein Inline-Script in `` (vor den CSS-Links, kein FOUC) liest `localStorage` und überschreibt den Wert ggf. `main.js` steuert die Umschaltung per Footer-Links. + +### Classic-Layout (`assets/scss/screen.scss`) + +- Kompiliert via LibSass (Hugo built-in); Dart Sass funktioniert ebenfalls +- Alle Styles unter `:root[data-layout="classic"] { … }` gescoped +- `variables.scss` und `base/fonts.scss` stehen außerhalb des Scopes (global) +- Responsive via Media Queries in `screen.scss` (Breakpoints in `variables.scss`) +- Verwendet SCSS `@import` (Legacy-Syntax; Migration auf `@use`/`@forward` offen) + +### Resurrection-Layout (`assets/css/resurrection.css`) + +- **Natives CSS** — kein Preprocessor, kein Build-Step +- Alle Styles unter `:root[data-layout="resurrection"] { … }` gescoped +- CSS Custom Properties als Design-Tokens (auf `:root[data-layout="resurrection"]`) +- `@layer resurrection.{reset,base,layout,components}` für explizite Cascade-Kontrolle +- CSS Nesting (nativ, alle modernen Browser seit 2023) +- Dart Sass wird für dieses Layout **nicht** benötigt + +### Dart Sass + +Dart Sass ist derzeit nicht erforderlich (Classic nutzt keine Custom Properties, +Resurrection ist natives CSS). Wird relevant, wenn Classic auf Custom Properties +umgestellt wird. Installation: `npm install --save-dev sass` oder standalone +Binary von sass-lang.com. Hugo erkennt Dart Sass automatisch, wenn im PATH. + ## Menü-System Das Menü (`nav#nav`) ist bewusst am HTML-Ende platziert und funktioniert gleichzeitig als SEO-Sitemap. Details zum Konzept: siehe CLAUDE.md im Content-Repo. diff --git a/assets/css/resurrection.css b/assets/css/resurrection.css new file mode 100644 index 00000000..675bf5c5 --- /dev/null +++ b/assets/css/resurrection.css @@ -0,0 +1,83 @@ +/* + * Resurrection Layout + * ------------------- + * Alle Styles unter :root[data-layout="resurrection"] gescoped. + * + * Struktur via @layer: + * resurrection.reset → Moderner Browser-Reset + * resurrection.base → Tokens, Typografie, Basis-Styles + * resurrection.layout → Seitenstruktur (Flexbox/Grid) + * resurrection.components → Header, Nav, Footer, Marginal, … + */ + +@layer resurrection.reset, + resurrection.base, + resurrection.layout, + resurrection.components; + + +/* ── Tokens ──────────────────────────────────────────────────────────────── */ +/* + * Außerhalb der @layer-Struktur, damit die Custom Properties immer gelten + * und nicht durch Layer-Priorisierung überschrieben werden können. + */ + +:root[data-layout="resurrection"] { + --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; +} + + +/* ── Reset ───────────────────────────────────────────────────────────────── */ + +@layer resurrection.reset { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Base ────────────────────────────────────────────────────────────────── */ + +@layer resurrection.base { + + :root[data-layout="resurrection"] { + h1, h2, h3, h4, h5, h6 { + color: var(--color-accent); + } + } + +} + + +/* ── Layout ──────────────────────────────────────────────────────────────── */ + +@layer resurrection.layout { + /* Wird beim Layout-Ausbau implementiert */ +} + + +/* ── Components ──────────────────────────────────────────────────────────── */ + +@layer resurrection.components { + /* Wird beim Layout-Ausbau implementiert */ +} diff --git a/assets/scss/resurrection.scss b/assets/scss/resurrection.scss deleted file mode 100644 index cd996898..00000000 --- a/assets/scss/resurrection.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import 'variables.scss'; -@import 'base/fonts.scss'; - -:root[data-layout="resurrection"] -{ - @import 'resurrection/tokens'; - @import 'resurrection/reset'; - @import 'resurrection/typography'; - @import 'resurrection/layout'; - @import 'resurrection/components'; -} diff --git a/assets/scss/resurrection/_components.scss b/assets/scss/resurrection/_components.scss deleted file mode 100644 index e2c17e23..00000000 --- a/assets/scss/resurrection/_components.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Komponenten für das Resurrection-Layout (Header, Nav, Footer, …) */ -/* Wird hier implementiert, wenn das Layout ausgebaut wird */ diff --git a/assets/scss/resurrection/_layout.scss b/assets/scss/resurrection/_layout.scss deleted file mode 100644 index 77d11fc0..00000000 --- a/assets/scss/resurrection/_layout.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Seitenstruktur für das Resurrection-Layout */ -/* Wird hier implementiert, wenn das Layout ausgebaut wird */ diff --git a/assets/scss/resurrection/_reset.scss b/assets/scss/resurrection/_reset.scss deleted file mode 100644 index 7f04cc86..00000000 --- a/assets/scss/resurrection/_reset.scss +++ /dev/null @@ -1,2 +0,0 @@ -/* Moderner CSS-Reset für das Resurrection-Layout */ -/* Wird hier implementiert, wenn das Layout ausgebaut wird */ diff --git a/assets/scss/resurrection/_tokens.scss b/assets/scss/resurrection/_tokens.scss deleted file mode 100644 index 035f77f6..00000000 --- a/assets/scss/resurrection/_tokens.scss +++ /dev/null @@ -1,12 +0,0 @@ -/* Design Tokens für das Resurrection-Layout */ -/* - * 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 deleted file mode 100644 index b74b6d46..00000000 --- a/assets/scss/resurrection/_typography.scss +++ /dev/null @@ -1,8 +0,0 @@ -/* Typografie für das Resurrection-Layout */ - -$resurrection-accent: #2a7a2a; - -h1, h2, h3, h4, h5, h6 -{ - color: $resurrection-accent; -} diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 1451eeff..0061c725 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -5,7 +5,7 @@ {{- $screen := resources.Get "scss/screen.scss" | toCSS | minify | fingerprint }} -{{- $resurrection := resources.Get "scss/resurrection.scss" | toCSS | minify | fingerprint }} +{{- $resurrection := resources.Get "css/resurrection.css" | minify | fingerprint }} {{- $print := resources.Get "scss/print.scss" | toCSS | minify | fingerprint }}