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>
2026-06-05 17:57:57 +08:00
parent c9f78ef25f
commit a8907d6cc0
5 changed files with 208 additions and 11 deletions
@@ -0,0 +1,160 @@
+:root {
+  --vp-font-family-base: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    'Noto Sans SC', 'Source Han Sans SC', sans-serif;
+}
+
+/* 旧版 markdown 里的 <font size="4"> 在手机上过大 */
+.vp-doc font {
+  font-size: inherit !important;
+}
+
+.vp-doc {
+  line-height: 1.85;
+  letter-spacing: 0.02em;
+  word-break: break-word;
+}
+
+.vp-doc h1 {
+  font-size: clamp(1.45rem, 5vw, 2rem);
+  line-height: 1.35;
+}
+
+.vp-doc h2 {
+  font-size: clamp(1.2rem, 4.2vw, 1.55rem);
+  margin-top: 1.6em;
+  padding-bottom: 0.35em;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.vp-doc h3 {
+  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
+}
+
+.vp-doc p {
+  margin: 1em 0;
+}
+
+/* 道德经等用缩进写的“伪代码块”，改成正文排版 */
+.vp-doc pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+  font-family: var(--vp-font-family-base);
+  font-size: 1rem;
+  line-height: 1.9;
+  padding: 14px 16px;
+  border-radius: 10px;
+  border: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-soft);
+}
+
+.vp-doc :not(pre) > code {
+  font-size: 0.92em;
+  word-break: break-word;
+}
+
+.vp-doc img {
+  display: block;
+  max-width: 100% !important;
+  height: auto !important;
+  margin: 1em auto;
+  border-radius: 8px;
+}
+
+.vp-doc table {
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  font-size: 0.92rem;
+}
+
+.vp-doc blockquote {
+  margin: 1.2em 0;
+  padding: 0.8em 1em;
+  border-radius: 8px;
+}
+
+/* 底部上一篇 / 下一篇：加大触控区域 */
+.VPDocFooter .pager-link {
+  min-height: 48px;
+  padding: 12px 14px;
+  border-radius: 10px;
+}
+
+.VPDocFooter .pager-link .title {
+  font-size: 0.95rem;
+  line-height: 1.45;
+}
+
+@media (max-width: 960px) {
+  .VPContent {
+    padding-top: 0;
+  }
+
+  .VPDoc .container {
+    padding: 0 14px;
+  }
+
+  .VPDoc .content {
+    max-width: 100%;
+  }
+
+  .vp-doc {
+    padding: 12px 0 88px;
+    font-size: 17px;
+  }
+
+  .vp-doc h1 {
+    margin-bottom: 0.6em;
+  }
+
+  /* 手机隐藏右侧大纲，避免挤压正文 */
+  .VPDoc .aside {
+    display: none;
+  }
+
+  .VPDoc.has-aside .content-container {
+    max-width: 100%;
+  }
+
+  /* 侧边栏目录项加大点击区域 */
+  .VPSidebarItem .text {
+    line-height: 1.5;
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  .VPSidebarItem.level-0 > .item > .text {
+    font-size: 15px;
+  }
+
+  /* 顶栏留白，适配刘海屏 */
+  .VPNavBar {
+    padding-top: env(safe-area-inset-top, 0);
+  }
+
+  /* 搜索框不占太多宽度 */
+  .VPNavBarSearch {
+    flex-shrink: 1;
+  }
+}
+
+@media (max-width: 640px) {
+  .VPNavBarTitle .title {
+    font-size: 15px;
+  }
+
+  .vp-doc {
+    font-size: 18px;
+    line-height: 1.9;
+  }
+
+  .vp-doc pre {
+    font-size: 17px;
+    padding: 12px 14px;
+  }
+
+  .VPDocFooter {
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
+  }
+}