Resurrection-SCSS: CSS Custom Properties durch SCSS-Variablen ersetzen

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 <noreply@anthropic.com>

diff --git a/assets/scss/base/footer.scss b/assets/scss/base/footer.scss
index 185aaff46567a5be03ef671a21c32e4ed2345f0f..7d2ad90b3009dc17931d84b5dbaf31689bb52880 100644 (file)
--- 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 598896a4df04782515062cceea6ddf15f1d841f8..035f77f6c52e1b2e1f12eac7a7682f44835d0f12 100644 (file)
--- 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 6998273e055fe51cc4ee5fe0732b7e7c272f62ff..b74b6d46058eb764db29056e937768383809857a 100644 (file)
--- 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 a60a4df49741358995f803206fdc781190c69522..5c88d3a9457fbffda2b8f9509eb0ba3f12c322c1 100644 (file)
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -24,14 +24,17 @@
         </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>
+        <li id="layout-switcher">
+          <span class="layout-label">Layout: </span>
+          <a href="#" data-layout="resurrection">Resurrection</a>
+          |
+          <a href="#" data-layout="classic">Classic</a>
+          |
+          <a href="#" data-layout="none">None</a>
+        </li>
         {{- with .Store.Get "footerlinks" }}
         {{ . }}
         {{- else }}