Fix footer issue

Author: Mitesh-V-Chauhan

assets/style.css

@@ -1,4 +1,3 @@
-
 :root {
   --bg: #0a0a0a;
   --card: #1a1a1a;
@@ -20,9 +19,7 @@
 * {
   box-sizing: border-box;
 }
-html,
-body,
-#content {
+html {
   height: 100%;
 }
 body {
@@ -34,11 +31,13 @@ body {
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
   line-height: 1.7;
+  position: relative;
+  min-height: 100vh;
+  padding-bottom: 150px; /* Footer height */
 }
 
 .site {
   display: flex;
-  min-height: 100vh;
 }
 
 @media (max-width: 900px) {
@@ -163,8 +162,8 @@ body {
   flex-direction: column;
   gap: 20px;
   position: sticky;
-  top: 0;
-  height: 100vh;
+  top: 65px; /* Match navbar height */
+  height: calc(100vh - 65px);
   overflow: auto;
 }
 .sidebar.collapsed {
@@ -310,7 +309,6 @@ body {
 }
 
 .content {
-  flex: 1;
   padding: 48px;
   display: flex;
   justify-content: center;
@@ -426,8 +424,18 @@ mark {
 }
 
 .site-footer {
+    padding: 12px 12px;
+    border-top: 1px solid var(--card);
+    margin-top: 10px;
+    text-align: center;
+    color: var(--muted);
+}
+
+.site-footer-projects {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
     padding: 48px 24px;
-    margin-top: 64px;
     border-top: 1px solid var(--card);
     text-align: center;
     color: var(--muted);
@@ -496,4 +504,4 @@ mark {
 
 [data-theme='light'] .footer-links a:hover {
     color: var(--accent);
-}
+}

projects.html

@@ -223,7 +223,7 @@ <h1>Project Explorer</h1>
     </div>
   </main>
 
-  <footer class="site-footer">
+  <footer class="site-footer-project">
       <div class="footer-inner">
         <div class="footer-links">
           <a href="index.html#what-is-hacktoberfest">Overview</a>