/* * ========================================= * Modern Reading Theme (Bootstrap 5 Customization) * ========================================= */ /* 1. FONT IMPORT & ROOT VARIABLES * ----------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap'); :root { --c-bg-soft: #F8F9FA; --c-text: #212529; --c-primary: #0d6efd; --c-muted: #6c757d; --c-border: #dee2e6; --font-serif: 'Lora', 'Noto Serif SC', serif; --font-sans: 'Noto Sans SC', 'Helvetica Neue', 'Arial', sans-serif; --navbar-height: 60px; } /* 2. GLOBAL & BASE STYLES * ----------------------------------------- */ html { /* * ✅【核心修复】将初始根字体大小设置为 1rem。 * 这意味着它会完全采用浏览器的默认字体大小，也就是用户在微信中设置的大小。 * 我们的JS将在此基础上，通过修改这个rem值来进行缩放。 */ font-size: 1rem; } body { font-family: var(--font-sans); color: var(--c-text); background-color: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--c-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* 3. LAYOUT & COMPONENT STYLING * ----------------------------------------- */ @media (min-width: 992px) { .row { min-height: calc(100vh - var(--navbar-height)); } #sidebarMenu.offcanvas-lg { height: calc(100vh - var(--navbar-height)); position: sticky; top: var(--navbar-height); overflow-y: auto; } } .toc-nav .nav-link { display: block; padding: 0.35rem 0.75rem; color: var(--c-muted); font-size: 0.9rem; border-left: 3px solid transparent; transition: all 0.2s ease-in-out; } .toc-nav .nav-link:hover { color: var(--c-text); background-color: #e9ecef; text-decoration: none; } .toc-nav .nav-link.active { color: var(--c-primary); font-weight: bold; border-left-color: var(--c-primary); } .toc-nav .toc-list { padding-left: 0; list-style-type: none; } .toc-nav .toc-list .toc-list { padding-left: 1rem; } /* 4. ARTICLE CONTENT STYLES * ----------------------------------------- */ .article-body { max-width: 800px; /* * 使用 rem 单位，使其字体大小相对于根元素()。 * 当JS改变html的font-size时，这里会自动缩放。 */ font-size: 1.125rem; line-height: 1.8; } .article-body .page-title { font-family: var(--font-sans); font-size: 2.8rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; } .article-body h1, .article-body h2, .article-body h3, .article-body h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.4; margin-top: 2.5em; margin-bottom: 1em; } .article-body h2 { font-size: 2rem; border-bottom: 1px solid var(--c-border); padding-bottom: 0.4em; } .article-body h3 { font-size: 1.6rem; } .article-body p { margin-bottom: 1.5em; } .article-body .blockquote { margin: 2em 0; padding: 1.5em 2em; background-color: var(--c-bg-soft); border-left: 4px solid var(--c-primary); border-radius: 0.25rem; font-size: 0.95em; } /* * ========================================= * FINAL STABLE STYLES (保持不变) * ========================================= */ .navbar.sticky-top { background-color: rgba(var(--bs-body-bg-rgb), 0.85) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateZ(0); background-image: linear-gradient(transparent, transparent); } .navbar-toggler { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem !important; }