Improve mobile reading layout and typography

Make classic text chapters easier to read on phones with responsive styles, collapsed sidebar groups, and less intrusive install prompts on doc pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

.vitepress/theme/InstallApp.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useRoute } from 'vitepress'
 
+const route = useRoute()
 const showAndroidInstall = ref(false)
 const showIOSHint = ref(false)
 const dismissed = ref(false)
+const isMobile = ref(false)
 let deferredPrompt: BeforeInstallPromptEvent | null = null
 
 interface BeforeInstallPromptEvent extends Event {
@@ -11,11 +14,22 @@ interface BeforeInstallPromptEvent extends Event {
   userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
 }
 
-const visible = computed(
-  () => !dismissed.value && (showAndroidInstall.value || showIOSHint.value),
-)
+const isDocPage = computed(() => route.path !== '/')
+
+const visible = computed(() => {
+  if (dismissed.value) return false
+  if (isMobile.value && isDocPage.value) return false
+  return showAndroidInstall.value || showIOSHint.value
+})
 
 onMounted(() => {
+  isMobile.value = window.matchMedia('(max-width: 768px)').matches
+
+  if (sessionStorage.getItem('install-app-dismissed') === '1') {
+    dismissed.value = true
+    return
+  }
+
   const isStandalone =
     window.matchMedia('(display-mode: standalone)').matches ||
     (window.navigator as Navigator & { standalone?: boolean }).standalone
@@ -45,6 +59,7 @@ async function installApp() {
 
 function dismiss() {
   dismissed.value = true
+  sessionStorage.setItem('install-app-dismissed', '1')
 }
 </script>
 
@@ -55,7 +70,7 @@ function dismiss() {
         可将「道德经」安装到桌面，像 App 一样使用。
       </p>
       <p v-else class="install-app__text">
-        iPhone：点击 Safari 底部分享按钮，选择「添加到主屏幕」。
+        iPhone：Safari 底部分享 →「添加到主屏幕」，阅读更方便。
       </p>
       <div class="install-app__actions">
         <button
@@ -76,8 +91,8 @@ function dismiss() {
 .install-app {
   position: fixed;
   right: 16px;
-  bottom: 16px;
-  z-index: 100;
+  bottom: calc(16px + env(safe-area-inset-bottom, 0));
+  z-index: 50;
   max-width: min(92vw, 360px);
 }
 
@@ -104,8 +119,8 @@ function dismiss() {
 .install-app__primary,
 .install-app__ghost {
   border-radius: 8px;
-  padding: 8px 12px;
-  font-size: 13px;
+  padding: 10px 14px;
+  font-size: 14px;
   cursor: pointer;
 }
 
@@ -120,4 +135,12 @@ function dismiss() {
   background: transparent;
   color: var(--vp-c-text-2);
 }
+
+@media (max-width: 768px) {
+  .install-app {
+    left: 12px;
+    right: 12px;
+    max-width: none;
+  }
+}
 </style>