Final

Someshdiwan · Someshdiwan · commit dc5a5cade6c8 · 2025-04-07T04:57:28.000+05:30
diff --git a/site/_layouts/default.html b/site/_layouts/default.html
@@ -6,25 +6,7 @@
   <title>{{ page.title }}</title>
   <link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
 
-  <!-- Dark Mode Toggle Button -->
-  <style>
-    .dark-toggle {
-      position: fixed;
-      top: 1rem;
-      right: 1rem;
-      z-index: 1000;
-      background: var(--sidebar-bg);
-      color: var(--text-color);
-      border: none;
-      padding: 0.5rem 0.75rem;
-      border-radius: 8px;
-      cursor: pointer;
-      font-size: 1.2rem;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
-      transition: background 0.3s ease;
-    }
-  </style>
-
+  <!-- Dark mode script -->
   <script>
     const toggleDarkMode = () => {
       document.body.classList.toggle('dark-mode');
@@ -36,26 +18,33 @@
         document.body.classList.add('dark-mode');
       }
     };
+  </script>
 
+  <!-- Sidebar toggle script -->
+  <script>
     function toggleSidebar() {
       const sidebar = document.getElementById("sidebar");
+      const content = document.querySelector(".content");
+
       sidebar.classList.toggle("hidden");
+      content.classList.toggle("expanded");
     }
   </script>
 </head>
 
 <body>
-<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
+<!-- Dark mode button -->
+<button class="dark-toggle-btn" onclick="toggleDarkMode()">🌓</button>
 
 <div class="wrapper">
   <div id="sidebar" class="sidebar">
     {% include nav.html %}
   </div>
-
   <div class="content fade-in">
+    <!-- Sidebar toggle button -->
     <button class="toggle-btn" onclick="toggleSidebar()">☰</button>
     {{ content }}
   </div>
 </div>
 </body>
-</html>
+</html>
diff --git a/site/assets/style.css b/site/assets/style.css
@@ -60,6 +60,7 @@ body {
 
 
 */
+
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
@@ -77,32 +78,112 @@ body {
 body {
   background-color: var(--bg-color);
   color: var(--text-color);
+  margin: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.wrapper {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .sidebar {
   width: 260px;
   padding: 1rem;
-  position: fixed;
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid #ccc;
   background-color: var(--sidebar-bg);
-  transition: all 0.3s ease;
+  border-right: 1px solid #ccc;
+  overflow-y: auto;
+  transition: transform 0.3s ease-in-out;
+}
+
+.sidebar.hidden {
+  transform: translateX(-100%);
 }
 
 .sidebar a {
   display: block;
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   border-radius: 0.5rem;
-  text-decoration: none;
-  color: var(--link-color);
 }
 
 .sidebar a:hover {
   background-color: rgba(0, 0, 0, 0.05);
 }
 
+.content {
+  flex: 1;
+  padding: 2rem;
+  transition: margin-left 0.3s ease-in-out;
+  margin-left: 260px;
+}
+
+.sidebar.hidden + .content,
+.content.expanded {
+  margin-left: 0;
+}
+
+/* Mobile adjustments */
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    z-index: 999;
+    transform: translateX(-100%);
+  }
+
+  .sidebar.show {
+    transform: translateX(0);
+  }
+
+  .content {
+    margin-left: 0;
+  }
+}
+
+.toggle-btn {
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  position: fixed;
+  top: 1rem;
+  left: 1rem;
+  z-index: 1000;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
+/* Dark mode toggle button */
+.dark-toggle-btn {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 1000;
+  font-size: 1.5rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--text-color);
+}
+
+/* Fade-in animation for content */
 .fade-in {
   animation: fadeIn 0.4s ease-in;
-}
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
