Files
DAO_DE_JING/.vitepress/theme/custom.css
T
dekun ecd4f25700 Fix PWA icons and mobile reading overflow
Generate PNG icons from favicon.svg at build time so manifest icons resolve, replace legacy font tags with div wrappers, and tighten mobile layout so long text wraps instead of clipping.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-05 18:10:38 +08:00

192 lines
3.3 KiB
CSS

:root {
--vp-font-family-base: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
'Noto Sans SC', 'Source Han Sans SC', sans-serif;
}
html {
overflow-x: clip;
}
/* 旧版 markdown 里的 <font size="4"> 在手机上过大 */
.vp-doc font,
.vp-md-font {
display: block;
max-width: 100%;
font-size: inherit !important;
overflow-wrap: anywhere;
}
.vp-doc {
line-height: 1.85;
letter-spacing: 0.02em;
word-break: break-word;
overflow-wrap: anywhere;
max-width: 100%;
}
.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;
overflow-wrap: anywhere;
}
/* 道德经等用缩进写的“伪代码块”,改成正文排版 */
.vp-doc pre,
.vp-doc pre code {
white-space: pre-wrap !important;
word-break: break-word;
overflow-wrap: anywhere;
}
.vp-doc pre {
overflow-x: auto;
max-width: 100%;
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;
overflow-wrap: anywhere;
}
.vp-doc img {
display: block;
max-width: 100% !important;
width: auto !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;
max-width: 100%;
}
.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,
.VPDoc .content,
.VPDoc .content-container,
.vp-doc,
.vp-md-font {
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.VPDoc .container {
padding: 0 14px;
}
.VPDoc .content {
max-width: 100%;
}
.vp-doc {
padding: 8px 0 88px;
font-size: 17px;
}
.vp-doc h1 {
margin-bottom: 0.6em;
}
/* 手机隐藏右侧大纲,避免挤压正文 */
.VPDoc .aside,
.VPDoc .aside-container {
display: none !important;
}
.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));
}
}