fix: responsive

Author: overtrue

.vitepress/theme/components/home.vue

@@ -12,10 +12,10 @@ defineProps({
 })
 </script>
 <template>
-  <div class="home-components container mx-auto flex flex-col gap-8 py-12">
+  <div class="home-components container mx-auto flex flex-col gap-8 py-12 px-4 md:px-6 lg:px-8">
     <h1 class="text-2xl! lg:text-4xl! leading-none font-bold! tracking-tight! dark:text-slate-300 text-slate-900 mt-10! mb-8! sm:mt-14! sm:mb-10!">{{ title }} </h1>
 
-    <div class="grid grid-cols-4 gap-6 items-stretch justify-items-start">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 items-stretch justify-items-start">
       <template v-for="group in sidebar" :key="group.text" class="flex w-full">
         <NavCard :group="group" class="w-full" />
       </template>