From e7aa38bc6cb8440e155fb82d1d59559f470228b8 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 7 Aug 2024 05:14:28 +0300
Subject: [PATCH] Move color-picker code to the end of a document

---
 content/demo/index.md | 152 +++++++++++++++++++++---------------------
 1 file changed, 76 insertions(+), 76 deletions(-)

diff --git a/content/demo/index.md b/content/demo/index.md
index 02363e1..977b3fd 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -11,82 +11,6 @@ This is a demo of most of the components, but some of them are only accessible o
 - [Post Demo](@/blog/the-quill-of-duck/index.md)
 {% end %}
 
-<!-- For the demo purposes only -->
-<div id="color-picker-container">
-<label for="color-picker">Primary color:</label>
-<input id="color-picker" type="color" />
-</div>
-
-<style>
-  #color-picker-container {
-      -webkit-backdrop-filter: var(--blur);
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      transform: translateX(calc(-100% + 1rem));
-      z-index: 1;
-      backdrop-filter: var(--blur);
-      transition: var(--transition);
-      box-shadow: var(--edge-highlight);
-      border-start-end-radius: var(--rounded-corner);
-      background-color: var(--nav-bg);
-      padding: 0.5rem;
-  }
-
-  #color-picker-container:hover {
-      transform: none;
-  }
-
-  #color-picker-container label {
-      margin-inline-end: 0.25rem;
-      color: var(--fg-muted-4);
-      font-weight: bold;
-  }
-
-  :root[dir*="rtl"] #color-picker-container {
-      right: 0;
-      left: unset;
-      transform: translateX(calc(100% - 1rem));
-  }
-
-  :root[dir*="rtl"] #color-picker-container:hover {
-      transform: none;
-  }
-</style>
-
-<script>
-  let colorPicker;
-  const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
-  console.log(defaultColor);
-
-  window.addEventListener("load", startup, false);
-
-  function hexToRGB(hex, alpha) {
-    var r = parseInt(hex.slice(1, 3), 16),
-      g = parseInt(hex.slice(3, 5), 16),
-      b = parseInt(hex.slice(5, 7), 16);
-
-    if (alpha) {
-      return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
-    } else {
-      return "rgb(" + r + ", " + g + ", " + b + ")";
-    }
-  }
-
-  function startup() {
-    colorPicker = document.querySelector("#color-picker");
-    colorPicker.value = defaultColor;
-    colorPicker.addEventListener("input", update, false);
-    colorPicker.select();
-  }
-
-  function update(event) {
-    document.documentElement.style.setProperty('--primary-color', event.target.value);
-    document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
-  }
-</script>
-<!-- End -->
-
 ## Markdown
 
 Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***.
@@ -548,3 +472,79 @@ Blah blah <q>Inline Quote</q> hmm.
 
 [^1]: Footnote
 [^2]: [Footnote (link)](https://example.org)
+
+<!-- For the demo purposes only -->
+<div id="color-picker-container">
+<label for="color-picker">Primary color:</label>
+<input id="color-picker" type="color" />
+</div>
+
+<style>
+  #color-picker-container {
+    -webkit-backdrop-filter: var(--blur);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    transform: translateX(calc(-100% + 1rem));
+    z-index: 1;
+    backdrop-filter: var(--blur);
+    transition: var(--transition);
+    box-shadow: var(--edge-highlight);
+    border-start-end-radius: var(--rounded-corner);
+    background-color: var(--nav-bg);
+    padding: 0.5rem;
+  }
+
+  #color-picker-container:hover {
+    transform: none;
+  }
+
+  #color-picker-container label {
+    margin-inline-end: 0.25rem;
+    color: var(--fg-muted-4);
+    font-weight: bold;
+  }
+
+  :root[dir*="rtl"] #color-picker-container {
+    right: 0;
+    left: unset;
+    transform: translateX(calc(100% - 1rem));
+  }
+
+  :root[dir*="rtl"] #color-picker-container:hover {
+    transform: none;
+  }
+</style>
+
+<script>
+  let colorPicker;
+  const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
+  console.log(defaultColor);
+
+  window.addEventListener("load", startup, false);
+
+  function hexToRGB(hex, alpha) {
+    var r = parseInt(hex.slice(1, 3), 16),
+      g = parseInt(hex.slice(3, 5), 16),
+      b = parseInt(hex.slice(5, 7), 16);
+
+    if (alpha) {
+      return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+    } else {
+      return "rgb(" + r + ", " + g + ", " + b + ")";
+    }
+  }
+
+  function startup() {
+    colorPicker = document.querySelector("#color-picker");
+    colorPicker.value = defaultColor;
+    colorPicker.addEventListener("input", update, false);
+    colorPicker.select();
+  }
+
+  function update(event) {
+    document.documentElement.style.setProperty('--primary-color', event.target.value);
+    document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
+  }
+</script>
+<!-- End -->