progress

2 files changed, 99 insertions, 0 deletions

diff --git a/js/minimal-theme-switcher-picocss.js b/js/minimal-theme-switcher-picocss.js
new file mode 100644
index 0000000..526a1b4
--- /dev/null
+++ b/js/minimal-theme-switcher-picocss.js
@@ -0,0 +1,79 @@
+/*!
+ * Minimal theme switcher
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2024 - Licensed under MIT
+ */
+
+const themeSwitcher = {
+  // Config
+  _scheme: "auto",
+  menuTarget: "details.dropdown",
+  buttonsTarget: "a[data-theme-switcher]",
+  buttonAttribute: "data-theme-switcher",
+  rootAttribute: "data-theme",
+  localStorageKey: "picoPreferredColorScheme",
+
+  // Init
+  init() {
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach((button) => {
+      button.addEventListener(
+        "click",
+        (event) => {
+          event.preventDefault();
+          // Set scheme
+          this.scheme = button.getAttribute(this.buttonAttribute);
+          // Close dropdown
+          document.querySelector(this.menuTarget)?.removeAttribute("open");
+        },
+        false
+      );
+    });
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == "auto") {
+      this._scheme = this.preferredColorScheme;
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    window.localStorage?.setItem(this.localStorageKey, this.scheme);
+  },
+};
+
+// Init
+themeSwitcher.init();
\ No newline at end of file
diff --git a/js/parallax-header.js b/js/parallax-header.js
new file mode 100644
index 0000000..c4ce1fc
--- /dev/null
+++ b/js/parallax-header.js
@@ -0,0 +1,20 @@
+const targetMin = -10;
+const targetMax = 25;
+let currentPercent = targetMin;
+let targetPercent = targetMin;
+const tweenSpeed = 0.040;
+
+document.addEventListener("scroll", () => {
+  const scrollTop = window.scrollY;
+  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+  let scrollFraction = scrollTop / docHeight;
+  targetPercent = targetMin + (targetMax - targetMin) * scrollFraction;
+});
+
+function animate() {
+  currentPercent += (targetPercent - currentPercent) * tweenSpeed;
+  document.documentElement.style.setProperty('--scroll-percent', currentPercent + '%');
+  requestAnimationFrame(animate);
+}
+
+animate();