/* retro-text.css 目标：老式文本网页风格（90s 文本感），但保留现代可访问性。 使用：把此文件引入 ，或复制到你的主样式里。 */ /* ========== 配置变量（便于快速定制） ========== */ :root{ --bg: rgb(241,229,201); /* 页面背景 */ --text: #111111; /* 主文本颜色 */ --link: #0000ee; /* 经典蓝链接 */ --link-visited: #551a8b; /* 访问过的链接颜色 */ --muted: #666666; /* 次要文字 */ --hr: #cccccc; /* 分割线 */ --other: darkcyan; --measure: 70ch; /* 理想行长 (字符数) */ --base-size: 16px; /* 基准字体大小 */ --line-height: 1.6; /* 行高 */ --container-pad: 20px; /* 页面左右内边距 */ --max-width: calc(var(--measure) + 4rem); --mono: "Fira Code", "Consolas", "Courier New", monospace; /* 等宽字体 */ --serif: Georgia, "Times New Roman", Times, serif; --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; --kicker-size: 0.92rem; } /* ========== 基本重置（轻量） ========== */ * { box-sizing: border-box; } html,body { height:100%; } body{ margin:0; background:var(--bg); color:var(--text); font-family: var(--sans); font-size:var(--base-size); line-height:var(--line-height); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; padding: 0; } /* 链接保留老式下划线语义（可选），但做得更温和 */ a { color:var(--link); text-decoration: underline; } a:visited { color:var(--link-visited); } /* a:focus, a:hover { text-decoration: none; outline: 2px solid rgba(0,0,0,0.08); outline-offset: 2px; } */ /* ========== 页面容器与布局 ========== */ .a_container { display: flex; align-items: flex-start; flex-direction: row; width: min(100%,1000px); margin: auto; overflow: visible; } .container{ display: flex; align-items: flex-start; flex-direction: row; width: min(90%,640px); margin: auto; padding: 20px; overflow: visible; } #article { width: 90%; height: 100%; padding: 20px; h1, h2, h3, h4 { font-weight: 700; margin-top: 2.2rem; margin-bottom: 1rem; line-height: 1.4; letter-spacing: 0.5px; color: var(--headline_color); } h1 { font-size: 1.9rem; padding-bottom: .3rem; } h2 { font-size: 1.6rem; padding-bottom: .2rem; font-family: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif 4', serif; } h3 { font-size: 1.3rem; padding-bottom: .1rem; } h4 { font-size: 1.1rem; } } .categories{ margin-top:20px; width: 10%; ul{ width: 200px; margin: 0; padding: 5px 0 5px 25px; } } p { margin: 0 0 1rem 0; } /* 元信息（如时间、作者） */ .meta { color:var(--muted); font-size:0.95rem; margin-bottom:1rem; } /* ========== 列表、表格、引用 ========== */ ul, ol { margin: 0 0 1rem 1.25rem; } li { margin: 0.25rem 0; } blockquote { margin: 1rem 0; padding-left: 0.8rem; border-left: 3px solid var(--other); color: var(--muted); background: transparent; } /* 极简表格：纯文本感 */ table { width:100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.98rem; } th, td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--hr); text-align: left; } /* ========== 代码样式（内联与块） ========== */ code { font-family: var(--mono); font-size: 0.95em; background: #fdf6e3 !important; padding: 0.08rem 0.25rem; border-radius: 3px; color:var(--other); } pre { font-family: var(--mono); font-size: 0.9rem; background: #fdf6e3 !important; overflow: auto; border: 1px solid var(--hr); } /* ========== 图片（尽量少用） ========== */ img { display:block; max-width:100%; height:auto; margin: .75rem 0; border: 0; } /* ========== 水平线 ========== */ hr { border: none; height:1px; background: var(--hr); margin:1.5rem 0; } /* ========== 表单与按钮（非常基础） ========== */ /* input, textarea, select { font: inherit; border:1px solid var(--hr); padding: 0.35rem 0.5rem; border-radius: 3px; background: transparent; } */ button { cursor: pointer; } /* ========== 小屏响应式（保持单列） ========== */ /* @media (max-width: 720px) { :root { --base-size: 15px; --container-pad: 14px; --measure: 60ch; } .container { padding: 1.25rem var(--container-pad); } .h1 { font-size:1.4rem; } } */ /* ========== 可访问性焦点样式强化 ========== */ :focus { outline-offset: 3px; } /* ========== 打印优化（保留文本感） ========== */ @media print { a { text-decoration: underline; color: #000; } nav, .no-print { display:none; } body { background: #fff; color: #000; } .container { padding: 1in; max-width: 6.5in; } }