navbar

mathieukvogt · Sep 9, 2024 · 81e6027 · 81e6027
1 parent 8b0e7ef
commit 81e6027
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 104 deletions.
diff --git a/index.html b/index.html
@@ -32,9 +32,11 @@
 
   <body>
     <header>
-      <div class="fixed-box">
-        <a href="#top"><b>Javascript</b></a>
-      </div>
+        <div class="fixed-box">
+          <button id="upButton"><a href="#top">UP</a></button>
+          <a href="#top" class="center-text"><b>Javascript</b></a>
+          <button id="darkModeButton">DM</button>
+        </div>
     </header>
     <main>
       <section id="elements">
@@ -43,24 +45,24 @@ <h2>Index</h2>
       <hr />
       <br>
       <div class="alphsort">
-        <a href="#variables">Variables</a>
-        <a href="#conditionals">Conditionals</a>
-        <a href="#ao">Arithmetic Operators</a>
-        <a href="#functions">Functions</a>
-        <a href="#scope">Scope</a>
-        <a href="#arrays">Arrays</a>
-        <a href="#array-access">Array Inspection</a>
-        <a href="#array-transformation">Array Transformation</a>
-        <a href="#array-iteration">Array Iteration</a>
-        <a href="#array-mutation">Array Mutation</a>
-        <a href="#array-utility">Array Utility</a>
-        <a href="#loops">Loops</a>
-        <a href="#objects">Objects</a>
-        <a href="#comments">Comments</a>
-        <a href="#data-types">Data Types</a>
-        <a href="#dom">Document-Object-Model</a>
-        <a href="#domevents">Events</a>
-        <a href="#htmlforms">HTML-Forms</a>
+        <a href="#variables">Variables |</a>
+        <a href="#conditionals">Conditionals |</a>
+        <a href="#ao">Arithmetic Operators |</a>
+        <a href="#functions">Functions |</a>
+        <a href="#scope">Scope |</a>
+        <a href="#arrays">Arrays |</a>
+        <a href="#array-access">Array Inspection |</a>
+        <a href="#array-transformation">Array Transformation |</a>
+        <a href="#array-iteration">Array Iteration |</a>
+        <a href="#array-mutation">Array Mutation |</a>
+        <a href="#array-utility">Array Utility |</a>
+        <a href="#loops">Loops |</a>
+        <a href="#objects">Objects |</a>
+        <a href="#comments">Comments |</a>
+        <a href="#data-types">Data Types |</a>
+        <a href="#dom">Document-Object-Model |</a>
+        <a href="#domevents">Events |</a>
+        <a href="#htmlforms">HTML-Forms |</a>
       </div>
       <br>
       <hr />
@@ -10897,8 +10899,6 @@ <h4><u>Specifications</u></h4>
       </table>
       <br /> 
     </main>  
-    <button id="darkModeButton">DM</button>
-    <button id="upButton"><a href="#top">UP</a></button>
     <footer>
       <div class="ascii-art-desktop">
         <pre class="ascii-art">

diff --git a/main.css b/main.css
@@ -1,19 +1,21 @@
 :root {
   --background-color-one: #000000;
   --color-one: #ffffff;
-  --background-color-two: #d3d3d3;
-  --color-two: #0024b6;
+  --background-color-two: #000000;
+  --color-two: #000000;
   --color-three: #000000;
   --color-four: #ffffff;
+  --color-five: #707070;
 }
 
 body.dark-mode {
-  --background-color-one: #ededed;
-  --color-one: #0f0f0f;
+  --background-color-one: #ffffff;
+  --color-one: #000000;
   --background-color-two: #424242;
-  --color-two: #b8c5e0;
-  --color-three: #2d2d2d;
-  --color-four: #ededed;
+  --color-two: #ffffff;
+  --color-three: #202020;
+  --color-four: #ffffff;
+  --color-five: #cbcbcb;
 }
 
 * {
@@ -38,26 +40,38 @@ body {
 
 .fixed-box {
   position: fixed;
-  top: 20px; /* 5px from the top */
-  left: 25vw; /* 5px from the left */
-  right: 25vw; /* 5px from the right */
-  height: 40px; /* Fixed height */
-  border: 1px solid var(--background-color-one); /* Black border of 0.5px */
-  background-color: transparent; /* No fill */
+  border: 1px solid var(--background-color-one);
+  top: 20px;
+  left: 25vw;
+  right: 25vw;
   display: flex;
-  justify-content: center; /* Horizontally center the text */
-  align-items: center; /* Vertically center the text */
-  z-index: 1000; /* Ensure it stays on top */
+  align-items: center;
+  justify-content: space-between;
+  z-index: 1000;
+  padding-left: 5px;
+  padding-right: 5px;
+  height: 40px;
 }
 
-.fixed-box a {
-  text-decoration: none; /* Remove underline */
-  color: var(--background-color-one); /* Text color */
+.fixed-box button {
+  height: 25px;
+  width: 25px;
+  background-color: transparent;
+  border: 1px solid var(--background-color-one);
+}
+
+.fixed-box a.center-text {
+  text-decoration: none;
+  font-family: monospace;
+}
+
+#darkModeButton {
+  color: var(--background-color-one);
 }
 
 h2 {
   font-size: 20px;
-  padding-top: 90px;
+  padding-top: 80px;
   padding-bottom: 20px;
   text-align: left;
   overflow: hidden;
@@ -73,6 +87,7 @@ h4 {
 
 a {
   color: var(--background-color-one);
+  text-decoration: none;
 }
 
 hr {
@@ -125,57 +140,6 @@ td {
   content: " \25B2"; /* Up-pointing triangle, indicating collapsible */
 }
 
-#upButton {
-  position: fixed;
-  bottom: 35px;
-  right: 35px;
-  font-size: 14px;
-  border-radius: 2px;
-  cursor: pointer;
-  font-size: 14;
-  border: none;
-  padding: 10px;
-  mix-blend-mode: difference;
-  background-color: var(--background-color-two);
-  color: var(--background-color-one);
-  height: 40px;
-  width: 40px;
-  display: flex;
-  justify-content: center; /* Horizontally center the text */
-  align-items: center; /* Vertically center the text */
-  text-align: center;
-}
-
-#darkModeButton {
-  position: fixed;
-  bottom: 85px;
-  right: 35px;
-  font-size: 14px;
-  border-radius: 2px;
-  cursor: pointer;
-  font-size: 14;
-  border: none;
-  padding: 10px;
-  mix-blend-mode: difference;
-  background-color: var(--background-color-two);
-  color: var(--background-color-one);
-  height: 40px;
-  width: 40px;
-  display: flex;
-  justify-content: center; /* Horizontally center the text */
-  align-items: center; /* Vertically center the text */
-  text-align: center;
-}
-
-#upButton a {
-  text-decoration: none;
-  color: inherit;
-}
-
-#upButton a:hover {
-  text-decoration: none;
-}
-
 .ascii-art {
   display: flex;
   justify-content: center;
@@ -195,18 +159,26 @@ td {
   }
 
   .fixed-box {
-    top: 15px; /* 5px from the top */
-    left: 3vw; /* 5px from the left */
-    right: 3vw; /* 5px from the right */
-    height: 40px; /* Fixed height */
-    border: 1px solid var(--background-color-one); /* Black border of 0.5px */
-    /* Ensure it stays on top */
+    top: 20px;
+    left: 3vw;
+    right: 3vw;
+    padding-left: 5px;
+    padding-right: 5px;
+    height: 40px;
   }
-
-  .fixed-box a {
-    text-decoration: none; /* Remove underline */
-    color: var(--background-color-one); /* Text color */
+
+  .fixed-box button {
+    height: 25px;
+    width: 25px;
+    background-color: transparent;
+    border: 1px solid var(--background-color-one);
+
   }
+
+  .fixed-box a.center-text {
+    text-decoration: none;
+  }
+
 
   h2 {
     padding-top: 75px;