Compare commits

..

No commits in common. "577c33c20245dd9e130622ca34506ed0e904b427" and "ae4f82eb03fba14f4bc399f8486b3125bc6fbdca" have entirely different histories.

18 changed files with 76 additions and 405 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"><a href="/" id="pageindicator" class="colorswitch" title="about"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -68,31 +68,9 @@ 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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="Categories"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,31 +47,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="games"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,31 +47,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="home"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -62,31 +62,9 @@ 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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

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

View file

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

@ -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"><a href="/" id="pageindicator" class="colorswitch" title="buddies"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -88,31 +88,9 @@ 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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="find me"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -57,31 +57,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="links"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -65,31 +65,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="things that make me happy"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -68,31 +68,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="music"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -53,31 +53,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="posts"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,31 +47,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -196,30 +196,6 @@ 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%;
@ -262,8 +238,7 @@ 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;
@ -335,17 +310,6 @@ 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); }
@ -356,8 +320,7 @@ header {
* { * {
font-family: CaskaydiaCove; font-family: CaskaydiaCove;
font-size: 12pt; font-size: 12pt; }
text-overflow: clip; }
p, p,
.postdescription, .postdescription,
@ -439,15 +402,13 @@ 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; }
@ -489,14 +450,3 @@ 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"><a href="/" id="pageindicator" class="colorswitch" title="software"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,31 +47,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script 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"><a href="/" id="pageindicator" class="colorswitch" title="Tags"> batsite</a></span> <span id="footer-left"></span>
<span id="footer-center"> <span id="footer-center">
<nav id="footer-nav" aria-label="navigation"> <nav id="footer-nav" aria-label="navigation">
@ -47,31 +47,9 @@
</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" id="darkmode-toggle-label"></label> <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox"></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 type="module" src="/js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>

View file

@ -338,20 +338,13 @@ 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;

@ -1 +1 @@
Subproject commit cb4c119646ea2a0922dc121ee10f359ff2ce4c3c Subproject commit 137f5a2b05aaad9fab2da9ba0d6abb42dd016110