Add navigation menu

daschi · Dec 17, 2023 · 61d5dd5 · 61d5dd5
1 parent 69e9481
commit 61d5dd5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 8 deletions.
diff --git a/_includes/head.html b/_includes/head.html
@@ -86,7 +86,7 @@
     href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200&display=swap"
     rel="stylesheet"
   />
-   <!-- Poppins Font -->
+  <!-- Poppins Font -->
   <link
     href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap"
     rel="stylesheet"

diff --git a/_layouts/main.html b/_layouts/main.html
@@ -3,7 +3,7 @@
 ---
 
 <aside class="sidebar">
-  <header>
+  <header class="about-header">
     <div class="about">
       <div class="cover-author-image">
         <a href="{{site.baseurl}}/"
@@ -16,8 +16,20 @@
       <p>{{site.about-author}}</p>
     </div>
   </header>
+  <section class="navigation-menu">
+    <div>
+      <ul>
+        <li>
+          <a href="{{ site.baseurl }}/itinerary">Itinerary</a>
+        </li>
+        <li>
+          <a href="{{ site.baseurl }}/">Posts</a>
+        </li>
+      </ul>
+    </div>
+  </section>
   <!-- End Header -->
-  <footer>
+  <footer class="footer">
     <section class="contact">
       <h3 class="contact-title">Message us</h3>
       <ul>

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -941,18 +941,19 @@ table tfoot td {
 /* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
 .sidebar {
   display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
+  display: -webkit-grid;
+  display: -ms-grid;
+  display: grid;
+  grid-template-rows: 1fr 1fr 1fr;
+  /* -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
-  justify-content: space-between;
+  justify-content: space-between; */
   position: fixed;
   top: 0;
   left: 0;
@@ -963,6 +964,10 @@ table tfoot td {
   background-color: #ffffff;
 }
 
+.about-header {
+  grid-area: 1;
+}
+
 .about {
   margin: 0 0 40px;
   text-align: center;
@@ -1127,6 +1132,10 @@ footer .copyright {
   margin: 0;
 }
 
+footer.footer {
+  grid-area: 4;
+}
+
 .post {
   width: 100%;
   max-width: 100%;
@@ -1477,6 +1486,7 @@ a.newer-posts:hover {
   .sidebar footer {
     margin-bottom: 10px;
   }
+
   .about {
     text-align: center;
     max-width: 480px;
@@ -1546,3 +1556,16 @@ a.newer-posts:hover {
 #itinerary-title {
   width: 100%;
 }
+
+.navigation-menu {
+  grid-area: 2;
+  ul {
+    list-style-type: none;
+  }
+  ul > li > a {
+    text-decoration: none;
+    &:active {
+      color: #145369;
+    }
+  }
+}