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>
<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
+21 -13
View File
@@ -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;
}