More active states

CHANGELOG.md

@@ -11,6 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `external` class to comment timestamp.
 - Add active state to footer's "Powered by" links.
+- Add active state to footnotes' go back button.
+- Add active state to slider thumb.
 - Add hover state to slider thumb.
 - Add loading animation to "Load Comments" button.
 - Add zoom-on-hover to custom comment emojis.

content/demo/index.md

@@ -548,10 +548,24 @@ Blah blah <q>Inline Quote</q> hmm.
 
 <!-- For the demo purposes only -->
 <div id="color-picker-container">
-<label for="color-picker">Primary color:</label>
+  <small>Primary color:</small>
-<input id="color-picker" type="color" />
+  <br />
+  <input id="color-picker-light" type="color" value="#ff7800" />
+  <label for="color-picker-light">&nbsp;Light theme</label>
+  <br />
+  <input id="color-picker-dark" type="color" value="#ffa348" />
+  <label for="color-picker-dark">&nbsp;Dark theme</label>
+  <br />
+  <small>Fix contrast for:</small>
+  <br />
+  <input id="contrast-color-light" type="checkbox" />
+  <label for="contrast-color-light">&nbsp;Light theme</label>
+  <br />
+  <input id="contrast-color-dark" type="checkbox" checked />
+  <label for="contrast-color-dark">&nbsp;Dark theme</label>
 </div>
 
+
 <style>
   #color-picker-container {
     -webkit-backdrop-filter: var(--blur);
@@ -564,7 +578,6 @@ Blah blah <q>Inline Quote</q> hmm.
     transition: var(--transition);
     box-shadow: var(--edge-highlight);
     border-start-end-radius: var(--rounded-corner);
-    border-end-end-radius: var(--rounded-corner);
     background-color: var(--nav-bg);
     padding: 0.5rem;
   }
@@ -591,36 +604,113 @@ Blah blah <q>Inline Quote</q> hmm.
 </style>
 
 <script type="text/javascript">
-  let colorPicker;
+  const colorPickerLight = document.querySelector("#color-picker-light");
-  const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
+  const colorPickerDark = document.querySelector("#color-picker-dark");
-  console.log("Default Color: " + defaultColor);
+  const contrastCheckboxLight = document.querySelector("#contrast-color-light");
+  const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
 
-  window.addEventListener("load", startup, false);
+  colorPickerLight.value = "#ff7800";
+  colorPickerDark.value = "#ffa348";
 
-  function hexToRGB(hex, alpha) {
+  colorPickerLight.addEventListener("input", function () {
-    var r = parseInt(hex.slice(1, 3), 16),
+    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
-      g = parseInt(hex.slice(3, 5), 16),
+  });
-      b = parseInt(hex.slice(5, 7), 16);
 
-    if (alpha) {
+  colorPickerDark.addEventListener("input", function () {
-      return "rgb(" + r + " " + g + " " + b + " / " + alpha + ")";
+    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
-    } else {
+  });
-      return "rgb(" + r + " " + g + " " + b + ")";
+
+  contrastCheckboxLight.addEventListener("change", function () {
+    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
+  });
+
+  contrastCheckboxDark.addEventListener("change", function () {
+    updateStyles(colorPickerLight.value, colorPickerDark.value, contrastCheckboxLight.checked, contrastCheckboxDark.checked);
+  });
+
+  function hexToRGBA(hex, alpha) {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  }
+
+  function updateStyles(primaryColorLight, primaryColorDark, contrastColorLight, contrastColorDark) {
+    let styleElement = document.getElementById("dynamic-styles");
+
+    if (!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.id = "dynamic-styles";
+      document.head.appendChild(styleElement);
     }
-  }
 
-  function startup() {
+    const primaryColorLightAlpha = hexToRGBA(primaryColorLight, 0.2);
-    colorPicker = document.querySelector("#color-picker");
+    const primaryColorDarkAlpha = hexToRGBA(primaryColorDark, 0.2);
-    colorPicker.value = defaultColor;
-    colorPicker.addEventListener("input", update, false);
-    colorPicker.select();
-  }
 
-  function update(event) {
+    let styles = "";
-    console.log("Primary Color: " + event.target.value);
+
-    console.log("Primary Color Alpha: " + hexToRGB(event.target.value, 0.2));
+    styles += `
-    document.documentElement.style.setProperty('--primary-color', event.target.value);
+        :root {
-    document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
+          --primary-color: ${primaryColorLight};
+          --primary-color-alpha: ${primaryColorLightAlpha};
+        }
+      `;
+
+    styles += `
+        [data-theme="dark"] {
+          --primary-color: ${primaryColorDark};
+          --primary-color-alpha: ${primaryColorDarkAlpha};
+        }
+    
+        @media (prefers-color-scheme: dark) {
+          :root:not([data-theme="light"]) {
+            --primary-color: ${primaryColorDark};
+            --primary-color-alpha: ${primaryColorDarkAlpha};
+          }
+        }
+      `;
+
+    if (contrastColorLight) {
+      styles += `
+          :root {
+            --contrast-color: rgb(0 0 0 / 0.8);
+          }
+        `;
+    } else {
+      styles += `
+          :root {
+            --contrast-color: #fff;
+          }
+        `;
+    }
+
+    if (contrastColorDark) {
+      styles += `
+          [data-theme="dark"] {
+            --contrast-color: rgb(0 0 0 / 0.8);
+          }
+    
+          @media (prefers-color-scheme: dark) {
+            :root:not([data-theme="light"]) {
+              --contrast-color: rgb(0 0 0 / 0.8);
+            }
+          }
+        `;
+    } else {
+      styles += `
+          [data-theme="dark"] {
+            --contrast-color: #fff;
+          }
+    
+          @media (prefers-color-scheme: dark) {
+            :root:not([data-theme="light"]) {
+              --contrast-color: #fff;
+            }
+          }
+        `;
+    }
+
+    styleElement.textContent = styles;
   }
 </script>
 <!-- End -->

sass/_footnotes-list.scss

@@ -33,6 +33,10 @@
 		&:hover {
 			opacity: 1;
 		}
+
+		&:active {
+			transform: scale(var(--active));
+		}
 	}
 
 	li:target a[href*="#fr-"] {

sass/_input.scss

@@ -130,20 +130,23 @@ input[type="range"] {
 	&::-webkit-slider-thumb {
 		-webkit-appearance: none;
 		appearance: none;
+		filter: brightness(0.9);
 		transition: var(--transition);
 		cursor: grab;
 		box-shadow: var(--shadow);
 		border-radius: 999px;
-		background-color: white;
+		background-color: hsl(0, 0%, 90%);
 		width: 1.5rem;
 		height: 1.5rem;
 
 		&:hover {
 			transform: scale(1.1);
 			box-shadow: var(--shadow-raised);
+			background-color: white;
 		}
 
 		&:active {
+			transform: scale(var(--active));
 			cursor: grabbing;
 		}
 	}
@@ -155,16 +158,18 @@ input[type="range"] {
 		box-shadow: var(--shadow);
 		border: none;
 		border-radius: 999px;
-		background-color: white;
+		background-color: hsl(0, 0%, 90%);
 		width: 1.5rem;
 		height: 1.5rem;
 
 		&:hover {
 			transform: scale(1.1);
 			box-shadow: var(--shadow-raised);
+			background-color: white;
 		}
 
 		&:active {
+			transform: scale(var(--active));
 			cursor: grabbing;
 		}
 	}

sass/_pre-container.scss

@@ -34,7 +34,6 @@
 			background-color: transparent;
 			padding: 0.5rem;
 			line-height: 0;
-			cursor: copy;
 
 			&:hover {
 				box-shadow: var(--edge-highlight);

sass/_zola-anchor.scss

@@ -10,6 +10,7 @@ h6 {
 }
 
 .zola-anchor {
+	display: inline-block;
 	opacity: 0;
 	transition: var(--transition);
 	margin: 0 0.25em;
@@ -18,6 +19,10 @@ h6 {
 		background-color: var(--primary-color);
 	}
 
+	&:active {
+		transform: scale(var(--active));
+	}
+
 	&:focus-visible {
 		opacity: 1;
 	}