fix: Update styles

Author: ktquez

src/.vuepress/theme/components/TheNavigation.vue

@@ -16,7 +16,7 @@
           <a
             :href="href"
             :aria-current="isActive && $route.path.indexOf(item.link) === 0 ? 'page' : null"
-            class="relative z-0 px-3 py-3 border-b-4 border-transparent border-solid the-nav-link bg-main hover:border-accent-primary"
+            class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
             :class="{ 'active border-accent-primary': isActive && $route.path.indexOf(item.link) === 0 }"
             @click="navigate"
           >
@@ -26,7 +26,7 @@
       </li>
       <li>
         <ExternalLink
-          class="relative z-0 px-3 py-3 border-b-4 border-transparent border-solid the-nav-link bg-main hover:border-accent-primary"
+          class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
           :href="`https://github.com/${$themeConfig.repo}`"
           label="Github"
         />

src/.vuepress/theme/layouts/Posts.vue

@@ -12,8 +12,8 @@
       />
 
       <h1
-        class="pl-3 mt-2 mb-8 font-bold leading-10 lg:pl-6"
-        style="font-size: 2.5rem;"
+        class="pl-3 mt-2 mb-10 font-bold leading-10 lg:pl-6"
+        style="font-size: 2.6rem;"
       >
         Latest posts <span class="capitalize">{{ isCategory && $currentCategories ? `(${$currentCategories.key})` : '' }}</span>
       </h1>

src/.vuepress/theme/styles/_a11y.scss

@@ -16,13 +16,13 @@
 
 [tabindex]:not([tabindex="-1"]), a, button, input, select, textarea {
   position: relative;
+  z-index: 2;
   outline: 2px solid transparent;
   outline-offset: 6px;
   transition: outline-offset .1s ease;
 }
 
 *:focus {
-  z-index: 2 !important;
   outline-color: var(--color);
   outline-offset: 3px;
 }