add bottom view switcher bar for mobile view and improve styling

Author: LinuxJava7

index.html

@@ -53,6 +53,39 @@
         </ul>
       </nav>
     </header>
+
+    <div class="view-switcher-bar">
+      <!-- Navigation (View Switcher) -->
+      <nav class="view-switcher-narrow">
+        <ul>
+          <li>
+            <a href="/" class="current" aria-current="page">
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <g fill="currentColor">
+                  <path d="m 12 16 c 1.660156 0 3 -1.339844 3 -3 v -6 c 0 -0.929688 -0.414062 -1.8125 -1.128906 -2.410156 l -4.460938 -3.71875 c -0.816406 -0.679688 -2.003906 -0.679688 -2.820312 0 l -4.460938 3.71875 c -0.714844 0.597656 -1.128906 1.480468 -1.128906 2.410156 v 6 c 0 1.660156 1.339844 3 3 3 z m -9 -3 v -6 c 0 -0.335938 0.148438 -0.65625 0.410156 -0.871094 l 4.460938 -3.71875 c 0.074218 -0.0625 0.183594 -0.0625 0.257812 0 l 4.460938 3.71875 c 0.261718 0.214844 0.410156 0.535156 0.410156 0.871094 v 6 c 0 0.546875 -0.453125 1 -1 1 h -8 c -0.546875 0 -1 -0.453125 -1 -1 z m 0 0"/>
+                  <path d="m 7 8 h 2 c 0.550781 0 1 0.449219 1 1 v 5 c 0 0.550781 -0.449219 1 -1 1 h -2 c -0.550781 0 -1 -0.449219 -1 -1 v -5 c 0 -0.550781 0.449219 -1 1 -1 z m 0 0"/>
+                </g>
+              </svg>
+
+              Home
+            </a>
+          </li>
+          <li>
+            <a href="https://blog.linuxjava7.dev/">
+              <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                <g fill="currentColor">
+                  <path d="m 4.199219 2 c -0.453125 0 -0.84375 0.300781 -0.964844 0.738281 l -3.234375 11.261719 h 2.066406 l 0.808594 -3 l 2.125 -0.003906 l 2.121094 0.003906 l 0.808594 3 h 2.070312 l -3.238281 -11.261719 c -0.117188 -0.4375 -0.511719 -0.738281 -0.960938 -0.738281 z m 0.785156 2 h 0.015625 h 0.011719 c 0.121093 -0.003906 0.238281 0.011719 0.289062 0.207031 l 1.320313 4.792969 h -3.242188 l 1.316406 -4.792969 c 0.054688 -0.195312 0.171876 -0.210937 0.289063 -0.207031 z m 0 0"/><path d="m 10 0 v 1 h 2 v 14 h -2 v 1 h 2.5 l 0.5 -0.5 l 0.5 0.5 h 2.5 v -1 h -2 v -14 h 2 v -1 h -2.5 l -0.5 0.5 l -0.5 -0.5 z m 0 0"/>
+                </g>
+              </svg>
+
+              My Blog
+            </a>
+          </li>
+          <li><a href="/test2">Test 2</a></li>
+        </ul>
+      </nav>
+    </div>
+
     <!-- Main Content -->
       <div class="container" id="intro">
         <h1>LinuxJava7</h1>

style.css

@@ -307,12 +307,79 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   fill: currentColor;
 }
 
+/* View Switcher Bar */
+.view-switcher-bar {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  height: 3.3rem;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  padding: 0;
+  background-color: rgba(var(--ctp-base) / 75%);
+  backdrop-filter: blur(12px);
+  z-index: 9999;
+}
+
+/* View Switcher */
+.view-switcher-narrow {
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  height: 85%
+}
+
+.view-switcher-narrow ul {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0.25rem;
+}
+
+.view-switcher-narrow li {
+  display: inline-block;
+}
+
+.view-switcher-narrow a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 6.8rem;
+  height: 100%;
+  color: var(--ctp-text);
+  font-weight: bold;
+  text-decoration: none;
+  border-radius: 0.6rem;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  gap: 0px;
+  font-size: 0.8rem;
+}
+
+.view-switcher-narrow a:hover,
+.view-switcher-narrow a:focus {
+  background-color: rgb(0 0 0 / 2.5%);
+}
+
+.view-switcher-narrow .current {
+  background-color: rgb(0 0 0 / 5%);
+}
+
+.view-switcher-narrow svg {
+  width: 1.25em;
+  height: auto;
+  margin-top: 4px;
+}
+
+
 /* Header Bar */
 .headerbar {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 2.9375rem;
+  height: 3rem;
   width: 100%;
   position: sticky;
   top: 0;
@@ -351,7 +418,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   color: var(--ctp-text);
   font-weight: bold;
   text-decoration: none;
-  border-radius: 0.5rem;
+  border-radius: 0.65rem;
   transition: background-color 0.2s ease, color 0.2s ease;
   gap: 6px;
 }
@@ -412,11 +479,15 @@ footer {
   }
 
   .view-switcher a:hover,
-  .view-switcher a:focus {
+  .view-switcher a:focus,
+  .view-switcher-narrow a:hover,
+  .view-switcher-narrow a:focus
+  {
     background-color: rgb(255 255 255 / 2.5%);
   }
 
-  .view-switcher .current {
+  .view-switcher .current 
+  .view-switcher-narrow .current{
     background-color: rgb(255 255 255 / 5%);
   }
 }
@@ -429,6 +500,18 @@ footer {
     --grid-gap: 1rem;
     --defaultsize: 16px;
   }
+
+  .headerbar {
+    display: none;
+  }
+
+  .view-switcher-bar {
+    display: flex;
+  }
+
+  footer {
+    margin-bottom: 3.5rem;
+  }
 
   .container {
     grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(2,minmax(1rem,calc(var(--pagewidth)/2))) [main-end] minmax(0, 1fr) [full-end];