added pixelated navigation bar

2024-12-09 14:50:45 +01:00
parent fa50845bbc
commit 05f971fa8d
5 changed files with 88 additions and 0 deletions
@@ -0,0 +1,7 @@
+:root {
+  --navBar_Inner: #43608D;
+  --navBar_Border: #2F3E56;
+  --navBarBtn_Inner: #474747;
+  --navBarBtn_Border: #232323;
+  --pxDensity: 1;
+}
@@ -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>
@@ -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)));
+}
@@ -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)