/* static/css/style.css */
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body {
/* background-color: #FFFFFF; */
/* 这里的 Data URI 包含了完整的 SVG 代码 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%23FFFFFF' stroke-width='0.2' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cuse fill='%23fcfcfc' href='%23s' y='2'/%3E%3Cuse fill='%23fcfcfc' href='%23s' x='1' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s' x='2' y='2'/%3E%3Cuse fill='%23fafafa' href='%23s'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='2'/%3E%3Cuse fill='%23f7f7f7' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%23f5f5f5'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%23f2f2f2'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%23FFFFFF'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%23efefef'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%230014FC'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%230014FC'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(23.05) translate(-956.62 -717.46)'%3E%3Cg fill='%230014FC'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
/* 核心属性：固定背景，不随页面滚动 */
background-attachment: fixed;
/* 核心属性：确保背景填满屏幕 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
:root {
/* --glass-bg: rgba(255, 255, 255, 0.7); 半透明底色 */
--glass-border: rgba(255, 255, 255, 0.4);
--primary: #3b82f6;
--text-main: #1e293b;
--text-muted: #64748b;
--radius: 16px;
}
/* 文章容器：磨砂玻璃效果 */
.post {
max-width: 800px;
margin: 60px auto;
padding: 40px;
background: var(--glass-bg);
backdrop-filter: blur(12px); /* 核心：磨砂模糊 */
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
/* 头部：去掉了沉重的边框，改用间距感 */
.post-header {
margin-bottom: 32px;
}
.post-title {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 12px;
}
.post-meta {
font-family: monospace; /* 模拟时间戳的精密感 */
color: var(--text-muted);
font-size: 0.85rem;
}
/* 标签：更细致的 # 符号处理 */
.post-tags {
margin: 20px 0;
font-size: 0.9rem;
}
.post-tags .tag {
display: inline-block;
color: var(--primary);
background: rgba(59, 130, 246, 0.1);
padding: 2px 10px;
border-radius: 6px;
margin-right: 8px;
text-decoration: none;
transition: 0.2s;
}
.post-tags .tag:hover {
background: var(--primary);
color: white;
}
/* 信源区块：极致收纳（解决“太大”的问题） */
.post-evidences,.related-box {
background: transparent;
/* 重点：只给左边加一根很粗的蓝色线条，或者上下加极细的线 */
/* border-left: 4px solid #636ff7; */
/* border-top: 1px solid rgba(0, 20, 252, 0.1); */
/* border-bottom: 1px solid rgba(0, 20, 252, 0.1); */
padding: 1px 20px;
border-radius: 10px; /* 线条感设计建议用直角或极小圆角 */
margin: 30px 0;
}
.post-evidences h2 , .related-title {
font-size: 1rem; /* 减小字号 */
margin-bottom: 12px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.evidence-list li , .related-box li{
font-size: 0.85rem; /* 缩小文字 */
margin-bottom: 6px;
color: #475569;
}
.evidence-list a, .related-box a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
opacity: 0.8;
}
.evidence-list a:hover, .related-box a:hover {
opacity: 1;
text-decoration: underline;
}
/* */
/* 底部导航：进化为浮动胶囊按钮 */
.post-navigation {
margin-top: 50px;
display: flex;
justify-content: center;
}
.post-navigation a {
display: inline-flex;
align-items: center;
padding: 10px 24px;
background: var(--text-main); /* 深色按钮 */
color: #fff !important;
border-radius: 100px; /* 胶囊形状 */
font-weight: 500;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.post-navigation a:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
background: #000;
}
/* 悬停效果：呼应背景的蓝色 */
.prev-next-posts a:hover {
background: rgba(255, 255, 255, 0.9);
color: #4285f4; /* 使用之前提到的蓝色 */
border-color: rgba(66, 133, 244, 0.3);
box-shadow: 0 8px 24px rgba(66, 133, 244, 0.12);
}
.prev-next-posts {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 20px;
margin: 60px auto;
max-width: 800px; /* 根据你的正文宽度调整 */
padding: 0 20px;
}
.prev-next-posts {
display: flex;
/* 关键 1：不要用 center，改用 flex-start */
justify-content: flex-start;
align-items: center;
margin: 60px auto;
max-width: 800px;
padding: 0 20px;
/* 移除 gap，因为我们要靠 margin 撑开空间 */
}
.prev-next-posts a {
display: flex;
align-items: center;
padding: 12px 24px;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 16px;
color: #555;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
/* 防止按钮太宽 */
max-width: 45%;
}
/* 关键 2：上一篇样式 - 永远靠左，不需要额外 margin */
.prev-post {
margin-right: auto;
}
/* 关键 3：下一篇样式 - 重点在这里 */
.next-post {
/* 如果它是容器里的唯一子元素，或者左边有兄弟，
margin-left: auto 都会把它推向最右侧 */
margin-left: auto;
text-align: right;
justify-content: flex-end;
}
/* 悬停动画保持之前的逻辑 */
.prev-post:hover { transform: translateX(-5px); }
.next-post:hover { transform: translateX(5px); }
/* 移动端适配 */
@media (max-width: 600px) {
.prev-next-posts {
flex-direction: column;
gap: 12px;
}
.prev-next-posts a {
width: 100%;
justify-content: center !important;
}
}