zoe
/
hugo-batsite
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
public/about/index.html
View File

@ -45,7 +45,7 @@ i&rsquo;m also trans and gay and queer :)</p>
</div>
</aside>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -68,9 +68,31 @@ i&rsquo;m also trans and gay and queer :)</p>
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/categories/index.html
View File

@ -24,7 +24,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/games/index.html
View File

@ -24,7 +24,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/index.html
View File

@ -39,7 +39,7 @@ if you ever wish to <em>experience</em> of of those, i hope you enjoy!</p>
</p>
</article>
</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">
<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 id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</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;
}
}

37
public/js/main.js
View File

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

28
public/links/buddies/index.html
View File

@ -65,7 +65,7 @@ this type of website also just makes me happy!</p>
</div>
</aside>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -88,9 +88,31 @@ this type of website also just makes me happy!</p>
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/links/contact/index.html
View File

@ -34,7 +34,7 @@
</div>
</aside>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -57,9 +57,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/links/index.html
View File

@ -42,7 +42,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -65,9 +65,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/links/nice_things/index.html
View File

@ -45,7 +45,7 @@
</div>
</aside>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -68,9 +68,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/music/index.html
View File

@ -30,7 +30,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -53,9 +53,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/posts/index.html
View File

@ -24,7 +24,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

58
public/scss/main.css
View File

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

28
public/software/index.html
View File

@ -24,7 +24,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

28
public/tags/index.html
View File

@ -24,7 +24,7 @@
</div>
</main>
</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">
<nav id="footer-nav" aria-label="navigation">
@ -47,9 +47,31 @@
</span>
<span id="footer-right">
<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>
</footer>
<script src="/js/main.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>

11
resources/_gen/assets/scss/scss/main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
View File

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