Updated

Someshdiwan · Someshdiwan · commit a6facf1e7543 · 2025-04-07T04:53:41.000+05:30
diff --git a/site/_layouts/default.html b/site/_layouts/default.html
@@ -1,40 +1,61 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{ page.title }}</title>
-    <link rel="stylesheet" href="{{ "/assets/style.css" | relative_url }}">
-    <script>
-      function toggleSidebar() {
-        const sidebar = document.getElementById("sidebar");
-        sidebar.classList.toggle("hidden");
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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>
+
+  <script>
+    const toggleDarkMode = () => {
+      document.body.classList.toggle('dark-mode');
+      localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
+    };
+
+    window.onload = () => {
+      if (localStorage.getItem('dark-mode') === 'true') {
+        document.body.classList.add('dark-mode');
       }
-    </script>
-    <script>
-      const toggleDarkMode = () => {
-        document.body.classList.toggle('dark-mode');
-        localStorage.setItem('dark-mode', document.body.classList.contains('dark-mode'));
-      };
+    };
+
+    function toggleSidebar() {
+      const sidebar = document.getElementById("sidebar");
+      sidebar.classList.toggle("hidden");
+    }
+  </script>
+</head>
+
+<body>
+<button class="dark-toggle" onclick="toggleDarkMode()">🌓</button>
 
-      window.onload = () => {
-        if (localStorage.getItem('dark-mode') === 'true') {
-          document.body.classList.add('dark-mode');
-        }
-      };
-    </script>
-    <button onclick="toggleDarkMode()" style="position: fixed; top: 1rem; right: 1rem;">🌓</button>
+<div class="wrapper">
+  <div id="sidebar" class="sidebar">
+    {% include nav.html %}
+  </div>
 
-  </head>
-  <body>
-    <div class="wrapper">
-      <div id="sidebar" class="sidebar">
-        {% include nav.html %}
-      </div>
-      <div class="content">
-        <button class="toggle-btn" onclick="toggleSidebar()">☰</button>
-        {{ content }}
-      </div>
-    </div>
-  </body>
+  <div class="content fade-in">
+    <button class="toggle-btn" onclick="toggleSidebar()">☰</button>
+    {{ content }}
+  </div>
+</div>
+</body>
 </html>
diff --git a/site/assets/style.css b/site/assets/style.css
@@ -60,7 +60,6 @@ body {
 
 
 */
-
 :root {
   --bg-color: #ffffff;
   --text-color: #000000;
@@ -80,21 +79,14 @@ body {
   color: var(--text-color);
 }
 
-.sidebar {
-  background-color: var(--sidebar-bg);
-}
-
-a {
-  color: var(--link-color);
-}
-
 .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;
 }
 
@@ -104,23 +96,13 @@ a {
   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);
 }
 
-<style>
 .fade-in {
   animation: fadeIn 0.4s ease-in;
-}
-
-@keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-</style>
-
-<div class="content fade-in">
-  {{ content }}
-</div>
+}
