From 4d8f0799b535021c08d366b274e88e076a714fb2 Mon Sep 17 00:00:00 2001
From: WRXinYue <3322543587@qq.com>
Date: Wed, 24 Jul 2024 17:59:33 +0800
Subject: [PATCH] style(docs): optimize mobile responsiveness of documents

---
 demo/valaxy.config.ts    |  1 -
 docs/layouts/default.vue | 20 ++++++++++++++++++--
 docs/valaxy.config.ts    |  3 +--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/demo/valaxy.config.ts b/demo/valaxy.config.ts
index 61b688f9..e090b7a5 100644
--- a/demo/valaxy.config.ts
+++ b/demo/valaxy.config.ts
@@ -260,7 +260,6 @@ export default defineConfig<ThemeConfig>({
   vite: {
     optimizeDeps: {
       include: [
-        'typewriter-effect/dist/core',
         'd3',
         '@pixi/graphics',
         '@pixi/settings',
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
index 235bf6cc..efa5887a 100644
--- a/docs/layouts/default.vue
+++ b/docs/layouts/default.vue
@@ -5,14 +5,14 @@ const isHome = useLayout('home')
 </script>
 
 <template>
-  <SakuraMultiColumnsLayout>
+  <SakuraMultiColumnsLayout class="article-grid-layout">
     <template #left>
       <SakuraAsideLayout>
         <SidebarThemeDynamic />
       </SakuraAsideLayout>
     </template>
     <template #content>
-      <div class="content">
+      <div class="content grid">
         <RouterView v-slot="{ Component }">
           <component :is="Component">
             <template #main-content-after>
@@ -36,3 +36,19 @@ const isHome = useLayout('home')
     </template>
   </SakuraMultiColumnsLayout>
 </template>
+
+<style lang="scss">
+@use 'valaxy/client/styles/mixins/index.scss' as *;
+
+.article-grid-layout {
+  transition: grid-template-columns 0.3s ease;
+
+  @include screen('md') {
+    grid-template-columns: 150px 1fr 0;
+  }
+
+  @include screen('lg') {
+    grid-template-columns: 250px 1fr 250px;
+  }
+}
+</style>
diff --git a/docs/valaxy.config.ts b/docs/valaxy.config.ts
index 43f41da7..31df821d 100644
--- a/docs/valaxy.config.ts
+++ b/docs/valaxy.config.ts
@@ -106,8 +106,7 @@ export default defineValaxyConfig<ThemeConfig>({
   ],
   vite: {
     optimizeDeps: {
-      include: ['typewriter-effect/dist/core', 'd3', 'monaco-editor'],
+      include: ['d3', 'monaco-editor'],
     },
   },
-
 })