From 5613427b7fc50fc1966b394f48013c0678548dae Mon Sep 17 00:00:00 2001 From: Tracker-Friendly Date: Tue, 13 Feb 2024 17:14:45 +0000 Subject: [PATCH] Attempt at dark mode, fix sliding anim --- assets/img/moon.svg | 39 +++++++++++++++++++++++++++++ darkmode.js | 61 +++++++++++++++++++++++++++++++++++++++++++++ hectabitstyles.css | 41 ++++++++++++++++++++---------- index.html | 16 ++++-------- sidebar.js | 8 ++++++ 5 files changed, 141 insertions(+), 24 deletions(-) create mode 100644 assets/img/moon.svg create mode 100644 darkmode.js create mode 100644 sidebar.js diff --git a/assets/img/moon.svg b/assets/img/moon.svg new file mode 100644 index 0000000..7482d5d --- /dev/null +++ b/assets/img/moon.svg @@ -0,0 +1,39 @@ + + + + diff --git a/darkmode.js b/darkmode.js new file mode 100644 index 0000000..4bca1a1 --- /dev/null +++ b/darkmode.js @@ -0,0 +1,61 @@ + // Check if a dark mode cookie exists, and apply dark mode if it does + if (getCookie("darkMode") === "true") { + applyDarkMode(); + } + + // Detect dark mode + function isDarkModeEnabled() { + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + } + + if (isDarkModeEnabled()) { + applyDarkMode(); + } else { + console.log('Dark mode is not enabled.'); + } + + function toggleDarkMode() { + if (getCookie("darkMode") === "true") { + // Disable dark mode + setCookie("darkMode", "false", 365, "Strict"); + applyLightMode(); + } else { + // Enable dark mode + setCookie("darkMode", "true", 365, "Strict"); + applyDarkMode(); + } + } + + function applyDarkMode() { + document.body.classList.add("dark-mode"); + } + + function applyLightMode() { + document.body.classList.remove("dark-mode"); + } + + // Helper functions for handling cookies + function setCookie(name, value, days, sameSite) { + var expires = ""; + var sameSiteAttribute = ""; + if (days) { + var date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toUTCString(); + } + if (sameSite) { + sameSiteAttribute = "; samesite=" + sameSite; + } + document.cookie = name + "=" + (value || "") + expires + "; path=/" + sameSiteAttribute; + } + + function getCookie(name) { + var nameEQ = name + "="; + var ca = document.cookie.split(';'); + for (var i = 0; i < ca.length; i++) { + var c = ca[i]; + while (c.charAt(0) === ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); + } + return null; + } diff --git a/hectabitstyles.css b/hectabitstyles.css index d05bc38..06447e7 100755 --- a/hectabitstyles.css +++ b/hectabitstyles.css @@ -3,6 +3,17 @@ body, h1, p, ul, li, li2, p1 { margin: 0; padding: 0; list-style-type: none; + --button-color: rgb(118, 181, 197); + --sidebar-color: rgb(0, 160, 198); +} + +/* Dark mode stylse */ + +body.dark-mode { + color: #fff; + background-color: rgb(34, 34, 34); + --button-color: rgb(27, 105, 125); + --sidebar-color: rgb(14, 66, 79); } a { @@ -13,7 +24,7 @@ a { .clickbutton { padding: 10px; - background-color: #00a0c6; + background-color: var(--button-color); font-size: 15px; border-radius: 10px; color: white; @@ -33,8 +44,8 @@ body { /* Sidebar styles */ .sidebar { - transition: transform 0.3s ease; - background-color: rgb(0, 160, 198); + transition: all 0.3s ease; + background-color: var(--sidebar-color); color: white; padding: 20px; width: 250px; @@ -52,7 +63,7 @@ body { heigh: 20px; overflow-y: hidden; position: fixed; - transition: transform 0.3s ease 0s; + transition: all 0.3s ease 0s; color: rgb(118, 181, 197); padding: 20px; top: 0px; @@ -98,8 +109,8 @@ p1 { border-radius: 5px; padding: 7px 16px; text-align: center; - background-color: rgb(118, 181, 197); - transition: background-color 0.3s ease 0s; + background-color: var(--button-color); + transition: all 0.3s ease 0s; margin: 2px; } @@ -109,7 +120,9 @@ button { position: fixed; padding: 10px; color: rgb(255, 255, 255); - background: rgb(118, 181, 197); + background: var(--button-color); + min-width: 28px; + transition: all 0.3s ease; } button:hover { @@ -124,7 +137,7 @@ button:hover { .content { padding: 20px; margin-left: 300px; - transition: margin-left 0.3s ease; + transition: all 0.3s ease; text-align: center; } @@ -138,12 +151,8 @@ button:hover { margin-left: -20px; } -.sidebar.display { - display: none; -} - .sidebar.hidden { - transform: translateX(-250px); + transform: translateX(-290px); } .content.expanded + .sidebar.hidden { @@ -154,3 +163,9 @@ img { height: 250px; margin-bottom: 30px; } + +.darkmodeicon { + height: 8px; + margin-bottom: 1px; + scale: 2.7; +} diff --git a/index.html b/index.html index 6f25b44..6ab0a8d 100755 --- a/index.html +++ b/index.html @@ -10,6 +10,8 @@
+
@@ -56,17 +58,9 @@

  • Who are these contributors (so far)?

  • You can find a list of our amazing contributors here!
    • -
    + + + diff --git a/sidebar.js b/sidebar.js new file mode 100644 index 0000000..f253985 --- /dev/null +++ b/sidebar.js @@ -0,0 +1,8 @@ + document.getElementById("sidebutton").addEventListener("click", function() { + var sidebar = document.querySelector(".sidebar"); + var content = document.querySelector(".content"); + var closebar = document.querySelector(".closebar"); + closebar.classList.toggle("expanded"); + sidebar.classList.toggle("hidden"); + content.classList.toggle("expanded"); + });