ByteDice/ByteDiceWeb
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

added pixelated navigation bar

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-09 14:50:45 +01:00
parent fa50845bbc
commit 05f971fa8d
5 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/navBarBtn.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 B

globalStyle.css
+7
View File
@@ -0,0 +1,7 @@
:root {
--navBar_Inner: #43608D;
--navBar_Border: #2F3E56;
--navBarBtn_Inner: #474747;
--navBarBtn_Border: #232323;
--pxDensity: 1;
}
index.html
+32
View File
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Byte Dice</title>
<link rel="stylesheet" href="navBar.css">
<link rel="stylesheet" href="/globalStyle.css">
</head>
<body style="background-color: #323232; color: #ffffff;">
<p>asdasdasdasd</p>
<ul class="navBar">
<li>
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button>
</li>
<li>
<button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
</button>
</li>
</ul>
<script src="/pxDensity.js"></script>
</body>
</html>
navBar.css
+41
View File
@@ -0,0 +1,41 @@
li {
list-style-type: none;
display: inline;
margin: calc(1px * var(--pxDensity));
}
ul {
padding: calc(1px * var(--pxDensity)) 0px;
}
.navBar {
background-color: var(--navBar_Inner);
width: calc(128px * var(--pxDensity));
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
calc(-1px * var(--pxDensity)) 0px var(--navBar_Border),
0px calc(1px * var(--pxDensity)) var(--navBar_Border),
0px calc(-1px * var(--pxDensity)) var(--navBar_Border),
0px calc(2px * var(--pxDensity)) 0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5);
}
.navBtn {
background-color: transparent;
width: calc(12px * var(--pxDensity));
height: calc(12px * var(--pxDensity));
display: inline-block;
padding: 0%;
border: none;
}
.navBtnImg {
width: 100%;
height: 100%;
image-rendering: pixelated;
margin: 0%;
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
}
.navBtnImg:hover {
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer;
}
.navBtnImg:active {
filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity)));
}
pxDensity.js
+8
View File
@@ -0,0 +1,8 @@
document.addEventListener('DOMContentLoaded', function() {
let densityWidth = document.documentElement.clientWidth / 256
let densityHeight = document.documentElement.clientHeight / 164
document.documentElement.style.setProperty("--pxDensity", Math.max(densityWidth, densityHeight))
console.log(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
}, false)