add games

This commit is contained in:
Zoe 2022-04-16 13:18:04 +02:00
parent ae4f82eb03
commit 7fcbea1a0e
17 changed files with 404 additions and 75 deletions

View file

@ -45,7 +45,7 @@ i&rsquo;m also trans and gay and queer :)</p>
</div> </div>
</aside> </aside>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="about"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -68,9 +68,31 @@ i&rsquo;m also trans and gay and queer :)</p>
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item active colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="Categories"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="games"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item active colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -39,7 +39,7 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
</p> </p>
</article> </article>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="home"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -62,9 +62,31 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item active colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

1
public/js/hamburger.js Normal file
View file

@ -0,0 +1 @@
function activateHamburger() {}

36
public/js/lightmode.js Normal file
View file

@ -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;
}
}

View file

@ -1,36 +1,7 @@
const checkbox = document.getElementById("darkmode-toggle"); import { updateMode } from "./lightmode.js";
const colorswitchers = document.getElementsByClassName("colorswitch"); import { activateHamburger } from "./hamburger.js";
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");
}
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
if (localStorage.getItem("light")) { updateMode();
switchToLight(); activateHamburger();
} 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;
}
}); });

View file

@ -65,7 +65,7 @@ this type of website also just makes me happy!</p>
</div> </div>
</aside> </aside>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="buddies"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -88,9 +88,31 @@ this type of website also just makes me happy!</p>
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -34,7 +34,7 @@
</div> </div>
</aside> </aside>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="find me"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -57,9 +57,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -42,7 +42,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="links"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -65,9 +65,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -45,7 +45,7 @@
</div> </div>
</aside> </aside>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="things that make me happy"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -68,9 +68,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item active colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -30,7 +30,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="music"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -53,9 +53,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item active colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="posts"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item active colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -196,6 +196,30 @@ header {
.posttitle a:hover { .posttitle a:hover {
background-color: transparent; } 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, html,
body { body {
height: 100%; height: 100%;
@ -238,7 +262,8 @@ p code {
margin-left: 24pt; margin-left: 24pt;
justify-self: left; justify-self: left;
margin-right: auto; margin-right: auto;
display: inline-flex; } display: inline-flex;
align-items: center; }
#footer-right { #footer-right {
margin-top: auto; margin-top: auto;
@ -310,6 +335,17 @@ header {
width: 100%; width: 100%;
padding-top: 42pt; } 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-face {
font-family: CaskaydiaCove; font-family: CaskaydiaCove;
src: url(/font/CaskaydiaCove.ttf); } src: url(/font/CaskaydiaCove.ttf); }
@ -320,7 +356,8 @@ header {
* { * {
font-family: CaskaydiaCove; font-family: CaskaydiaCove;
font-size: 12pt; } font-size: 12pt;
text-overflow: clip; }
p, p,
.postdescription, .postdescription,
@ -402,13 +439,15 @@ input:checked + label:after {
input:checked + label::after { input:checked + label::after {
content: "滛"; } content: "滛"; }
.footer-nav-item { .footer-nav-item,
button {
border-radius: 100%; border-radius: 100%;
height: 1em; height: 1em;
width: 1em; width: 1em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-style: solid; } border-style: solid;
cursor: pointer; }
.togglelabel { .togglelabel {
border: solid; } border: solid; }
@ -450,3 +489,14 @@ p a,
ul a { ul a {
border-style: solid; border-style: solid;
padding: 0.12em; } 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; } }

View file

@ -24,7 +24,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="software"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item active colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -24,7 +24,7 @@
</div> </div>
</main> </main>
</div><footer class="colorswitch"> </div><footer class="colorswitch">
<span id="footer-left"></span> <span id="footer-left"><a href="/" id="pageindicator" class="colorswitch" title="Tags"> batsite</a></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span> </span>
<span id="footer-right"> <span id="footer-right">
<input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput"> <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
<label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
<button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
<div class="hamburger colorswitch" id="hamburger-bg">
<nav id="footer-nav" aria-label="navigation">
<a class="footer-nav-item colorswitch" href="/" title="home"></a>
<a class="footer-nav-item colorswitch" href="/about/" title="about"></a>
<a class="footer-nav-item colorswitch" href="/links/" title="links"></a>
<a class="footer-nav-item colorswitch" href="/music/" title="music"></a>
<a class="footer-nav-item colorswitch" href="/games/" title="games"></a>
<a class="footer-nav-item colorswitch" href="/software/" title="software"></a>
<a class="footer-nav-item colorswitch" href="/posts/" title="posts"></a>
</nav>
</div>
</span> </span>
</footer> </footer>
<script src="/js/main.js"></script> <script type="module" src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -338,13 +338,20 @@ header {
#hamburger-bg { #hamburger-bg {
position: fixed; position: fixed;
background-color: red; background-color: red;
opacity: 40%;
width: 100%; width: 100%;
height: calc(100% - 42pt); height: calc(100% - 42pt);
left: 0pt; left: 0pt;
top: 0pt; top: 0pt;
right: 0; 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-face {
font-family: CaskaydiaCove; font-family: CaskaydiaCove;