From 05f971fa8d7f3464cfbd32881766d0b9d3a7602c Mon Sep 17 00:00:00 2001 From: 8BitBiscotti Date: Mon, 9 Dec 2024 14:50:45 +0100 Subject: [PATCH] added pixelated navigation bar --- assets/navBarBtn.png | Bin 0 -> 522 bytes globalStyle.css | 7 +++++++ index.html | 32 ++++++++++++++++++++++++++++++++ navBar.css | 41 +++++++++++++++++++++++++++++++++++++++++ pxDensity.js | 8 ++++++++ 5 files changed, 88 insertions(+) create mode 100644 assets/navBarBtn.png create mode 100644 globalStyle.css create mode 100644 index.html create mode 100644 navBar.css create mode 100644 pxDensity.js diff --git a/assets/navBarBtn.png b/assets/navBarBtn.png new file mode 100644 index 0000000000000000000000000000000000000000..351b96883d3714e0e24dacef7124a6bfd550c0dd GIT binary patch literal 522 zcmV+l0`>igP)aTcv(fI_MzMAww$;EffWDlnQpK4s8XiF3D@s3P~DXQlz*FE)E3; z(Z#R9|3Fv4RY4FGLB!G7uSH6{uPL-h`@+rrao#(ZmlMFB(V1cQB>}^9cs8AqRtsxV z@EsuxQbiDxnQblQ7W3%2ejecy{UIS{^*+~i4Hs3L0lop^S!QvEc%C@3>>D zR1w(7B8?OzD5zo+IvgaZo0M61U$W_2Muj|#-WF=$;2-);`Xkfc!T7qC4R52$-bv;f+55!DtI7 z45Uf`000SaNLh0L04^f{04^f|c%?sf0000%Nkl5V(8yE+ZpM zv5JZcUiEkG+yToofe1p1k=1}TkOD?E5EEM9P=ZAYJ`FH6jHD(F0Oh6 + + + + + + Byte Dice + + + + + + +

asdasdasdasd

+ +
    +
  • + +
    • +
  • + +
    • +
+ + + + + \ No newline at end of file diff --git a/navBar.css b/navBar.css new file mode 100644 index 0000000..4cad375 --- /dev/null +++ b/navBar.css @@ -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))); +} \ No newline at end of file diff --git a/pxDensity.js b/pxDensity.js new file mode 100644 index 0000000..700e09d --- /dev/null +++ b/pxDensity.js @@ -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) \ No newline at end of file