From 80ab1377d1774afb23d31ddc372c51ec09435d4d Mon Sep 17 00:00:00 2001
From: 8BitBiscotti <camilla.biscotti@gmail.com>
Date: Tue, 10 Dec 2024 09:52:57 +0100
Subject: [PATCH] added icons

---
 assets/discord_8x8.png     | Bin 0 -> 166 bytes
 assets/github_8x8.png      | Bin 0 -> 171 bytes
 assets/powerplates_8x8.png | Bin 0 -> 167 bytes
 assets/youtube_8x8.png     | Bin 0 -> 162 bytes
 index.html                 |   4 ++++
 navBar.css                 |  34 +++++++++++++++++++++-------------
 6 files changed, 25 insertions(+), 13 deletions(-)
 create mode 100644 assets/discord_8x8.png
 create mode 100644 assets/github_8x8.png
 create mode 100644 assets/powerplates_8x8.png
 create mode 100644 assets/youtube_8x8.png

diff --git a/assets/discord_8x8.png b/assets/discord_8x8.png
new file mode 100644
index 0000000000000000000000000000000000000000..663219ba6ed8d33fe6c2d1f0e9d3a56799816fd2
GIT binary patch
literal 166
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzO|=|V@L&KZ{I;q1_KV}tvfn@_dn6mwPR9k
zxz@1Y;^7&-Q)ce=K6|j8M}J1>Q-h1&&xw|5&zST+PI13g0i%>m<Igo0fW|O*y85}S
Ib4q9e0K4lk;s5{u

literal 0
HcmV?d00001

diff --git a/assets/github_8x8.png b/assets/github_8x8.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d273faa92df4419beaefe44487c63bc4ad5aee4
GIT binary patch
literal 171
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzJsTWV@L&KtN%ex1_zEyVVVCY&U)JSfJwjU
zkH(CoBh9<zIh2}Sq-}bYGVO;@Q9?w*WwxtkeV5vdeu;}d3R&GNF5xOKa{bgFSD;x8
Mp00i_>zopr0MaNk*8l(j

literal 0
HcmV?d00001

diff --git a/assets/powerplates_8x8.png b/assets/powerplates_8x8.png
new file mode 100644
index 0000000000000000000000000000000000000000..08db3b6937893e6c3ecf75cc9fa17a7f89f71a01
GIT binary patch
literal 167
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzKy4gV@L(#(*D!D3<exdM_upK>!`hap5W{;
zS?-sgmkGnFtRqb-P8qhbA0&6(X{gt@ZT9%!|AQ-^S?>DA!lWr!+dKLCb)Y#6p00i_
I>zopr0K?xh9{>OV

literal 0
HcmV?d00001

diff --git a/assets/youtube_8x8.png b/assets/youtube_8x8.png
new file mode 100644
index 0000000000000000000000000000000000000000..96b791675a664343c6a3f855cd922b03a679716c
GIT binary patch
literal 162
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzPYE1V@L&KYu`a$1_KVJrQI9;NBCSi7Vqr4
zvz^~kIh65>!p`LZLIv%63o3oX;}2G{)C+otJz_YiAeffjI`sk22nJ7AKbLh*2~7ZN
CQ7l~m

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 8046467..31c5afd 100644
--- a/index.html
+++ b/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>
diff --git a/navBar.css b/navBar.css
index 7525fd3..6319998 100644
--- a/navBar.css
+++ b/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;
 }
\ No newline at end of file