Merge pull request #1198 from shreyash3087/fix/responsiveness

recodehive · Aug 27, 2024 · f84e9a1 · f84e9a1
2 parents cfe41bb + 276b910
commit f84e9a1
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 2 deletions.
diff --git a/Website/index.html b/Website/index.html
@@ -25,6 +25,7 @@
                 <li><a href="/organization">Organization</a></li>
                 <li><a href="/faq">FAQ</a></li>
                 <li><a href="/contact">Contact</a></li>
+                <div class="nav-icons">
                 <li>
                     <a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
                         <img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
@@ -35,7 +36,13 @@
                         <i class="fas fa-moon"></i> 
                     </button>
                 </li>
+            </div>
             </ul>
+            <div class="line" id="line">
+                <div class="bar1"></div>
+                <div class="bar2"></div>
+                <div class="bar3"></div>
+            </div>
         </nav>
     </header>
 

diff --git a/Website/js/script.js b/Website/js/script.js
@@ -365,3 +365,12 @@ toggleDarkModeButton.addEventListener('click', () => {
         localStorage.setItem('theme', 'light');
     }
 });
+function hamburger() {
+    const line = document.getElementById("line");
+    const navLinks = document.querySelector(".nav-links");
+
+    line.classList.toggle("change");
+    navLinks.classList.toggle("active");
+}
+
+document.getElementById("line").addEventListener("click", hamburger);
diff --git a/Website/styles.css b/Website/styles.css
@@ -101,6 +101,69 @@ header {
     right: 10px;
     /* Adjust this value for the gap between logo and links */
 }
+.line {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+.line div {
+    width: 25px;
+    height: 3px;
+    background-color: #fff;
+    margin: 4px 0;
+    transition: 0.4s;
+}
+
+/* Hamburger Active State */
+.change .bar1 {
+    transform: rotate(-45deg) translate(-10px, 8px);
+}
+
+.change .bar2 {
+    opacity: 0;
+}
+
+.change .bar3 {
+    transform: rotate(45deg) translate(-5px, -6px);
+}
+.nav-icons{
+    display: flex;
+    gap:20px;
+}
+/* Responsive */
+@media (max-width: 1024px) {
+    .nav-links {
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        padding:10px;
+        top: 40px;
+        right: 0;
+        gap: 10px;
+        width: 100%;
+        background-color: #13034f;
+        opacity: 0;
+        visibility: hidden;
+        transform: translateY(-20px);
+        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+    }
+
+    .nav-links.active {
+        opacity: 1;
+        visibility: visible;
+        transform: translateY(0);
+    }
+
+    .nav-links li {
+        margin: 10px 0;
+    }
+
+    .line {
+        display: flex;
+    }
+}
+
 
 .nav-links a {
     text-decoration: none;
@@ -249,6 +312,7 @@ button#toggle-stats:hover {
     justify-content: center;
     align-items: center;
     animation: slide-in-right 0.5s ease-in-out;
+    flex-wrap: wrap;
 }
 
 .text-base{
@@ -338,7 +402,20 @@ button#toggle-stats:hover {
     margin-bottom: 8px;
     width:300px;
 }
-
+@media (max-width: 560px) {
+    .chart-container {
+        width:120px;
+    }
+    .legend span {
+        width:170px;
+    }
+    .progress-bar-container{
+        width:200px;
+    }
+    .progress-bar {
+        width: 200px;
+    }
+}
 .legend span::before {
     content: '';
     display: inline-block;
@@ -460,7 +537,6 @@ button#toggle-languages:hover {
     background-color: #2a2a7e;
 }
 
-
 @media (max-width: 768px) {
     .card {
         flex: 1 1 calc(50% - 20px);