updated header, made index page unscrollable since no need + the blob will made it scroll

3 files changed, 27 insertions, 17 deletions

diff --git a/src/css/index.css b/src/css/index.css
index 633ac01a..09dbb508 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -6,7 +6,8 @@
     width: 100%;
     top: 0;
     left: 0;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: fixed;
     -ms-overflow-style: none;
     scrollbar-width: none;
     z-index: -6;
@@ -15,6 +16,7 @@
     display: none;
 }
 
+
 /* main info window ======================================= */
 .indexPage {
     overflow: hidden;
diff --git a/src/css/style.css b/src/css/style.css
index 3e6ab521..5d277551 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,5 @@
 :root {
-    --topBarHeight: 3em;
+    --topBarHeight: 5em;
     --neon-bg-color: #05010d
 }
 
@@ -327,31 +327,37 @@ body::-webkit-scrollbar {
 
 header {
     position: fixed;
-    top: 0;
+    top: 2rem;
     left: 0;
-    width: 100%;
-    height: 3em;
+    width: 75%;
+    margin-left: 12.5%;
+    height: var(--topBarHeight);
     justify-content: space-between;
     align-items: center;
+    text-align: center;
     /* background: color(0, 0, 0, .1); */
     z-index: 1000;
-    background: rgba(0, 0, 0, 0.2);
+    /* background: rgba(0, 0, 0, 0.2); */
+    background-color: #000;
+    border-radius: 32px;
     transition: all 0.3s;
 }
 
 .navBar a {
     position: relative;
     height: 100%;
-    font-size: 5mm;
+    text-align: center;
+    font-size: 2rem;
     text-transform: capitalize;
     text-align: center;
     text-decoration: none;
-    margin-left: 5mm;
-    margin-right: 5mm;
-    padding-top: 3mm;
-    padding-bottom: 3mm;
-    border-radius: 8px;
+    margin-left: 10mm;
+    margin-right: 10mm;
+    padding-top: 5mm;
+    /* padding-bottom: 3mm; */
+    border-radius: 32px;
     color: #F4E8C1;
+    transition: all .3s
 }
 
 .navBar .hleft a {float: left;}
@@ -449,13 +455,16 @@ a:hover {
     text-underline-offset: 1px;
     position: relative;
     height: 100%;
-    font-size: 5mm;
+    /* font-size: 5mm; */
     text-transform: capitalize;
     text-align: center;
+    /* start */
     margin-left: 5mm;
     margin-right: 5mm;
     padding-top: 3mm;
     padding-bottom: 3mm;
+    /* end
+    these lines will make it more appearence and jigully when hovered */
     font-weight: bold;
     -webkit-transition: all .5s;
     transition: all .5s;
diff --git a/src/js/header.js b/src/js/header.js
index fe13c4ed..c04a0f6d 100644
--- a/src/js/header.js
+++ b/src/js/header.js
@@ -1,9 +1,8 @@
 let header = document.querySelector('[header]');
-let newElement = document.createElement('div');
+let mainHeader = document.createElement('div');
 let page = header.getAttribute('page');
 
-// console.log(page);
-newElement.innerHTML = `
+mainHeader.innerHTML = `
 <!-- header -->
 <header id="navBarHeader">
 	<nav class="navBar">
@@ -18,5 +17,5 @@ newElement.innerHTML = `
 </header>
 `;
 
-header.appendChild(newElement);
+header.appendChild(mainHeader);
 document.getElementById("btn"+page).setAttribute('class', 'active');