│ ├── 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 `<html>` 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 `<html data-layout="classic">` gesetzt. Ein Inline-Script in `<head>` (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.
--- /dev/null
+/*
+ * 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 */
+}
+++ /dev/null
-@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';
-}
+++ /dev/null
-/* Komponenten für das Resurrection-Layout (Header, Nav, Footer, …) */
-/* Wird hier implementiert, wenn das Layout ausgebaut wird */
+++ /dev/null
-/* Seitenstruktur für das Resurrection-Layout */
-/* Wird hier implementiert, wenn das Layout ausgebaut wird */
+++ /dev/null
-/* Moderner CSS-Reset für das Resurrection-Layout */
-/* Wird hier implementiert, wenn das Layout ausgebaut wird */
+++ /dev/null
-/* 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
- */
+++ /dev/null
-/* Typografie für das Resurrection-Layout */
-
-$resurrection-accent: #2a7a2a;
-
-h1, h2, h3, h4, h5, h6
-{
- color: $resurrection-accent;
-}
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
{{- $screen := resources.Get "scss/screen.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" media="only screen" type="text/css" href="{{ $screen.RelPermalink }}" integrity="{{ $screen.Data.Integrity }}">
-{{- $resurrection := resources.Get "scss/resurrection.scss" | toCSS | minify | fingerprint }}
+{{- $resurrection := resources.Get "css/resurrection.css" | minify | fingerprint }}
<link rel="stylesheet" media="only screen" type="text/css" href="{{ $resurrection.RelPermalink }}" integrity="{{ $resurrection.Data.Integrity }}">
{{- $print := resources.Get "scss/print.scss" | toCSS | minify | fingerprint }}
<link rel="stylesheet" media="print" type="text/css" href="{{ $print.RelPermalink }}" integrity="{{ $print.Data.Integrity }}">
projects / website / commitdiff