/* ============================================ Docs as Code — 屏幕与打印样式 严格对齐 docs-as-code skill 参考实现 ============================================ */ :root { --primary: #0d47a1; --secondary: #1565c0; --accent: #42a5f5; --light: #e3f2fd; --text: #212121; --muted: #616161; --bg: #f0f2f5; --sidebar-w: 260px; --content-w: 210mm; --a4-h: 297mm; --cover-px: 25mm; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 11pt; line-height: 1.8; color: var(--text); background: var(--bg); } /* ---- 整体布局:左侧目录 + 右侧主内容 ---- */ .layout { display: flex; max-width: calc(var(--sidebar-w) + var(--content-w)); margin: 0 auto; background: #fff; min-height: 100vh; } .sidebar { position: sticky; top: 0; width: var(--sidebar-w); height: 100vh; overflow-y: auto; flex-shrink: 0; background: #fafbfc; border-right: 1px solid #e0e0e0; padding: 24px 18px; } .sidebar h2 { font-size: 13pt; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 8px; margin-bottom: 14px; font-weight: 700; } .sidebar ul { list-style: none; padding: 0; } .sidebar li { padding: 4px 0; font-size: 9.5pt; line-height: 1.5; } .sidebar li a { color: #555; text-decoration: none; display: block; border-radius: 4px; padding: 3px 8px; transition: all 0.15s; } .sidebar li a:hover { color: var(--primary); background: var(--light); } .sidebar .toc-level-2 { padding-left: 12px; } .sidebar .toc-level-3 { padding-left: 24px; } .sidebar .toc-level-4 { padding-left: 36px; } .main { flex: 1; max-width: var(--content-w); min-width: 0; background: #fff; } /* ---- 封面(A4) ---- */ .cover { width: 100%; height: var(--a4-h); min-height: var(--a4-h); padding: 35mm var(--cover-px) 50mm; background: #fff; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; page-break-after: always; border-bottom: 1px solid #e0e0e0; } .cover-logo { max-width: 320px; max-height: 90px; height: auto; width: auto; margin: 0; object-fit: contain; } .cover-doc-type { font-size: 13pt; font-weight: 500; color: var(--secondary); letter-spacing: 0.5em; text-indent: 0.5em; margin-top: 15mm; margin-bottom: 15mm; } .cover-title { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 26pt; font-weight: 700; color: #fff; background: var(--primary); line-height: 1.4; margin: 0 calc(-1 * var(--cover-px)) 0; padding: 0.4em var(--cover-px); width: calc(100% + 2 * var(--cover-px)); } .cover-subtitle { font-size: 16pt; font-weight: 700; color: var(--secondary); margin-top: 8mm; margin-bottom: 18mm; } .cover-meta { width: 100%; max-width: 130mm; margin-top: auto; padding-bottom: 0; } .cover-meta table { width: 100%; border-collapse: collapse; font-size: 11pt; color: var(--muted); } .cover-meta td { padding: 2.5mm 4mm; border-bottom: 1px solid #e0e0e0; vertical-align: middle; width: 50%; } .cover-meta td:first-child { text-align: center; color: #9e9e9e; font-weight: 500; } .cover-meta td:last-child { text-align: center; color: var(--text); font-weight: 500; } /* ---- 正文 ---- */ .content { padding: 2cm 2.5cm 3cm; background: #fff; } /* ---- 正文排版 ---- */ h1 { font-family: "Noto Serif SC", "SimSun", serif; font-size: 18pt; font-weight: 700; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 0.3em; margin-top: 1.8em; line-height: 1.4; } h2 { font-family: "Noto Serif SC", "SimSun", serif; font-size: 14pt; font-weight: 600; color: var(--secondary); border-bottom: 1px solid var(--light); padding-bottom: 0.2em; margin-top: 1.5em; } h3 { font-size: 12pt; font-weight: 600; color: #303f9f; margin-top: 1.3em; } h4 { font-size: 11pt; font-weight: 600; } p { margin: 0.6em 0; } strong { color: var(--primary); } /* ---- 引用块(提示/警告/重要) ---- */ blockquote { margin: 1em 0; padding: 12px 20px; border-left: 4px solid var(--accent); background: var(--light); border-radius: 0 4px 4px 0; color: #37474f; } blockquote p { margin: 0.3em 0; } blockquote ul, blockquote ol { margin: 0.4em 0; } ul, ol { padding-left: 2em; margin: 0.6em 0; } li { margin: 0.25em 0; } /* ---- 表格 ---- */ table { font-size: 10pt; border-collapse: collapse; width: 100%; margin: 1em 0; } th { background: var(--primary); color: #fff; font-weight: 500; text-align: center; padding: 8px 12px; } td { padding: 6px 12px; border: 1px solid #e0e0e0; text-align: left; } tbody tr:nth-child(even) { background: #f8f9fa; } /* ---- 代码 ---- */ pre { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; padding: 12px 16px; overflow-x: auto; margin: 1em 0; } code { font-family: "JetBrains Mono", "Cascadia Code", "Consolas", monospace; font-size: 0.9em; background: #f0f0f0; padding: 1px 4px; border-radius: 3px; } pre code { background: none; padding: 0; } /* ---- 图片(无阴影) ---- */ img { max-width: 100%; height: auto; display: block; margin: 1em auto; border-radius: 4px; } /* ---- KaTeX 公式 ---- */ .katex-display { margin: 0.75em 0; overflow-x: auto; overflow-y: hidden; } /* ---- 响应式 ---- */ @media screen and (max-width: 1100px) { :root { --cover-px: 15mm; } .layout { flex-direction: column; } .sidebar { width: 100%; height: auto; position: relative; border-right: none; border-bottom: 1px solid #e0e0e0; } .main { max-width: none; } .content { padding: 1.5cm; } .cover { width: calc(100% - 2rem); height: auto; min-height: auto; padding: 15mm; margin: 1rem auto; } .cover-title { font-size: 22pt; } .cover-subtitle { font-size: 14pt; } } /* ---- 打印 ---- */ @media print { body { background: #fff; } .layout { display: block; max-width: none; } .sidebar { display: none; } .main { max-width: none; } .cover { margin: 0; width: 100%; height: 100vh; min-height: 100vh; page-break-after: always; } .content { max-width: none; padding: 0; } }