style(docs): optimize mobile responsiveness of documents

WRXinYue · Jul 24, 2024 · 4d8f079 · 4d8f079
1 parent d94b1ae
commit 4d8f079
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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
@@ -106,8 +106,7 @@ export default defineValaxyConfig<ThemeConfig>({
   ],
   vite: {
     optimizeDeps: {
-      include: ['typewriter-effect/dist/core', 'd3', 'monaco-editor'],
+      include: ['d3', 'monaco-editor'],
     },
   },
-
 })