polished styling a bit

index.html

@@ -24,38 +24,41 @@
     <div id="canvasContainer"></div>
     
     <!-- TODO: change discord URL to server URL -->
-    <ul class="navBar">
+    <!-- TODO: make automatic navBar creator -->
-      <li>
+    <div class="navBarAligner">
-        <button onclick="slideTransition('https://discord.com')" class="navBtn">
+      <ul class="navBar">
-          <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
+        <li>
-          <img class="navBtnIcon" draggable="false" src="./assets/discord_8x8.png">
+          <button onclick="slideTransition('https://discord.com')" class="navBtn">
-        </button>
+            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-      </li>
+            <img class="navBtnIcon" draggable="false" src="./assets/discord_8x8.png">
-      <li>
+          </button>
-        <button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
+        </li>
-          <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
+        <li>
-          <img class="navBtnIcon" draggable="false" src="./assets/youtube_8x8.png">
+          <button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
-        </button>
+            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-      </li>
+            <img class="navBtnIcon" draggable="false" src="./assets/youtube_8x8.png">
-      <li>
+          </button>
-        <button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
+        </li>
-          <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
+        <li>
-          <img class="navBtnIcon" draggable="false" src="./assets/github_8x8.png">
+          <button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
-        </button>
+            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-      </li>
+            <img class="navBtnIcon" draggable="false" src="./assets/github_8x8.png">
-      <li>
+          </button>
-        <button class="navBtn">
+        </li>
-          <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
+        <li>
-          <img class="navBtnIcon" draggable="false" src="./assets/powerplates_8x8.png">
+          <button class="navBtn">
-        </button>
+            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-      </li>
+            <img class="navBtnIcon" draggable="false" src="./assets/powerplates_8x8.png">
-      <li>
+          </button>
-        <button onClick="pauseAnimBtn('auto')" class="navBtn">
+        </li>
-          <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
+        <li>
-          <img class="navBtnIcon" draggable="false" src="./assets/pauseAnimation_8x8.png" id="animationToggle">
+          <button onClick="pauseAnimBtn('auto')" class="navBtn">
-        </button>
+            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-      </li>
+            <img class="navBtnIcon" draggable="false" src="./assets/pauseAnimation_8x8.png" id="animationToggle">
-    </ul>
+          </button>
+        </li>
+      </ul>
+    </div>
   </div>
 
   <div class="bgDiv" id="loadingScreen">

loadingScreen.css

@@ -33,8 +33,11 @@
 #loadingText {
   position: absolute;
   bottom: 0%;
-  left: 50%;
+  left: calc(50% - 40vw);
-  transform: translateX(-50%);
+  width: 80vw;
   text-align: center;
   font-size: 1.5rem;
+  word-break: break-word;
+  display: flex;
+  justify-content: center;
 }

loadingScreenTips.json

@@ -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

@@ -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;
+  transform: translateY(calc(-4px * var(--pxDensity)));
-  top: round(calc(100% - calc(5px * var(--pxDensity))), var(--pxDensityPx));
-  left: round(50%, var(--pxDensityPx));
-  transform: translate(-50%, -100%);
   font-size: 0px;
-  width: max-content;
+  text-align: center;
 }
 .navBtn {
   background-color: transparent;