[website] Fixed navbar, added mobile menu, prevent codebox from going off screen on mobile / smaller screens. (#328)

* Update index.html

Signed-off-by: abhiram v <106994329+abhiramtx@users.noreply.github.com>

* Update style.css

Signed-off-by: abhiram v <106994329+abhiramtx@users.noreply.github.com>

---------

Signed-off-by: abhiram v <106994329+abhiramtx@users.noreply.github.com>

Author: abhiramtx

website/source/css/style.css

@@ -1,11 +1,23 @@
-@media (max-width: 768px) {
+
+
+@media only screen and (max-width: 800px) {
     .nav-buttons {
         display: none; /* Hides the navigation buttons */
     }
+    #menu-button {
+        display: block!important;
+    }
+    .nav-buttons {
+        display: none!important; /* Hides the navigation buttons */
+    }
 
     /* You can also hide the logo if needed */
     .logo {
-        display: none; /* Hides the logo */
+        display: block; /* Hides the logo */
+    }
+
+    .logo img {
+        width: 100px!important;
     }
 
     /* Stack columns in section 1 */
@@ -19,19 +31,31 @@
         width: 80%; /* Make image responsive */
         margin-bottom: 20px; /* Add some space below the image */
     }
+
+    .expand-box {
+        width: 90%!important;
+    }
 }
 
 /* General Reset */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    /* overflow-x: hidden; */
+}
+
+#menu-button {
+    background-color: rgba(107, 0, 0, 0);
+    color: white;
+    border: none;
 }
 
 body {
     font-family: 'IBM Plex Sans', sans-serif;
     background-color: #121212;
     color: #ffffff;
+    overflow-x: hidden;
 }
 
 /* Sticky Header */
@@ -44,8 +68,9 @@ header {
     border-bottom: 1px solid #333;
     position: sticky;
     top: 0;
-    z-index: 1000;
+    z-index: 10000000000000000000000000000000000000;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); /* Added shadow for the header */
+    height: 65px;
 }
 
 .logo-section {
@@ -467,4 +492,20 @@ a {
     font-size: 14px; /* Font size for author */
     color: #aaa; /* Slightly lighter color for author */
     margin: 0;
-}
+}
+
+.menu {
+    top: 65px;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.767);
+    backdrop-filter: blur(10px);
+    margin: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10%;
+}

website/source/index.html

@@ -28,7 +28,42 @@ <h1 style="font-family: 'Fira Code', monospace; cursor: pointer;" onclick="scrol
                 <i data-feather="download" class="icon"></i> Install
             </button>
         </div>
+
+        <button onclick="openorclose();" class=" filled-btn" id="menu-button" style="display: none">
+            <i data-feather="more-vertical" class="icon"></i>
+        </button>
+
+        <div class="menu" style="display: none" id="menu">
+            <button onclick="openwin('https://github.com/TimMcCool/scratchattach/wiki/Documentation', '_blank');" class="">
+            </i>Documentation
+        </button>
+        <button onclick="openwin('https://github.com/TimMcCool/scratchattach/', '_blank');" class="">
+            <i data-feather="github" class="icon"></i> Source
+        </button>
+        <button onclick="scrollToSection('installation');" class="filled-btn">
+            <i data-feather="download" class="icon"></i> Install
+        </button>
+        </div>
     </header>
+
+    <script>
+    let open = 0;
+    function openorclose() {
+        if (open === 0) {
+            document.getElementById('menu').style = "display: flex;";
+            open = 1;
+        } else { 
+            document.getElementById('menu').style = "display: none;";
+            open = 0;
+        }
+    }
+
+    function openwin(win, target) {
+        window.open(win, target);
+    }
+    </script>
+
+
     <div class="background-container">
         <div class="background-image"></div> <!-- New div for the background image -->
         <section class="section-1" id="intro">
@@ -242,6 +277,8 @@ <h2 style="padding-top:20px">Community Projects</h2>
             const section = document.getElementById(sectionId);
             const elementPosition = section.getBoundingClientRect().top + window.scrollY; // Add current scroll position
             window.scrollTo({ behavior: 'smooth', top: elementPosition-75});
+            document.getElementById('menu').style = "display: none;";
+            open = 0;
         }
 
     </script>