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

added icons

Browse Source
This commit is contained in:
8BitBiscotti
2024-12-10 09:52:57 +01:00
parent c3e4e2cd18
commit 80ab1377d1
6 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/discord_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 B

assets/github_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 B

assets/powerplates_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 B

assets/youtube_8x8.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 B

index.html
+4
View File
@@ -15,21 +15,25 @@
<li> <li>
<button class="navBtn"> <button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png"> <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/discord_8x8.png">
</button> </button>
</li> </li>
<li> <li>
<button class="navBtn"> <button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png"> <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/youtube_8x8.png">
</button> </button>
</li> </li>
<li> <li>
<button class="navBtn"> <button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png"> <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/github_8x8.png">
</button> </button>
</li> </li>
<li> <li>
<button class="navBtn"> <button class="navBtn">
<img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png"> <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="/assets/powerplates_8x8.png">
</button> </button>
</li> </li>
<li> <li>
navBar.css
+21 -13
View File
@@ -1,7 +1,8 @@
li { li {
list-style-type: none; list-style-type: none;
display: inline; display: inline-flex;
margin: calc(1px * var(--pxDensity)); margin: calc(1px * var(--pxDensity));
margin-bottom: calc(2px * var(--pxDensity));
} }
.navBar { .navBar {
@@ -12,29 +13,36 @@ li {
0px calc(-1px * var(--pxDensity)) var(--navBar_Border); 0px calc(-1px * var(--pxDensity)) var(--navBar_Border);
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); 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; display: inline-block;
} }
.navBtn { .navBtn {
background-color: transparent; background-color: transparent;
width: calc(12px * var(--pxDensity)); display: inline-flex;
height: calc(12px * var(--pxDensity));
display: inline-block;
padding: 0%; padding: 0%;
border: none; border: none;
} position: relative;
.navBtnImg {
width: 100%;
height: 100%;
image-rendering: pixelated;
margin: 0%;
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5)); 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)); filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
cursor: pointer; cursor: pointer;
} }
.navBtnImg:active { .navBtn:active {
filter: brightness(0.75); filter: brightness(0.75);
transform: translateY(calc(1px * var(--pxDensity))); 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;
}