Add Snake-Like Vertical Navigation for Blog

olcruzgonzalez · Nov 29, 2024 · e350b60 · e350b60
1 parent 0dad6ca
commit e350b60
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 55 deletions.
diff --git a/_posts/2024-06-24-welcome.md b/_posts/2024-06-24-welcome.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 tags: welcome_post
-categories: welcome_post
+categories: Welcome_Post
 # description: What This Blog is About?
 toc: true
 comments: true

diff --git a/_posts/2024-07-04-pinn.md b/_posts/2024-07-04-pinn.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 tags: pinns
-categories: meet_the_approach
+categories: SciML Meet_the_Approach
 description: Meet the Approach
 toc: true
 comments: true

diff --git a/_posts/2024-11-05-pi-deeponet.md b/_posts/2024-11-05-pi-deeponet.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 tags: pi-deeponet
-categories: meet_the_approach
+categories: SciML Meet_the_Approach
 description: Meet the Approach
 toc: true
 comments: true

diff --git a/_posts/2024-11-22-local-problem-1d.md b/_posts/2024-11-22-local-problem-1d.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 tags: pi-deeponet
-categories: problem_solution
+categories: SciML Problem-Solution
 description: Problem-Solution
 toc: true
 comments: true

diff --git a/_tabs/blog.html b/_tabs/blog.html
@@ -13,59 +13,81 @@
 order: 8
 --- -->
 
-<title>Horizontal Navigation</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->
-    <style>
-        .horizontal-list {
-            display: flex;
-            justify-content: center;
-            gap: 30px; /* Increased space between items */
-            padding: 0;
-            margin: 20px 0;
-            list-style: none;
-        }
+<title>Snake-Like Vertical Navigation</title>
+<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->
+<style>
+    /* Style for the navigation container */
+    .nav-container {
+        display: flex;
+        justify-content: center; /* Center horizontally */
+        align-items: center; /* Center vertically */
+        height: 100%; /* Ensure it spans the parent container */
+    }
 
-        .horizontal-list-item {
-            font-size: 1.5rem; /* Increased font size */
-        }
+    .vertical-list {
+        display: flex;
+        flex-direction: column; /* Stack items vertically */
+        align-items: flex-start; /* Align items to the start */
+        gap: 45px; /* Space between items */
+        padding: 0;
+        list-style: none;
+    }
 
-        .horizontal-list-item a {
-            text-decoration: none;
-            color: #333;
-            display: flex;
-            align-items: center;
-            padding: 10px 15px; /* Add padding around each link */
-            border-radius: 8px; /* Optional: rounded corners for a button-like feel */
-            transition: transform 0.2s, color 0.2s; /* Add a smooth hover effect */
-        }
+    .vertical-list-item {
+        font-size: 1.1rem; /* Adjust font size */
+        transform: translateX(0); /* Default position */
+        transition: transform 0.3s; /* Smooth transition for hover */
+    }
 
-        .horizontal-list-item a:hover {
-            color: #007bff;
-            transform: scale(1.1); /* Slightly enlarge on hover */
-        }
+    /* Create a snake pattern by alternating item alignment */
+    .vertical-list-item:nth-child(2n) {
+        transform: translateX(20px); /* Shift even items to the right */
+    }
 
-        .horizontal-list-item i {
-            margin-right: 10px; /* Space between icon and text */
-            font-size: 2rem; /* Larger icon size */
-        }
-    </style>
+    .vertical-list-item:nth-child(2n-1) {
+        transform: translateX(-20px); /* Shift odd items to the left */
+    }
+
+    .vertical-list-item a {
+        text-decoration: none;
+        color: #333; /* Default text color */
+        display: flex;
+        align-items: center;
+        padding: 10px 15px; /* Add padding around each link */
+        border-radius: 8px; /* Optional: rounded corners */
+        transition: transform 0.2s, color 0.2s; /* Add a smooth hover effect */
+    }
+
+    .vertical-list-item a:hover {
+        color: blue !important; /* Force the hover color to blue */
+        transform: scale(1.1); /* Slightly enlarge on hover */
+    }
+
+    .vertical-list-item i {
+        margin-right: 10px; /* Space between icon and text */
+        font-size: 2rem; /* Larger icon size */
+    }
+</style>
+
+<div class="nav-container">
+    <nav>
+        <ul class="vertical-list">
+            <li class="vertical-list-item">
+                <a href="/archives" aria-label="Archives">
+                    <i class="fas fa-archive" aria-hidden="true"></i> Archives
+                </a>
+            </li>
+            <li class="vertical-list-item">
+                <a href="/categories" aria-label="Categories">
+                    <i class="fas fa-stream" aria-hidden="true"></i> Categories
+                </a>
+            </li>
+            <li class="vertical-list-item">
+                <a href="/tags" aria-label="Tags">
+                    <i class="fas fa-tags" aria-hidden="true"></i> Tags
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
 
-<nav>
-  <ul class="horizontal-list">
-      <li class="horizontal-list-item">
-          <a href="/archives" aria-label="Archives">
-              <i class="fas fa-archive" aria-hidden="true"></i> Archives
-          </a>
-      </li>
-      <li class="horizontal-list-item">
-          <a href="/categories" aria-label="Categories">
-              <i class="fas fa-stream" aria-hidden="true"></i> Categories
-          </a>
-      </li>
-      <li class="horizontal-list-item">
-          <a href="/tags" aria-label="Tags">
-              <i class="fas fa-tags" aria-hidden="true"></i> Tags
-          </a>
-      </li>
-  </ul>
-</nav>