navbar

mathieukvogt · Sep 9, 2024 · fab9b51 · fab9b51
1 parent 3097272
commit fab9b51
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -32,8 +32,9 @@
 
   <body>
     <header>
-      <h1 id="top">JAVASCRIPT SYNTAX NOTES</h1>
-      <p>Content last updated on 09/09/2024 by <em>Mathieu</em></p>
+      <div class="fixed-box">
+        <a href="#top"><b>Javascript</b></a>
+      </div>
     </header>
     <main>
       <section id="elements">
@@ -64,6 +65,7 @@ <h2>Index</h2>
       <br>
       <hr />
       <br />
+      <p>Content last updated on 09/09/2024 by <em>Mathieu</em></p>
       <br />
       <table>
         <tbody>
@@ -10815,32 +10817,26 @@ <h4><u>Specifications</u></h4>
               <br />
             </td>
           </tr>
-
-
+          <tr>
             <td id="data-types" class="tableletters">Data Types</td>
           </tr>
           <tr>
-            <td
-              class="clickable"
-              onclick="toggleDetail('detail-tag-data-types', event)"
-            >Data Types
-            </td>
+            <td class="clickable" onclick="toggleDetail('detail-tag-data-types', event)">Data Types</td>
           </tr>
           <tr id="detail-tag-data-types" class="expandable-row-content">
             <td>
               <h3>7 primitive data types & objects</h3>
               <p>JavaScript has a variety of data types that can be categorized into primitive types and objects. Primitive types are immutable and compared by value, while objects are mutable and compared by reference.</p>
               <ol>
-                <li>String: Represents text and is enclosed in quotes.</li>
-                <li>Number: Represents both integers and floating-point numbers.</li>
-                <li>Boolean: Represents true or false values.</li>
-                <li>Boolean: Represents true or false values.</li>
-                <li>Null: Represents the intentional absence of any object value.</li>
-                <li>Symbol: Represents a unique identifier created using the Symbol function.</li>
-                <li>BigInt: Represents integers larger than the maximum safe integer limit for Number.</li>
-                <li>Object: A complex data type that allows you to store collections of data in key-value pairs.</li>
+                 <li>String: Represents text and is enclosed in quotes.</li>
+                 <li>Number: Represents both integers and floating-point numbers.</li>
+                 <li>Boolean: Represents true or false values.</li>
+                 <li>Boolean: Represents true or false values.</li>
+                 <li>Null: Represents the intentional absence of any object value.</li>
+                 <li>Symbol: Represents a unique identifier created using the Symbol function.</li>
+                 <li>BigInt: Represents integers larger than the maximum safe integer limit for Number.</li>
+                 <li>Object: A complex data type that allows you to store collections of data in key-value pairs.</li>
               </ol>
-
               <h4><u>Specifications</u></h4>
               <pre>
            <code class="language-js">
@@ -10892,7 +10888,7 @@ <h4><u>Specifications</u></h4>
   title: "JavaScript: The Good Parts",
   author: "Douglas Crockford"
 };
-</code></pre>
+              </code></pre>
               <br />
             </td>
           </tr>        

diff --git a/main.css b/main.css
@@ -11,7 +11,7 @@ body.dark-mode {
   --background-color-one: #ededed;
   --color-one: #0f0f0f;
   --background-color-two: #424242;
-  --color-two: #c7d4ff;
+  --color-two: #b8c5e0;
   --color-three: #2d2d2d;
   --color-four: #ededed;
 }
@@ -36,18 +36,28 @@ body {
   background-color: var(--color-one);
 }
 
-h1 {
-  font-size: 40px;
-  text-align: left;
-  padding-top: 40px;
-  padding-bottom: 20px;
-  overflow: hidden;
-  color: var(--background-color-one);
+.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 */
+  display: flex;
+  justify-content: center; /* Horizontally center the text */
+  align-items: center; /* Vertically center the text */
+  z-index: 1000; /* Ensure it stays on top */
+}
+
+.fixed-box a {
+  text-decoration: none; /* Remove underline */
+  color: var(--background-color-one); /* Text color */
 }
 
 h2 {
   font-size: 20px;
-  padding-top: 20px;
+  padding-top: 90px;
   padding-bottom: 20px;
   text-align: left;
   overflow: hidden;
@@ -184,12 +194,22 @@ td {
     padding-right: 3vw;
   }
 
-  h1 {
-    font-size: 22px;
-    text-align: left;
-    padding-top: 30px;
-    overflow: hidden;
-    color: var(--background-color-one);
+  .fixed-box {
+    top: 15px; /* 5px from the top */
+    left: 3vw; /* 5px from the left */
+    right: 3vw; /* 5px from the right */
+    height: 30px; /* Fixed height */
+    border: 1px solid var(--background-color-one); /* Black border of 0.5px */
+    /* Ensure it stays on top */
+  }
+
+  .fixed-box a {
+    text-decoration: none; /* Remove underline */
+    color: var(--background-color-one); /* Text color */
+  }
+
+  h2 {
+    padding-top: 70px;
   }
   .ascii-art-desktop {
     display: none;