From 7fcbea1a0ec563f4c7d10a5f1b59af0a783d50ee Mon Sep 17 00:00:00 2001 From: Zoe Date: Sat, 16 Apr 2022 13:18:04 +0200 Subject: [PATCH] add games --- public/about/index.html | 28 ++++++++- public/categories/index.html | 28 ++++++++- public/games/index.html | 28 ++++++++- public/index.html | 28 ++++++++- public/js/hamburger.js | 1 + public/js/lightmode.js | 36 ++++++++++++ public/js/main.js | 37 ++---------- public/links/buddies/index.html | 28 ++++++++- public/links/contact/index.html | 28 ++++++++- public/links/index.html | 28 ++++++++- public/links/nice_things/index.html | 28 ++++++++- public/music/index.html | 28 ++++++++- public/posts/index.html | 28 ++++++++- public/scss/main.css | 58 +++++++++++++++++-- public/software/index.html | 28 ++++++++- public/tags/index.html | 28 ++++++++- ...s_f300667da4f5b5f84e1a9e0702b2fdde.content | 11 +++- 17 files changed, 404 insertions(+), 75 deletions(-) create mode 100644 public/js/hamburger.js create mode 100644 public/js/lightmode.js diff --git a/public/about/index.html b/public/about/index.html index ebc2157..2df66b6 100644 --- a/public/about/index.html +++ b/public/about/index.html @@ -45,7 +45,7 @@ i’m also trans and gay and queer :)

- + diff --git a/public/categories/index.html b/public/categories/index.html index 7364ddf..47ad147 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -24,7 +24,7 @@ - + diff --git a/public/games/index.html b/public/games/index.html index fd14698..92279ac 100644 --- a/public/games/index.html +++ b/public/games/index.html @@ -24,7 +24,7 @@ - + diff --git a/public/index.html b/public/index.html index a900ce6..6cb41d5 100644 --- a/public/index.html +++ b/public/index.html @@ -39,7 +39,7 @@ if you ever wish to experience of of those, i hope you enjoy!

- + diff --git a/public/js/hamburger.js b/public/js/hamburger.js new file mode 100644 index 0000000..2433a0e --- /dev/null +++ b/public/js/hamburger.js @@ -0,0 +1 @@ +function activateHamburger() {} diff --git a/public/js/lightmode.js b/public/js/lightmode.js new file mode 100644 index 0000000..11f6d52 --- /dev/null +++ b/public/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/public/js/main.js b/public/js/main.js index 2c1d53f..6fc7c3d 100644 --- a/public/js/main.js +++ b/public/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(); }); diff --git a/public/links/buddies/index.html b/public/links/buddies/index.html index 65784ee..fe470e2 100644 --- a/public/links/buddies/index.html +++ b/public/links/buddies/index.html @@ -65,7 +65,7 @@ this type of website also just makes me happy!

- + diff --git a/public/links/contact/index.html b/public/links/contact/index.html index 5dca352..1916640 100644 --- a/public/links/contact/index.html +++ b/public/links/contact/index.html @@ -34,7 +34,7 @@ - + diff --git a/public/links/index.html b/public/links/index.html index 4f2688f..2f095ef 100644 --- a/public/links/index.html +++ b/public/links/index.html @@ -42,7 +42,7 @@ - + diff --git a/public/links/nice_things/index.html b/public/links/nice_things/index.html index 40e194a..c4ac208 100644 --- a/public/links/nice_things/index.html +++ b/public/links/nice_things/index.html @@ -45,7 +45,7 @@ - + diff --git a/public/music/index.html b/public/music/index.html index c4213e7..056295f 100644 --- a/public/music/index.html +++ b/public/music/index.html @@ -30,7 +30,7 @@ - + diff --git a/public/posts/index.html b/public/posts/index.html index 8611a38..85c5cf7 100644 --- a/public/posts/index.html +++ b/public/posts/index.html @@ -24,7 +24,7 @@ - + diff --git a/public/scss/main.css b/public/scss/main.css index 60d2805..691be61 100644 --- a/public/scss/main.css +++ b/public/scss/main.css @@ -196,6 +196,30 @@ header { .posttitle a:hover { background-color: transparent; } +button { + color: #413c74; + background-color: #ff8ad0; + border-color: #413c74; } + button:hover { + transition: 0.2s; + background-color: #413c74; + color: #ff8ad0; } + button.light { + color: #ffffff; + background-color: #413c74; + border-color: #ffffff; } + button.light:hover { + transition: 0.2s; + background-color: #ffffff; + color: #413c74; } + +#pageindicator { + background-color: transparent; } + #pageindicator.light { + color: #ffffff; } + #pageindicator:hover { + background-color: transparent; } + html, body { height: 100%; @@ -238,7 +262,8 @@ p code { margin-left: 24pt; justify-self: left; margin-right: auto; - display: inline-flex; } + display: inline-flex; + align-items: center; } #footer-right { margin-top: auto; @@ -310,6 +335,17 @@ header { width: 100%; 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; } + @font-face { font-family: CaskaydiaCove; src: url(/font/CaskaydiaCove.ttf); } @@ -320,7 +356,8 @@ header { * { font-family: CaskaydiaCove; - font-size: 12pt; } + font-size: 12pt; + text-overflow: clip; } p, .postdescription, @@ -402,13 +439,15 @@ input:checked + label:after { 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; } + border-style: solid; + cursor: pointer; } .togglelabel { border: solid; } @@ -450,3 +489,14 @@ p a, ul a { border-style: solid; padding: 0.12em; } + +#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/public/software/index.html b/public/software/index.html index bf4a6be..bb42d7b 100644 --- a/public/software/index.html +++ b/public/software/index.html @@ -24,7 +24,7 @@ - + diff --git a/public/tags/index.html b/public/tags/index.html index f45340b..8dc57a3 100644 --- a/public/tags/index.html +++ b/public/tags/index.html @@ -24,7 +24,7 @@ - + diff --git a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content index 691be61..1021bff 100644 --- a/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content +++ b/resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content @@ -338,13 +338,20 @@ header { #hamburger-bg { position: fixed; background-color: red; - opacity: 40%; width: 100%; height: calc(100% - 42pt); left: 0pt; top: 0pt; right: 0; - transition: 0s; } + transition: 0s; + display: grid; + align-items: center; + justify-content: center; } + #hamburger-bg * { + display: grid; + margin-top: 14pt; + margin-bottom: 14pt; + text-align: center; } @font-face { font-family: CaskaydiaCove;