From 137f5a2b05aaad9fab2da9ba0d6abb42dd016110 Mon Sep 17 00:00:00 2001 From: zoe Date: Fri, 15 Apr 2022 23:49:55 +0200 Subject: [PATCH] clean up js, start adding hamburger --- assets/scss/colors.scss | 37 ++++++++++++++++++++++++++++++++---- assets/scss/font.scss | 1 + assets/scss/layout.scss | 12 ++++++++++++ assets/scss/main.scss | 1 + assets/scss/responsive.css | 16 ++++++++++++++++ assets/scss/style.scss | 4 +++- layouts/_default/baseof.html | 2 +- layouts/partials/footer.html | 14 ++++++++++++-- static/js/hamburger.js | 1 + static/js/lightmode.js | 36 +++++++++++++++++++++++++++++++++++ static/js/main.js | 37 ++++-------------------------------- 11 files changed, 120 insertions(+), 41 deletions(-) create mode 100644 assets/scss/responsive.css create mode 100644 static/js/hamburger.js create mode 100644 static/js/lightmode.js diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss index 3f0e3db..1406aaa 100644 --- a/assets/scss/colors.scss +++ b/assets/scss/colors.scss @@ -1,9 +1,9 @@ $light-bg: #ffffff; $light-bg-alt: #413c74; $light-fg: #413c74; -$light-ln: #9b5bb4 ; +$light-ln: #9b5bb4; $light-accent1: #9b5bb4; -$light-accent2: #5183b9 ; +$light-accent2: #5183b9; $light-accent3: #413c74; $dark-bg: #413c74; @@ -50,7 +50,7 @@ a.footer-nav-item:hover { } color: $dark-bg-alt; background-color: $dark-bg; - border-color: $dark-bg; + border-color: $dark-bg; transition: $trans-short; } @@ -131,7 +131,7 @@ h2 { h2 a { color: $dark-bg; - &.light{ + &.light { color: $light-bg; } } @@ -251,3 +251,32 @@ header { background-color: transparent; } } + +button { + color: $dark-bg; + background-color: $dark-bg-alt; + border-color: $dark-bg; + &:hover { + transition: $trans-short; + background-color: $dark-bg; + color: $dark-bg-alt; + } + &.light { + color: $light-bg; + background-color: $light-bg-alt; + border-color: $light-bg; + &:hover { + transition: $trans-short; + background-color: $light-bg; + color: $light-bg-alt; + } + } +} + +#pageindicator { + &.light { + color: $light-bg; + } + &:hover {background-color: transparent;} + background-color: transparent; +} diff --git a/assets/scss/font.scss b/assets/scss/font.scss index d33f27f..fcf43fa 100644 --- a/assets/scss/font.scss +++ b/assets/scss/font.scss @@ -17,6 +17,7 @@ $small: 12pt; * { font-family: CaskaydiaCove; font-size: $small; + text-overflow: clip; } p, diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss index adf3972..1ee4c71 100644 --- a/assets/scss/layout.scss +++ b/assets/scss/layout.scss @@ -50,6 +50,7 @@ p code{ justify-self: left; margin-right: auto; display: inline-flex; + align-items: center; } #footer-right { @@ -133,3 +134,14 @@ header{ padding-top: 42pt; } +#hamburger-bg{ + position: fixed; + background-color: red; + opacity: 40%; + width: 100%; + height: calc(100% - 42pt); + left: 0pt; + top: 0pt; + right: 0; + transition: 0s; +} diff --git a/assets/scss/main.scss b/assets/scss/main.scss index d0439a0..f6b6554 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,3 +2,4 @@ @import "./layout"; @import "./font"; @import "./style"; +@import "./responsive" diff --git a/assets/scss/responsive.css b/assets/scss/responsive.css new file mode 100644 index 0000000..08e4b87 --- /dev/null +++ b/assets/scss/responsive.css @@ -0,0 +1,16 @@ +#hamburger-button { + display: none; +} + +@media screen and (max-width: 640pt) { + #footer-center, + #darkmode-toggle, + #darkmode-toggle-label + { + display: none; + } + #hamburger-button { + display: flex; + } +} + diff --git a/assets/scss/style.scss b/assets/scss/style.scss index 8a1999d..02a4bf0 100644 --- a/assets/scss/style.scss +++ b/assets/scss/style.scss @@ -52,13 +52,15 @@ input:checked + label::after { content: "滛"; } -.footer-nav-item { +.footer-nav-item, +button{ border-radius: 100%; height: 1em; width: 1em; justify-content: center; align-items: center; border-style: solid; + cursor: pointer; } .togglelabel { diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8423607..69a1be2 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,6 +5,6 @@ {{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}} - + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 262d088..58875a7 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,5 +1,5 @@ diff --git a/static/js/hamburger.js b/static/js/hamburger.js new file mode 100644 index 0000000..2433a0e --- /dev/null +++ b/static/js/hamburger.js @@ -0,0 +1 @@ +function activateHamburger() {} diff --git a/static/js/lightmode.js b/static/js/lightmode.js new file mode 100644 index 0000000..11f6d52 --- /dev/null +++ b/static/js/lightmode.js @@ -0,0 +1,36 @@ +const checkbox = document.getElementById("darkmode-toggle"); +const colorswitchers = document.getElementsByClassName("colorswitch"); + +function switchToLight() { + for (let item of colorswitchers) { + item.classList.add("light"); + } +} + +function switchToDark() { + for (let item of colorswitchers) { + console.log(item); + item.classList.remove("light"); + } +} + +export function updateMode() { + 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; + } +} diff --git a/static/js/main.js b/static/js/main.js index 2c1d53f..6fc7c3d 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,36 +1,7 @@ -const checkbox = document.getElementById("darkmode-toggle"); -const colorswitchers = document.getElementsByClassName("colorswitch"); - -function switchToLight() { - for (let item of colorswitchers) { - item.classList.add("light"); - } -} - -function switchToDark() { - for (let item of colorswitchers) { - console.log(item); - item.classList.remove("light"); - } -} +import { updateMode } from "./lightmode.js"; +import { activateHamburger } from "./hamburger.js"; 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; - } + updateMode(); + activateHamburger(); });