Merge pull request #324 from abhiramtx/main

[website] fixed navbar and added a new mobile menu. also fixed the codeboxes going off screen in the getting started section.

Author: FAReTek1

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 */
@@ -26,12 +38,20 @@
     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 +64,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: 6vh;
 }
 
 .logo-section {
@@ -467,4 +488,20 @@ a {
     font-size: 14px; /* Font size for author */
     color: #aaa; /* Slightly lighter color for author */
     margin: 0;
+}
+
+.menu {
+    top: 6vh;
+    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">
@@ -171,19 +206,19 @@ <h3>... and more!</h3>
         <div class="content">
             <h2 style="padding-top:20px">Getting started</h2>
             <p style="margin-bottom:20px">Log in with your Scratch account:</p>
-            <div class="expand-box" data-width="700px" id="logInCmd">
+            <div class="expand-box" data-width="90%" id="logInCmd">
                 <p id="expandText0" data-text="import scratchattach as sa" margin="0"></p>
                 <p id="expandText1" data-text="session = sa.login('username', 'password')" margin="0"></p>
             </div>                    
             <p style="margin-bottom:20px">Set and get cloud variables anytime:</p>
-            <div class="expand-box" data-width="700px" id="cloudCmd">
+            <div class="expand-box" data-width="90%" id="cloudCmd">
                 <p id="expandText0" data-text="cloud = session.connect_cloud('project_id')"></p>
                 <p id="expandText1" data-text="‎"></p>
                 <p id="expandText2" data-text="cloud.set_var('variable', 'value')"></p>
                 <p id="expandText3" data-text="cloud.get_var('variable')"></p>
             </div>                    
             <p style="margin-bottom:20px">Follow users, love their projects and comment:</p>
-            <div class="expand-box" data-width="700px" id="siteCmd">
+            <div class="expand-box" data-width="90%" id="siteCmd">
                 <p id="expandText0" data-text="user = session.connect_user('username')"></p>
                 <p id="expandText1" data-text="user.follow()"></p>
                 <p id="expandText2" data-text="‎"></p>
@@ -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>