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

polished styling a bit

Browse Source
This commit is contained in:
ByteDice
2025-01-06 13:36:33 +01:00
parent c4ed0e2997
commit 09668563ad
4 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+35 -32
View File
@@ -24,38 +24,41 @@
<div id="canvasContainer"></div>
<!-- TODO: change discord URL to server URL -->
<ul class="navBar">
<li>
<button onclick="slideTransition('https://discord.com')" 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 onclick="slideTransition('https://youtube.com/@ByteDice')" 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 onclick="slideTransition('https://github.com/ByteDice')" 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>
<button onClick="pauseAnimBtn('auto')" class="navBtn">
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="./assets/pauseAnimation_8x8.png" id="animationToggle">
</button>
</li>
</ul>
<!-- TODO: make automatic navBar creator -->
<div class="navBarAligner">
<ul class="navBar">
<li>
<button onclick="slideTransition('https://discord.com')" 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 onclick="slideTransition('https://youtube.com/@ByteDice')" 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 onclick="slideTransition('https://github.com/ByteDice')" 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>
<button onClick="pauseAnimBtn('auto')" class="navBtn">
<img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
<img class="navBtnIcon" draggable="false" src="./assets/pauseAnimation_8x8.png" id="animationToggle">
</button>
</li>
</ul>
</div>
</div>
<div class="bgDiv" id="loadingScreen">
loadingScreen.css
+5 -2
View File
@@ -33,8 +33,11 @@
#loadingText {
position: absolute;
bottom: 0%;
left: 50%;
transform: translateX(-50%);
left: calc(50% - 40vw);
width: 80vw;
text-align: center;
font-size: 1.5rem;
word-break: break-word;
display: flex;
justify-content: center;
}
loadingScreenTips.json
+8 -2
View File
@@ -2,7 +2,7 @@
"Just don't die.",
"Did you know this is a tip?",
"Is thisn't not very un-understandable?",
"mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmicrowave sounds. (wow you have a long monitor.)",
"mmmmmmmmmmmmmmicrowave sounds.",
"Bad at a game? Just press the \"get good at games\" button!",
"I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
"You should listen to that song that goes \"do do do do do do do do do.\"",
@@ -16,5 +16,11 @@
"Why is it called loading screen if the screen has already loaded?",
"This website is powered by hopes, dreams, and questionable code.",
"If this tip is useless, it's working as intended.",
"Private tip. Anyone who reads will be executed on the spot."
"Private tip. Anyone who reads will be executed on the spot.",
"Why do we park on driveways and drive on parkways?",
"Most of these tips are very useful. Consider reading them even if you already have.",
"This tip will self-destruct in 3... 2... 1... jk, I'm too lazy to set that up.",
"If you're reading this, congratulations, you can read!",
"Life hack: Pressing alt+f4 in Fortnite will give you free aimbot.",
"I am the tip man, my tips are educational."
]
navBar.css
+8 -5
View File
@@ -5,6 +5,12 @@ li {
margin-bottom: calc(2px * var(--pxDensity));
}
.navBarAligner {
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
.navBar {
background-color: var(--navBar_Inner);
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBar_Border),
@@ -15,12 +21,9 @@ li {
filter: drop-shadow(0px calc(2px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
padding: 0%;
display: inline-block;
position: absolute;
top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
left: round(50%, var(--pxDensityPx));
transform: translate(-50%, -100%);
transform: translateY(calc(-4px * var(--pxDensity)));
font-size: 0px;
width: max-content;
text-align: center;
}
.navBtn {
background-color: transparent;