updated layout

ayush-848 · Aug 24, 2024 · 1702675 · 1702675
1 parent c685b84
commit 1702675
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 3 deletions.
diff --git a/public/css/style.css b/public/css/style.css
@@ -468,10 +468,60 @@ img {
 }
 
 /* Footer */
+
+
 .footer {
-    margin: 4rem;
+    padding: 20px 0;
+    margin-top: 40px;
+    border-top: 1px solid #e7e7e7;
+  }
+
+  .footer__nav {
+    margin-bottom: 15px;
+  }
+
+  .footer__nav-list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  .footer__nav-item {
+    margin: 0 15px;
+  }
+
+  .footer__nav-link {
+    text-decoration: none;
+    color: #555;
+    font-weight: 500;
+    transition: color 0.3s ease;
+  }
+
+  .footer__nav-link:hover {
+    text-decoration: underline;
+    color: #333;
+  }
+
+
+  .footer__copyright {
     text-align: center;
-}
+    margin: 0;
+    font-size: 0.9em;
+    color: #666;
+  }
+
+  @media screen and (max-width: 768px) {
+    .footer__nav-list {
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .footer__nav-item {
+      margin: 10px 0;
+    }
+  }
 
 /* search bar */
 .searchBar {

diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
@@ -1,3 +1,19 @@
 <footer class="footer">
-  &copy; <%- new Date().getFullYear(); %> Ayush | With NodeJs & MongoDB
+  <nav class="footer__nav">
+    <ul class="footer__nav-list">
+      <li class="footer__nav-item">
+        <a href="/changelog" class="footer__nav-link <%= isActiveRoute('/changelog', currentRoute) %>">Changelog</a>
+      </li>
+      <li class="footer__nav-item">
+        <a href="https://github.com/ayush-848/MyDay" class="footer__nav-link <%= isActiveRoute('https://github.com/ayush-848/MyDay', currentRoute) %>">Github</a>
+      </li>
+      <% if(username) { %>
+        <li class="footer__nav-item">
+
+          <a href="/about" class="footer__nav-link <%= isActiveRoute('/about', currentRoute) %>">About</a>
+        </li>
+        <% } %>
+    </ul>
+  </nav>
+  <p class="footer__copyright">&copy; <%- new Date().getFullYear(); %> Ayush | With NodeJs & MongoDB</p>
 </footer>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -6,9 +6,12 @@
             <li>
                 <a href="/" class="<%= isActiveRoute('/', currentRoute) %>">Home</a>
               </li>
+              <% if(!username) { %>
               <li>
+
                 <a href="/about" class="<%= isActiveRoute('/about', currentRoute) %>">About</a>
               </li>
+              <% } %>
               <li>
                 <a href="/contact" class="<%= isActiveRoute('/contact', currentRoute) %>">Contact</a>
               </li>