added icons

index.html

@@ -15,21 +15,25 @@
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/discord_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/youtube_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/github_8x8.png">
       </button>
     </li>
     <li>
       <button class="navBtn">
         <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+        <img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
       </button>
     </li>
     <li>

navBar.css

@@ -1,7 +1,8 @@
 li {
   list-style-type: none;
-  display: inline;
+  display: inline-flex;
   margin: calc(1px * var(--pxDensity));
+  margin-bottom: calc(2px * var(--pxDensity));
 }
 
 .navBar {
@@ -12,29 +13,36 @@ li {
               0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
 
   filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
-  padding: calc(1px * var(--pxDensity)) 0px;
+  padding: 0%;
   display: inline-block;
 }
 .navBtn {
   background-color: transparent;
-  width: calc(12px * var(--pxDensity));
-  height: calc(12px * var(--pxDensity));
-  display: inline-block;
+  display: inline-flex;
   padding: 0%;
   border: none;
-}
-.navBtnImg {
-  width: 100%;
-  height: 100%;
-  image-rendering: pixelated;
-  margin: 0%;
+  position: relative;
   filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
 }
-.navBtnImg:hover {
+.navBtn:hover {
   filter: brightness(1.35)  drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
   cursor: pointer;
 }
-.navBtnImg:active {
+.navBtn:active {
   filter: brightness(0.75);
   transform: translateY(calc(1px * var(--pxDensity)));
+}
+.navBtnImg {
+  width: calc(12px * var(--pxDensity));
+  height: calc(12px * var(--pxDensity));
+  image-rendering: pixelated;
+  margin: 0%;
+}
+.navBtnIcon {
+  width: calc(8px * var(--pxDensity));
+  height: calc(8px * var(--pxDensity));
+  image-rendering: pixelated;
+  position: absolute;
+  margin: calc(2px * var(--pxDensity));
+  pointer-events: none;
 }