add icon to my-blog view switcher button and improve styling

Author: LinuxJava7

data/icons/go-home-symbolic.svg

@@ -28,7 +28,7 @@
         <ul>
           <li>
             <a href="/" class="current" aria-current="page">
-              <svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
+              <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"/>
@@ -40,6 +40,12 @@
           </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>

index.html

@@ -327,6 +327,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   display: flex;
   justify-content: center;
   padding: 0;
+  height: 80%
 }
 
 .view-switcher ul {
@@ -345,13 +346,14 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 7.25rem;
-  height: 2rem;
+  width: 8.25rem;
+  height: 100%;
   color: var(--ctp-text);
   font-weight: bold;
   text-decoration: none;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   transition: background-color 0.2s ease, color 0.2s ease;
+  gap: 6px;
 }
 
 .view-switcher a:hover,
@@ -363,6 +365,11 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
   background-color: rgb(0 0 0 / 5%);
 }
 
+.view-switcher svg {
+  width: 1em;
+  height: 1em;
+}
+
 /* Footer */
 footer {
   background-color: rgb(var(--ctp-antibase));