feat(docs): improve image sizing and add global stylesheet

- Add style.css to head config for global styling
- Refactor image height/width constraints with new classes
- Adjust font size and image ratio thresholds
- Add max-width constraints to prevent overflow
This commit is contained in:
sanbuphy
2026-01-13 12:27:41 +08:00
parent ecb8abd5e7
commit bc0644aa4b
4 changed files with 76 additions and 19 deletions
+27 -3
View File
@@ -4,6 +4,10 @@
--vp-sidebar-nav-section-gap: 8px;
}
.vp-doc {
font-size: 15px;
}
/* 生产环境(带 data-v-* 的 scoped 样式)会比 class 选择器更高优先级。
为避免 build/preview 时被覆盖,这里显式匹配 scoped 属性并加 !important。 */
:where(html) .VPSidebarItem.level-0,
@@ -78,18 +82,38 @@
/* 图片高度限制策略:根据长宽比调整最大高度 */
/* 越高的图片(长宽比越大),限制的高度越小,避免占用过多纵向空间 */
.vp-doc img.img-tall {
max-height: 450px !important;
max-height: 380px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
.vp-doc img.img-very-tall {
max-height: 350px !important;
max-height: 280px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
.vp-doc img.img-ultra-tall {
max-height: 250px !important;
max-height: 200px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
.vp-doc img.img-limit-width {
max-width: 100% !important;
max-height: 320px !important;
width: auto !important;
height: auto !important;
}
.vp-doc img.img-limit-height {
max-height: 450px !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
}
/* Fix tagline wrapping issues */