feat: adjust styles mainly nav

src/client/theme-default/components/VPCarbonAds.vue

@@ -43,6 +43,9 @@ if (carbonOptions) {
 
 <style>
 .VPCarbonAds {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 24px;
   border-radius: 8px;
   min-height: 240px;

src/client/theme-default/components/VPFlyout.vue

@@ -141,7 +141,7 @@ function onBlur() {
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 960px) {
   .menu {
     top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
   }

src/client/theme-default/components/VPMenu.vue

@@ -22,27 +22,22 @@ defineProps<{
 
 <style scoped>
 .VPMenu {
-  border-radius: 8px;
-  padding: 12px 0;
-  min-width: 192px;
-  border: 1px solid transparent;
-  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 128px;
+  border: 1px solid var(--vp-c-divider-light);
+  background-color: var(--vp-c-bg);
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
 }
 
 .dark .VPMenu {
-  background: var(--vp-c-bg);
-  box-shadow: var(--vp-shadow-1);
-  border: 1px solid var(--vp-c-divider-light);
-}
-
-.VPMenu :deep(.items) {
-  transition: border-color .5s;
+  box-shadow: var(--vp-shadow-2);
 }
 
 .VPMenu :deep(.group) {
-  padding: 0 0 12px;
+  margin: 0 -12px;
+  padding: 0 12px 12px;
 }
 
 .VPMenu :deep(.group + .group) {

src/client/theme-default/components/VPMenuLink.vue

@@ -15,16 +15,18 @@ defineProps<{
 <style scoped>
 .VPMenuLink {
   display: block;
-  padding: 0 16px;
-  line-height: 28px;
-  font-size: 13px;
+  border-radius: 6px;
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   white-space: nowrap;
-  transition: color 0.25s;
+  transition: background-color 0.25s, color 0.25s;
 }
 
 .VPMenuLink:hover {
   color: var(--vp-c-brand);
+  background-color: var(--vp-c-bg-soft);
 }
 </style>

src/client/theme-default/components/VPNavBarExtra.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
@@ -10,21 +11,15 @@ const { site, theme } = useData()
 <template>
   <VPFlyout class="VPNavBarExtra" label="extra navigation">
     <div v-if="theme.localeLinks" class="group">
-      <div class="trans">
-        <p class="trans-title">
-          {{ theme.localeLinks.text }}
-        </p>
+      <p class="trans-title">{{ theme.localeLinks.text }}</p>
 
-        <ul class="trans-list">
-          <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="trans-item">
-            <a class="trans-link" :href="locale.link">{{ locale.text }}</a>
-          </li>
-        </ul>
-      </div>
+      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
     </div>
 
     <div v-if="site.appearance" class="group">
-      <div class="item">
+      <div class="item appearance">
         <p class="label">Appearance</p>
         <div class="appearance-action">
           <VPSwitchAppearance />
@@ -33,8 +28,8 @@ const { site, theme } = useData()
     </div>
 
     <div v-if="theme.socialLinks" class="group">
-      <div class="item">
-        <VPSocialLinks class="social-links" :links="theme.socialLinks" />
+      <div class="item social-links">
+        <VPSocialLinks class="social-links-list" :links="theme.socialLinks" />
       </div>
     </div>
   </VPFlyout>
@@ -63,45 +58,29 @@ const { site, theme } = useData()
 }
 
 .trans-title {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 600;
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--vp-c-text-1);
 }
 
-.trans-icon {
-  margin-right: 12px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.trans-list {
-  padding: 2px 0 0 0;
-}
-
-.trans-link {
-  line-height: 28px;
-  font-size: 13px;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.trans-link:hover {
-  color: var(--vp-c-brand);
-}
-
-.item {
+.item.appearance,
+.item.social-links {
   display: flex;
   align-items: center;
+  padding: 0 24px;
+}
+
+.item.appearance {
+  min-width: 176px;
 }
 
 .appearance-action {
   margin-right: -2px;
 }
 
-.social-links {
+.social-links-list {
   margin: -4px -8px;
 }
 </style>

src/client/theme-default/components/VPNavBarMenuLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { DefaultTheme, useData } from 'vitepress'
+import { useData } from 'vitepress'
 import { isActive } from '../support/utils'
-import { NavItemWithLink } from '../config'
+import { DefaultTheme } from '../config'
 import VPLink from './VPLink.vue'
 
 defineProps<{
@@ -34,7 +34,7 @@ const { page } = useData()
   align-items: center;
   padding: 0 12px;
   line-height: var(--vp-nav-height-mobile);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;

src/client/theme-default/components/VPNavBarTitle.vue

@@ -19,6 +19,7 @@ const { hasSidebar } = useSidebar()
 .VPNavBarTitle {
   flex-shrink: 0;
   border-bottom: 1px solid transparent;
+  transition: background-color 0.5s;
 }
 
 @media (min-width: 960px) {

src/client/theme-default/components/VPNavBarTranslations.vue

@@ -1,16 +1,10 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { useData } from 'vitepress'
 import VPIconLanguages from './icons/VPIconLanguages.vue'
 import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
 
 const { theme } = useData()
-
-const isOpen = ref(false)
-
-function toggle() {
-  isOpen.value = !isOpen.value
-}
 </script>
 
 <template>
@@ -19,16 +13,12 @@ function toggle() {
     class="VPNavBarTranslations"
     :icon="VPIconLanguages"
   >
-    <div class="container">
-      <p class="title">
-        {{ theme.localeLinks.text }}
-      </p>
+    <div class="items">
+      <p class="title">{{ theme.localeLinks.text }}</p>
 
-      <ul class="list">
-        <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="lang">
-          <a class="link" :href="locale.link">{{ locale.text }}</a>
-        </li>
-      </ul>
+      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
     </div>
   </VPFlyout>
 </template>
@@ -45,30 +35,11 @@ function toggle() {
   }
 }
 
-.container {
-  padding: 0 16px;
-}
-
 .title {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 600;
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--vp-c-text-1);
 }
-
-.lang {
-  padding: 4px 0 0 0;
-}
-
-.link {
-  line-height: 28px;
-  font-size: 13px;
-  color: var(--vp-c-text-1);
-  transition: color 0.25s;
-}
-
-.link:hover {
-  color: var(--vp-c-brand);
-}
 </style>

src/client/theme-default/components/VPSocialLinks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DefaultTheme } from 'vitepress'
+import { DefaultTheme } from '../config'
 import VPSocialLink from './VPSocialLink.vue'
 
 defineProps<{