diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss index d78a823..036d366 100644 --- a/assets/scss/colors.scss +++ b/assets/scss/colors.scss @@ -28,11 +28,11 @@ body { a { &.light { - background-color: $light-ln; - color: $light-bg; + background-color: transparent; + color: $light-ln; } - background-color: $dark-ln; - color: $dark-bg; + background-color: transparent; + color: $dark-ln; transition: $transition-time; } @@ -129,12 +129,17 @@ article.light h3 { color: $light-bg; transition: $transition-time; } + +article h5, +article h6, article h4 { background-color: $dark-accent3; color: $dark-bg; transition: $transition-time; } +article.light h5, +article.light h6, article.light h4 { background-color: $light-accent3; color: $light-bg; @@ -147,16 +152,7 @@ article.light h2 { transition: $transition-time; } -article h5, -article h6, -article a { - background-color: $dark-ln; - color: $dark-bg; - transition: $transition-time; -} -article.light h5, -article.light h6, article.light a { background-color: $light-ln; color: $light-bg; @@ -165,11 +161,11 @@ article.light a { a:hover { &.light { - color: $light-ln; - background-color: transparent; + color: $light-bg; + background-color: $light-ln; } - color: $dark-ln; - background-color: transparent; + color: $dark-bg; + background-color: $dark-ln; } article.light a:hover { diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index 9702aaf..ae68cd6 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -30,6 +30,11 @@ footer { margin-left: 24%; } +#content ol ol, +#content ul ul{ + margin-left: 0.12em; +} + #footer-left { margin-top: auto; margin-bottom: auto; diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 0903d39..37d4b5e 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -6,12 +6,13 @@ $toggle-height: 24pt; border-width: 2pt; } + input[type="checkbox"]{ cursor: pointer; } .toggleinput{ - opacity: 0; - max-height: 0; + opacity: 10; + max-height: 10; overflow: hidden; } diff --git a/static/js/darkmode.js b/static/js/darkmode.js index 89d8e86..2c1d53f 100644 --- a/static/js/darkmode.js +++ b/static/js/darkmode.js @@ -1,23 +1,6 @@ const checkbox = document.getElementById("darkmode-toggle"); const colorswitchers = document.getElementsByClassName("colorswitch"); -if (localStorage.getItem("light")) { - switchToLight(); -} else { - switchToDark(); -} -checkbox.checked = localStorage.getItem("dark"); - -checkbox.addEventListener("change", function () { - localStorage.setItem("light", this.checked); - if (this.checked) { - switchToLight(); - } else { - localStorage.removeItem("light"); - switchToDark(); - } -}); - function switchToLight() { for (let item of colorswitchers) { item.classList.add("light"); @@ -30,3 +13,24 @@ function switchToDark() { item.classList.remove("light"); } } + +document.addEventListener("DOMContentLoaded", () => { + if (localStorage.getItem("light")) { + switchToLight(); + } else { + switchToDark(); + } + checkbox.checked = localStorage.getItem("dark"); + checkbox.addEventListener("change", function () { + localStorage.setItem("light", this.checked); + if (this.checked) { + switchToLight(); + } else { + localStorage.removeItem("light"); + switchToDark(); + } + }); + if (localStorage.getItem("light")) { + checkbox.checked = true; + } +});