From 740cb2b25669da7a3079fbf526a1d43c9e0928d8 Mon Sep 17 00:00:00 2001
From: Sebastian Zoglowek <55794780+zoglo@users.noreply.github.com>
Date: Wed, 15 May 2024 11:05:06 +0200
Subject: [PATCH] Move theme-toggle styles into external css (#5)

- fixes not allowed `<style>` attribute within body
---
 page/config/_default/config.toml            |   2 +
 page/layouts/partials/dark-mode-toggle.html | 137 -------------------
 page/static/css/theme-toggle.css            | 138 ++++++++++++++++++++
 3 files changed, 140 insertions(+), 137 deletions(-)
 create mode 100644 page/config/_default/config.toml
 create mode 100644 page/static/css/theme-toggle.css

diff --git a/page/config/_default/config.toml b/page/config/_default/config.toml
new file mode 100644
index 0000000..e251dfe
--- /dev/null
+++ b/page/config/_default/config.toml
@@ -0,0 +1,2 @@
+[params]
+  custom_css = ["css/theme-toggle.css"]
diff --git a/page/layouts/partials/dark-mode-toggle.html b/page/layouts/partials/dark-mode-toggle.html
index 76f374d..087ad86 100644
--- a/page/layouts/partials/dark-mode-toggle.html
+++ b/page/layouts/partials/dark-mode-toggle.html
@@ -1,140 +1,3 @@
-<style>
-  .dark-mode__switch {
-    display: flex;
-    position: relative;
-  }
-  .dark-mode__input {
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-  }
-  .dark-mode__label {
-    position: relative;
-    display: inline-block;
-    width: 44px;
-    height: 22px;
-    margin: 16px 0 0;
-    background-color: #2b2b2b;
-    border: 2px solid #5b5b5b;
-    border-radius: 50px;
-    cursor: pointer;
-    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  }
-  .dark-mode__indicator {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) translateX(-72%);
-    display: block;
-    width: 15px;
-    height: 15px;
-    background-color: #7b7b7b;
-    border-radius: 50px;
-    box-shadow: 5px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
-  }
-  .dark-mode__indicator::before, .dark-mode__indicator::after {
-    position: absolute;
-    content: "";
-    display: block;
-    background-color: #fff;
-    border-radius: 9999px;
-  }
-  .dark-mode__indicator::before {
-    top: 3.5px;
-    left: 3.5px;
-    width: 4.5px;
-    height: 4.5px;
-    background-color: #fff;
-    opacity: 0.6;
-  }
-  .dark-mode__indicator::after {
-    bottom: 4px;
-    right: 3px;
-    width: 6px;
-    height: 6px;
-    background-color: #fff;
-    opacity: 0.8;
-  }
-  .dark-mode__indicator, .dark-mode__indicator::before, .dark-mode__indicator::after {
-    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  }
-  .dark-mode__decoration {
-    position: absolute;
-    top: 65%;
-    left: 50%;
-    display: block;
-    width: 2px;
-    height: 2px;
-    background-color: #fff;
-    border-radius: 50px;
-    opacity: .3;
-  }
-  .dark-mode__decoration::before, .dark-mode__decoration::after {
-    position: absolute;
-    display: block;
-    content: '';
-    width: 2px;
-    height: 2px;
-    background-color: #fff;
-    border-radius: 50px;
-  }
-  .dark-mode__decoration::before {
-    top: -8px;
-    left: 7px;
-    opacity: 1;
-  }
-  .dark-mode__decoration::after {
-    top: -3px;
-    left: 15px;
-    opacity: .2;
-  }
-  .dark-mode__input:checked + .dark-mode__label {
-    background-color: #8fb5f5;
-    border-color: #347cf8;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator {
-    background-color: #ecd21f;
-    box-shadow: none;
-    transform: translate(-50%, -50%) translateX(72%);
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::after {
-    display: none;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration {
-    top: 50%;
-    transform: translate(0%, -50%);
-    width: 10px;
-    height: 10px;
-    opacity: 1;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before {
-    width: 5px;
-    height: 5px;
-    top: auto;
-    bottom: 0;
-    left: -4px;
-    opacity: 1;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
-    width: 7px;
-    height: 7px;
-    top: auto;
-    bottom: 0;
-    left: 8px;
-    opacity: 1;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
-    border-radius: 50px 50px 0 0;
-  }
-  .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
-    border-bottom-right-radius: 50px;
-  }
-</style>
 <div class="dark-mode__switch">
   <input id="dark-mode-toggle" class="dark-mode__input" type="checkbox" onchange="setColorMode(this.checked?'light':'dark')" onload="getColorMode()" checked=""/>
   <label class="dark-mode__label" for="dark-mode-toggle">
diff --git a/page/static/css/theme-toggle.css b/page/static/css/theme-toggle.css
new file mode 100644
index 0000000..2c14915
--- /dev/null
+++ b/page/static/css/theme-toggle.css
@@ -0,0 +1,138 @@
+/*
+Theme toggle styles
+*/
+.dark-mode__switch {
+    display: flex;
+    position: relative;
+}
+.dark-mode__input {
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+}
+.dark-mode__label {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 22px;
+    margin: 16px 0 0;
+    background-color: #2b2b2b;
+    border: 2px solid #5b5b5b;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+}
+.dark-mode__indicator {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) translateX(-72%);
+    display: block;
+    width: 15px;
+    height: 15px;
+    background-color: #7b7b7b;
+    border-radius: 50px;
+    box-shadow: 5px 0px 0 0 rgba(0, 0, 0, 0.2) inset;
+}
+.dark-mode__indicator::before, .dark-mode__indicator::after {
+    position: absolute;
+    content: "";
+    display: block;
+    background-color: #fff;
+    border-radius: 9999px;
+}
+.dark-mode__indicator::before {
+    top: 3.5px;
+    left: 3.5px;
+    width: 4.5px;
+    height: 4.5px;
+    background-color: #fff;
+    opacity: 0.6;
+}
+.dark-mode__indicator::after {
+    bottom: 4px;
+    right: 3px;
+    width: 6px;
+    height: 6px;
+    background-color: #fff;
+    opacity: 0.8;
+}
+.dark-mode__indicator, .dark-mode__indicator::before, .dark-mode__indicator::after {
+    transition: all 0.4s cubic-bezier(0.46, 0.03, 0.52, 0.96);
+}
+.dark-mode__decoration {
+    position: absolute;
+    top: 65%;
+    left: 50%;
+    display: block;
+    width: 2px;
+    height: 2px;
+    background-color: #fff;
+    border-radius: 50px;
+    opacity: .3;
+}
+.dark-mode__decoration::before, .dark-mode__decoration::after {
+    position: absolute;
+    display: block;
+    content: '';
+    width: 2px;
+    height: 2px;
+    background-color: #fff;
+    border-radius: 50px;
+}
+.dark-mode__decoration::before {
+    top: -8px;
+    left: 7px;
+    opacity: 1;
+}
+.dark-mode__decoration::after {
+    top: -3px;
+    left: 15px;
+    opacity: .2;
+}
+.dark-mode__input:checked + .dark-mode__label {
+    background-color: #8fb5f5;
+    border-color: #347cf8;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator {
+    background-color: #ecd21f;
+    box-shadow: none;
+    transform: translate(-50%, -50%) translateX(72%);
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__indicator::after {
+    display: none;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration {
+    top: 50%;
+    transform: translate(0%, -50%);
+    width: 10px;
+    height: 10px;
+    opacity: 1;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before {
+    width: 5px;
+    height: 5px;
+    top: auto;
+    bottom: 0;
+    left: -4px;
+    opacity: 1;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
+    width: 7px;
+    height: 7px;
+    top: auto;
+    bottom: 0;
+    left: 8px;
+    opacity: 1;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::before, .dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
+    border-radius: 50px 50px 0 0;
+}
+.dark-mode__input:checked + .dark-mode__label .dark-mode__decoration::after {
+    border-bottom-right-radius: 50px;
+}
\ No newline at end of file