]> juplo.de Git - website/commitdiff
projects / website / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d2f84fb)
Layout-Weiche einbauen: Classic, Resurrection, None
authorKai Moritz <kai.milan.moritz@googlemail.com>
Thu, 4 Jun 2026 23:03:14 +0000 (23:03 +0000)
committerKai Moritz <kai.milan.moritz@googlemail.com>
Thu, 4 Jun 2026 23:03:14 +0000 (23:03 +0000)
Infrastruktur für die Auswahl zwischen drei Layouts:

- Anti-FOUC-Script als erstes Element in <head>: liest localStorage und
  setzt data-layout auf <html>, bevor der Browser CSS auswertet
- <html data-layout="classic"> 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 <noreply@anthropic.com>
assets/js/main.js [new file with mode: 0644] patch | blob
assets/scss/base/footer.scss patch | blob | history
assets/scss/resurrection.scss [new file with mode: 0644] patch | blob
assets/scss/resurrection/_components.scss [new file with mode: 0644] patch | blob
assets/scss/resurrection/_layout.scss [new file with mode: 0644] patch | blob
assets/scss/resurrection/_reset.scss [new file with mode: 0644] patch | blob
assets/scss/resurrection/_tokens.scss [new file with mode: 0644] patch | blob
assets/scss/resurrection/_typography.scss [new file with mode: 0644] patch | blob
assets/scss/screen.scss patch | blob | history
layouts/_partials/head.html patch | blob | history
layouts/baseof.html patch | blob | history

diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644 (file)
index 0000000..1049626
--- /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 3a6d7c792a1abbd95fa66ab8f397f299f2e69e73..185aaff46567a5be03ef671a21c32e4ed2345f0f 100644 (file)
--- 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 (file)
index 0000000..cd99689
--- /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 (file)
index 0000000..e2c17e2
--- /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 (file)
index 0000000..77d11fc
--- /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 (file)
index 0000000..7f04cc8
--- /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 (file)
index 0000000..598896a
--- /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 (file)
index 0000000..6998273
--- /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 ecde1f72de20321b4e9d2fcf3ed4ff05d550025c..148b77c2c284d6d015f2ae92f56aa62ca59c0f8d 100644 (file)
--- 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 0f46da667d30918cc63ceee31849e3de24fe66b1..1451eeffbe53c30e981e1ccdb53a739d19521457 100644 (file)
--- a/layouts/_partials/head.html
+++ b/layouts/_partials/head.html
@@ -1,9 +1,12 @@
 <meta charset="utf-8">
+<script>try{document.documentElement.dataset.layout=localStorage.getItem('layout')||'classic'}catch(e){}</script>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title>
 <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 }}
+<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 }}">
 <link rel="canonical" href="{{ .Permalink }}">
diff --git a/layouts/baseof.html b/layouts/baseof.html
index 5a8a2349ceb5552f82c4ecd4aeea684105901643..a60a4df49741358995f803206fdc781190c69522 100644 (file)
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}">
+<html lang="{{ site.Language.LanguageCode }}" dir="{{ or site.Language.LanguageDirection `ltr` }}" data-layout="classic">
 <head>
   {{ partial "head.html" . }}
 </head>
@@ -24,6 +24,11 @@
         </div>
     </main>
     <footer id="footer">
+      <nav id="layout-switcher">
+        <a href="#" data-layout="resurrection">Resurrection</a>
+        <a href="#" data-layout="classic">Classic</a>
+        <a href="#" data-layout="none">None</a>
+      </nav>
       <hr class="f" />
       <ul id="footerlinks">
         <li class="f" id="copyright">© <strong>{{ site.Params.copyrightShort | default site.Copyright }}</strong> {{ now.Year }}</li>
Unnamed repository; edit this file 'description' to name the repository.