From 2c10a304864162bc19d97386657fcabdf44cff46 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Thu, 4 Jun 2026 23:03:14 +0000 Subject: [PATCH] Layout-Weiche einbauen: Classic, Resurrection, None MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Infrastruktur für die Auswahl zwischen drei Layouts: - Anti-FOUC-Script als erstes Element in : liest localStorage und setzt data-layout auf , bevor der Browser CSS auswertet - als Fallback für Browser ohne JavaScript - Alle Classic-Styles in screen.scss unter :root[data-layout="classic"] gescoped — "None" zeigt Browser-Defaults, weil keine Regel mehr greift - Neues resurrection.scss mit :root[data-layout="resurrection"]-Scope; enthält Platzhalter-Partials (_tokens, _reset, _typography, _layout, _components) nach moderner Best-Practice-Struktur - _typography.scss setzt Headings auf --color-accent (#2a7a2a) als sichtbaren Unterschied zu "None" - Footer-Nav mit Links "Resurrection | Classic | None" (rechtsbündig, grau, Hover/Aktiv wie andere Footer-Links) - assets/js/main.js: markiert den aktiven Layout-Link und schaltet bei Klick data-layout um; Wahl wird in localStorage gespeichert Co-Authored-By: Claude Sonnet 4.6 --- assets/js/main.js | 21 +++++ assets/scss/base/footer.scss | 24 +++++ assets/scss/resurrection.scss | 11 +++ assets/scss/resurrection/_components.scss | 2 + assets/scss/resurrection/_layout.scss | 2 + assets/scss/resurrection/_reset.scss | 2 + assets/scss/resurrection/_tokens.scss | 26 +++++ assets/scss/resurrection/_typography.scss | 6 ++ assets/scss/screen.scss | 110 +++++++++++----------- layouts/_partials/head.html | 3 + layouts/baseof.html | 7 +- 11 files changed, 160 insertions(+), 54 deletions(-) create mode 100644 assets/js/main.js create mode 100644 assets/scss/resurrection.scss create mode 100644 assets/scss/resurrection/_components.scss create mode 100644 assets/scss/resurrection/_layout.scss create mode 100644 assets/scss/resurrection/_reset.scss create mode 100644 assets/scss/resurrection/_tokens.scss create mode 100644 assets/scss/resurrection/_typography.scss diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..10496262 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,21 @@ +document.addEventListener('DOMContentLoaded', function () { + var switcher = document.getElementById('layout-switcher'); + if (!switcher) return; + + var links = switcher.querySelectorAll('a[data-layout]'); + var current = document.documentElement.dataset.layout || 'classic'; + + links.forEach(function (link) { + if (link.dataset.layout === current) { + link.classList.add('active'); + } + link.addEventListener('click', function (e) { + e.preventDefault(); + var layout = this.dataset.layout; + document.documentElement.dataset.layout = layout; + try { localStorage.setItem('layout', layout); } catch (err) {} + links.forEach(function (l) { l.classList.remove('active'); }); + this.classList.add('active'); + }); + }); +}); diff --git a/assets/scss/base/footer.scss b/assets/scss/base/footer.scss index 3a6d7c79..185aaff4 100644 --- a/assets/scss/base/footer.scss +++ b/assets/scss/base/footer.scss @@ -29,3 +29,27 @@ border-color: $dunkler; border-style: solid; } + +#layout-switcher +{ + @include bpreplay; + font-size: 137.5%; + text-align: right; + margin-top: .5em; +} +#layout-switcher a +{ + color: $schrifthell; + border-bottom: 1px dashed $schrifthell; +} +#layout-switcher a:hover, +#layout-switcher a.active +{ + color: $dunkler; + border-bottom: 1px solid $dunkler; +} +#layout-switcher a + a::before +{ + content: ' | '; + border-bottom: none; +} diff --git a/assets/scss/resurrection.scss b/assets/scss/resurrection.scss new file mode 100644 index 00000000..cd996898 --- /dev/null +++ b/assets/scss/resurrection.scss @@ -0,0 +1,11 @@ +@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 new file mode 100644 index 00000000..e2c17e23 --- /dev/null +++ b/assets/scss/resurrection/_components.scss @@ -0,0 +1,2 @@ +/* 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 new file mode 100644 index 00000000..77d11fc0 --- /dev/null +++ b/assets/scss/resurrection/_layout.scss @@ -0,0 +1,2 @@ +/* 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 new file mode 100644 index 00000000..7f04cc86 --- /dev/null +++ b/assets/scss/resurrection/_reset.scss @@ -0,0 +1,2 @@ +/* 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 new file mode 100644 index 00000000..598896a4 --- /dev/null +++ b/assets/scss/resurrection/_tokens.scss @@ -0,0 +1,26 @@ +/* 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; diff --git a/assets/scss/resurrection/_typography.scss b/assets/scss/resurrection/_typography.scss new file mode 100644 index 00000000..6998273e --- /dev/null +++ b/assets/scss/resurrection/_typography.scss @@ -0,0 +1,6 @@ +/* Typografie für das Resurrection-Layout */ + +h1, h2, h3, h4, h5, h6 +{ + color: var(--color-accent); +} diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss index ecde1f72..148b77c2 100644 --- a/assets/scss/screen.scss +++ b/assets/scss/screen.scss @@ -1,65 +1,69 @@ @import 'variables.scss'; -@import 'base/browserreset.scss'; @import 'base/fonts.scss'; -@import 'base/util.scss'; -@import 'base/typo.scss'; -@import 'base/head.scss'; -@import 'base/navigation.scss'; -@import 'base/content.scss'; -@import 'base/marginal.scss'; -@import 'base/footer.scss'; -@import 'base/formulare.scss'; -@import 'base/taxonomy.scss'; -@import 'base/404.scss'; -@import 'screen/head.scss'; -@import 'screen/menu.scss'; -@import 'screen/footer-sticky.scss'; -@import 'screen/wip.scss'; -@import 'screen/packs.scss'; -@media (min-width: ($minscreen)) +:root[data-layout="classic"] { - @import 'screen/layout.scss'; - @import 'screen/footer.scss'; - @media (max-width: ($maxtablet)) + @import 'base/browserreset.scss'; + @import 'base/util.scss'; + @import 'base/typo.scss'; + @import 'base/head.scss'; + @import 'base/navigation.scss'; + @import 'base/content.scss'; + @import 'base/marginal.scss'; + @import 'base/footer.scss'; + @import 'base/formulare.scss'; + @import 'base/taxonomy.scss'; + @import 'base/404.scss'; + @import 'screen/head.scss'; + @import 'screen/menu.scss'; + @import 'screen/footer-sticky.scss'; + @import 'screen/wip.scss'; + @import 'screen/packs.scss'; + + @media (min-width: ($minscreen)) { - @import 'tablet/typo.scss'; - @import 'tablet/layout.scss'; - @import 'tablet/menu.scss'; - @import 'tablet/marginal.scss'; - @import 'tablet/footer.scss'; + @import 'screen/layout.scss'; + @import 'screen/footer.scss'; + @media (max-width: ($maxtablet)) + { + @import 'tablet/typo.scss'; + @import 'tablet/layout.scss'; + @import 'tablet/menu.scss'; + @import 'tablet/marginal.scss'; + @import 'tablet/footer.scss'; + } } -} -@media (min-width: ($mindesktop)) -{ - @import 'screen/faux-column.scss'; - @import 'screen/marginal.scss'; - @import 'screen/content.scss'; - @media (max-width: 1079px) + @media (min-width: ($mindesktop)) { - @import 'screen/onecolumn.scss'; + @import 'screen/faux-column.scss'; + @import 'screen/marginal.scss'; + @import 'screen/content.scss'; + @media (max-width: 1079px) + { + @import 'screen/onecolumn.scss'; + } } -} -@media (max-width: ($maxtablet)) -{ - @import 'tablet/head.scss'; - @import 'tablet/404.scss'; -} + @media (max-width: ($maxtablet)) + { + @import 'tablet/head.scss'; + @import 'tablet/404.scss'; + } -@media (max-width: ($maxphone)) -{ - @import 'phone/typo.scss'; - @import 'phone/layout.scss'; - @import 'phone/head.scss'; - @import 'phone/menu.scss'; - @import 'phone/footer.scss'; - @import 'phone/packs.scss'; - @import 'phone/404.scss'; -} + @media (max-width: ($maxphone)) + { + @import 'phone/typo.scss'; + @import 'phone/layout.scss'; + @import 'phone/head.scss'; + @import 'phone/menu.scss'; + @import 'phone/footer.scss'; + @import 'phone/packs.scss'; + @import 'phone/404.scss'; + } -@media (max-width: ($maxtiny)) -{ - @import 'tiny/layout.scss'; - @import 'tiny/404.scss'; + @media (max-width: ($maxtiny)) + { + @import 'tiny/layout.scss'; + @import 'tiny/404.scss'; + } } diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 0f46da66..1451eeff 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -1,9 +1,12 @@ + {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} {{- $screen := resources.Get "scss/screen.scss" | toCSS | minify | fingerprint }} +{{- $resurrection := resources.Get "scss/resurrection.scss" | toCSS | minify | fingerprint }} + {{- $print := resources.Get "scss/print.scss" | toCSS | minify | fingerprint }} diff --git a/layouts/baseof.html b/layouts/baseof.html index 5a8a2349..a60a4df4 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -1,5 +1,5 @@ - + {{ partial "head.html" . }} @@ -24,6 +24,11 @@