Updated all the webpages to add the scroll element to the navigation bar

Meet-Vyas-Dev · Jul 14, 2024 · 92743d5 · 92743d5
1 parent 7b56dd6
commit 92743d5
Show file tree

Hide file tree

Showing 7 changed files with 231 additions and 9 deletions.
diff --git a/about.html b/about.html
@@ -361,6 +361,33 @@
         }
     }
 
+	.scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
+
 </style>
 
 
@@ -381,6 +408,7 @@
                     <div class="row no-gutters">
                         <div class="col-md-12 text-center">
 							<h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
+							<div class="scroll-wrapper">
                             <ul>
                                 <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                                 <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -391,7 +419,7 @@ <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
                                 <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
 								<li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
                                 <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
-								
+
                             </ul>
                         </div>
                     </div>

diff --git a/blog.html b/blog.html
@@ -60,6 +60,31 @@
     .blog-entry:hover .block-20 {
       transform: scale(1.1); /* Scale the image on hover (change the value as needed) */
     }
+    .scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
 
     </style>
 
@@ -83,6 +108,7 @@
                 <div class="row no-gutters">
                     <div class="col-md-12 text-center">
           <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
+          <div class="scroll-wrapper">
                         <ul>
                             <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                             <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -92,8 +118,8 @@ <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
                             <li><a target="_blank" href="blog.html"><span><small>06</small>Blog</span></a></li>                                
                             <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                             <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
-                            <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
-                            
+                            <li><a target="_blank" href="tuner.html"><span><small>09</small>Tuner (Beta)</span></a></li>     
+
                         </ul>
                     </div>
                 </div>

diff --git a/comp.html b/comp.html
@@ -60,6 +60,32 @@
       transform: scale(1.1); /* Scale the image on hover (change the value as needed) */
     }
 
+    .scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
     </style>
 
 
@@ -80,6 +106,7 @@
                 <div class="row no-gutters">
                     <div class="col-md-12 text-center">
           <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
+          <div class="scroll-wrapper">
                         <ul>
                             <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                             <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -89,7 +116,7 @@ <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
                             <li><a target="_blank" href="blog.html"><span><small>06</small>Blog</span></a></li>                                
                             <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                             <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
-                            <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
+                            <li><a target="_blank" href="tuner.html"><span><small>09</small>Tuner (Beta)</span></a></li>     
                         </ul>
                     </div>
                 </div>

diff --git a/index.html b/index.html
@@ -186,6 +186,32 @@
     color: #fff; /* Icon color to match the text */
 }
 
+.scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
 /* Mobile responsiveness */
 @media (max-width: 768px) {
     .colorlib-navbar-brand {
@@ -229,6 +255,37 @@
                     <div class="row no-gutters">
                         <div class="col-md-12 text-center">
                             <h1 class="mb-4"><a href="index.html" class="logo" style="color: #fff">Meet Vyas</a></h1>
+                              <div class="KW_progressContainer">
+            <div class="KW_progressBar">
+            </div>
+        </div>
+        <div class="page">
+            <nav id="colorlib-main-nav" role="navigation">
+                <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
+                <div class="js-fullheight colorlib-table">
+                    <div class="img" style="background-image: url(pics/background.jpg);"></div>
+                    <div class="colorlib-table-cell js-fullheight">
+                        <div class="row no-gutters">
+                            <div class="col-md-12 text-center">
+                                <h1 class="mb-4"><a href="index.html" class="logo" style="color: #fff">Meet Vyas</a></h1>
+                                <div class="scroll-wrapper">
+                                <ul>
+                                    <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
+                                    <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
+                                    <li><a target="_blank" href="physics.html"><span><small>03</small>Physics</span></a></li>
+                                    <li><a target="_blank" href="comp.html"><span><small>04</small>Computer Science</span></a></li>
+                                    <li><a target="_blank" href="projects.html"><span><small>05</small>Course Projects</span></a></li>
+                                    <li><a target="_blank" href="blog.html"><span><small>06</small>Blog</span></a></li>                                
+                                    <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
+                                    <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
+                                    <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
+
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
                             <ul>
                                 <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                                 <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -239,6 +296,7 @@ <h1 class="mb-4"><a href="index.html" class="logo" style="color: #fff">Meet Vyas
                                 <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                                 <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
                                 <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
+
                             </ul>
                         </div>
                     </div>

diff --git a/physics.html b/physics.html
@@ -60,6 +60,32 @@
       transform: scale(1.1); /* Scale the image on hover (change the value as needed) */
     }
 
+    .scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
     </style>
 
 
@@ -80,6 +106,7 @@
                     <div class="row no-gutters">
                         <div class="col-md-12 text-center">
 							<h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
+              <div class="scroll-wrapper">
                             <ul>
                                 <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                                 <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -89,8 +116,8 @@ <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
                                 <li><a target="_blank" href="blog.html"><span><small>06</small>Blog</span></a></li>                                
                                 <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                                 <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
-                                <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
-                                
+                                <li><a target="_blank" href="tuner.html"><span><small>09</small>Tuner (Beta)</span></a></li>     
+
                             </ul>
                         </div>
                     </div>

diff --git a/projects.html b/projects.html
@@ -59,6 +59,32 @@
       transform: scale(1.1); /* Scale the image on hover (change the value as needed) */
     }
 
+    .scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
     </style>
 
 
@@ -79,6 +105,7 @@
                 <div class="row no-gutters">
                     <div class="col-md-12 text-center">
           <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
+          <div class="scroll-wrapper">
                         <ul>
                             <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                             <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -88,8 +115,8 @@ <h1 class="mb-4"><a href="index.html" class="logo">Meet Vyas</a></h1>
                             <li><a target="_blank" href="blog.html"><span><small>06</small>Blog</span></a></li>                                
                             <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                             <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
-                            <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
-                            
+                            <li><a target="_blank" href="tuner.html"><span><small>09</small>Tuner (Beta)</span></a></li>     
+
                         </ul>
                     </div>
                 </div>

diff --git a/references.html b/references.html
@@ -39,6 +39,34 @@
     <link rel="stylesheet" href="css/icomoon.css">
     <link rel="stylesheet" href="css/style-about.css">
 
+<style>
+    .scroll-wrapper {
+    max-height: 70vh; /* Adjust this value as needed */
+    overflow-y: auto;
+    padding-right: 15px; /* To prevent content from touching the scrollbar */
+  }
+
+  /* For WebKit browsers (Chrome, Safari) */
+  .scroll-wrapper::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .scroll-wrapper::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+  }
+
+  /* For Firefox */
+  .scroll-wrapper {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
+  }
+
+</style>
     <body>
         <div class="KW_progressContainer">
             <div class="KW_progressBar">
@@ -53,6 +81,7 @@
                         <div class="row no-gutters">
                             <div class="col-md-12 text-center">
                                 <h1 class="mb-4"><a href="index.html" class="logo" style="color: #fff">Meet Vyas</a></h1>
+                                <div class="scroll-wrapper">
                                 <ul>
                                     <li><a target="_blank" href="index.html"><span><small>01</small>Home</span></a></li>
                                     <li><a target="_blank" href="about.html"><span><small>02</small>About</span></a></li>
@@ -63,7 +92,7 @@ <h1 class="mb-4"><a href="index.html" class="logo" style="color: #fff">Meet Vyas
                                     <li><a target="_blank" href="https://meet-vyas.notion.site/2096f14202de434995ea109d4381ca71?v=227db1b3a43446a98e2aaa79d7ff9461&pvs=4"><span><small>07</small>Reading List</span></a></li>
                                     <li><a target="_blank" href="references.html"><span><small>08</small>References & Textbooks </span></a></li>     
                                     <li><a target="_blank" href="tuner.html"><span><small>08</small>Tuner (Beta)</span></a></li>     
-                                     
+
                                 </ul>
                             </div>
                         </div>