iroiro

components/g/Footer.vue

@@ -1,6 +1,6 @@
 <template>
-    <footer class="p-4 sm:p-6 bg-white dark:bg-slate-950">
+    <footer class="p-6 sm:pt-12">
-        <div class="mx-auto max-w-screen-xl">
+        <div class="mx-auto container max-w-screen-xl">
             <div class="md:flex md:justify-between">
                 <div class="mb-6 md:mb-0">
                     <GNuxtLink :to="localePath('/')" class="flex items-center">
@@ -56,7 +56,7 @@
                     </div>
                 </div>
             </div>
-            <hr class="my-6 border-slate-200 sm:mx-auto dark:border-slate-700 lg:my-8" />
+            <hr class="my-6 border-slate-200 sm:mx-auto dark:border-slate-700" />
             <div class="sm:flex sm:items-center sm:justify-between">
                 <span class="text-sm text-slate-500 sm:text-center dark:text-slate-400">&copy; 2023 Misskey, syuilo, and other contributors
                 </span>

components/g/LargeLinks.vue

@@ -1,13 +1,13 @@
 <template>
-    <div class="space-y-6 lg:space-y-8">
+    <div class="space-y-6">
         <GNuxtLink v-for="item in items" :to="item.to" :target="isLocalPath(item.to) ? undefined : '_blank'" class="rounded-xl border border-slate-200 dark:border-accent-900 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 p-4 sm:pt-0 sm:pb-0 sm:pl-6 sm:pr-0 overflow-hidden flex">
             <div class="flex flex-col justify-center">
                 <h2 class="text-xl sm:text-2xl font-bold mb-2">{{ item.title }}<ArrowRightIco v-if="isLocalPath(item.to)" class="ml-2" /><ArrowUpRightIco v-else class="ml-2" /></h2>
                 <p class="text-slate-500 dark:text-slate-300">{{ item.description }}</p>
             </div>
-            <div :class="['hidden sm:block ml-auto flex-shrink-0 relative h-48 w-auto', (item.cutBottom ? 'pt-4' : 'py-4'), (!item.cutLeft && 'pr-4')]">
+            <div :class="['hidden sm:block ml-auto flex-shrink-0 relative h-40 w-auto', (item.cutBottom ? 'pt-4' : 'py-4'), (!item.cutLeft && 'pr-4')]">
-                <GDots class="absolute top-0 right-0 h-20 w-20 text-accent-600" />
+                <GDots class="absolute top-0 right-0 h-16 w-16 text-accent-600" />
-                <GDots class="absolute bottom-0 -left-2 h-14 w-20 text-accent-600" />
+                <GDots class="absolute bottom-0 -left-2 h-12 w-16 text-accent-600" />
                 <img class="relative h-full" :src="item.img" />
             </div>
         </GNuxtLink>

components/g/Nav.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['sticky top-0 z-[9900] transition', { 'backdrop-blur-lg shadow bg-opacity-80': (!disableShadow && scrollPos <= -40), 'bg-slate-100 dark:bg-gray-900': (disableShadow || scrollPos <= -40) }]">
+    <div :class="['sticky top-0 z-[9900] transition', { 'backdrop-blur-lg shadow bg-opacity-75': (!disableShadow && scrollPos <= -40), 'bg-white dark:bg-gray-950': (disableShadow || scrollPos <= -40)}, (slim ? 'h-16 border-b border-slate-300' : 'h-16 lg:h-20')]">
-        <nav :class="['container mx-auto max-w-screen-xl grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4', (slim ? 'h-16' : 'h-16 lg:h-20')]">
+        <nav :class="['container mx-auto max-w-screen-xl grid items-center grid-cols-2 md:grid-cols-4 lg:grid-cols-6 p-4 h-full transition-[height]']">
             <div class="">
                 <GNuxtLink :to="localePath('/')" class="flex items-center space-x-2 hover:opacity-80">
                     <MiIcon class="h-8 w-8" />
@@ -9,7 +9,7 @@
             </div>
             <ul class="hidden lg:col-span-4 lg:space-x-8 xl:space-x-10 lg:flex justify-center">
                 <li v-for="item in NavData.center">
-                    <GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800': path.replace(/\/$/, '') === localePath(item.to).replace(/\/$/, '') }]">
+                    <GNuxtLink :to="localePath(item.to)" :class="['rounded-full px-4 py-1.5 hover:bg-slate-300 dark:hover:bg-slate-800 hover:bg-opacity-50 bg-blend-multiply', { 'bg-slate-200 dark:bg-slate-800 font-bold': currentPath.replace(/\/$/, '').includes(localePath(item.to).replace(/\/$/, '')) }]">
                         <component v-if="item.icon" :is="item.icon" class="h-5 w-5" />
                         <template v-else>
                             {{ $t(item.i18n) }}
@@ -75,6 +75,11 @@ const props = withDefaults(defineProps<{
 
 const { locales, locale: currentLocale } = useI18n();
 const { path } = useRoute();
+const { afterEach } = useRouter();
+const currentPath = ref(path);
+afterEach((to) => {
+    currentPath.value = to.path;
+})
 const switchLocalePath = useSwitchLocalePath();
 const localePath = useLocalePath();
 

layouts/default.vue

@@ -13,6 +13,6 @@ useHead({
         <div class="main-content">
             <slot></slot>
         </div>
-        <GFooter />
+        <GFooter class="bg-white dark:bg-slate-950" />
     </div>
 </template>

layouts/docs.vue

@@ -13,6 +13,6 @@ useHead({
         <div class="main-content">
             <slot></slot>
         </div>
-        <GFooter />
+        <GFooter class="bg-slate-100 dark:bg-gray-900" />
     </div>
 </template>

pages/docs/index.vue

@@ -16,7 +16,7 @@
             </template>
         </GHero>
         <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
-            <div class="container mx-auto max-w-screen-xl px-6 space-y-6 lg:space-y-8">
+            <div class="container mx-auto max-w-screen-xl px-6 space-y-6 lg:space-y-12">
                 <GLocalNav :items="[
                     {
                         name: $t('_docs._forUsers.title'),