diff options
Diffstat (limited to 'assets/css')
| -rw-r--r-- | assets/css/feed.css | 178 |
1 files changed, 86 insertions, 92 deletions
diff --git a/assets/css/feed.css b/assets/css/feed.css index a81b03e..3264312 100644 --- a/assets/css/feed.css +++ b/assets/css/feed.css @@ -2,130 +2,124 @@ @namespace content "http://purl.org/rss/1.0/modules/content/"; @namespace dc "http://purl.org/dc/elements/1.1/"; +:root { + --bg-color: #f4f5f7; + --card-bg: #ffffff; + --text-main: #222; + --text-muted: #555; + --text-light: #888; + --max-width: 780px; +} + +/* 深色模式适配 */ +@media (prefers-color-scheme: dark) { + :root { + --bg-color: #1a1a1c; + --card-bg: #2c2c2e; + --text-main: #e5e5e7; + --text-muted: #a1a1a6; + --text-light: #707074; + } +} + body, rss, atom|feed { - font-family: -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, - "Noto Sans SC", "PingFang SC", - "Microsoft YaHei", Arial, sans-serif; - background: #f4f5f7; - color: #222; - margin: 0; - padding: 2em 1em; - /* 左右内边距 1em，竖屏不贴边 */ - font-size: 14px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; + background: var(--bg-color); + color: var(--text-main); + margin: 0 auto; /* 合并 margin */ + padding: 2rem 1rem; + font-size: 16px; /* 稍微调大基础字号提升阅读感 */ line-height: 1.6; - - max-width: 780px; - /* 最大宽度，桌面端居中 */ - margin-left: auto; - margin-right: auto; + max-width: var(--max-width); } -channel>title, -atom|feed>atom|title { +/* 标题样式优化 */ +channel > title, +atom|feed > atom|title { display: block; - font-size: 1.7em; - font-weight: 700; - margin: 0 0 1.2em 0; + font-size: 2rem; + font-weight: 800; text-align: center; - letter-spacing: -0.01em; + margin: 0 0 0.5rem 0; + letter-spacing: -0.02em; } +/* 列表卡片 */ item, atom|entry { display: block; - background: #ffffff; - padding: 1.1em 1.2em; - margin-bottom: 1.1em; - border-radius: 14px; - box-shadow: - 0 8px 24px rgba(0, 0, 0, 0.04), - 0 2px 6px rgba(0, 0, 0, 0.03); + background: var(--card-bg); + padding: 1.5rem; + margin-bottom: 1.25rem; + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); + transition: transform 0.2s ease; +} + +item:hover, +atom|entry:hover { + transform: translateY(-2px); /* 轻微悬停效果 */ } -item>title, -atom|entry>atom|title { +item > title, +atom|entry > atom|title { display: block; - font-size: 1.15em; + font-size: 1.25rem; font-weight: 600; - margin-bottom: 0.45em; - color: #111; - letter-spacing: -0.01em; + margin-bottom: 0.5rem; + color: var(--text-main); } -item>description, -atom|entry>atom|summary { - display: block; - color: #555; - line-height: 1.65; - max-height: 16.5em; +/* 多行省略号优化 */ +item > description, +atom|entry > atom|summary { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; /* 最多显示4行，自动加省略号 */ overflow: hidden; - position: relative; + color: var(--text-muted); + font-size: 0.95rem; + line-height: 1.6; } -item>description::after, -atom|entry>atom|summary::after { - content: "…"; - position: absolute; - right: 0.3em; - bottom: 0; - padding-left: 1.5em; - background: linear-gradient(to right, - rgba(255, 255, 255, 0), - #ffffff 70%); - font-weight: 600; +/* 元数据（日期） */ +item > pubDate, +atom|entry > atom|updated { + display: block; + color: var(--text-light); + font-size: 0.85rem; + margin-top: 0.75rem; } -link, -guid, -pubDate, -author, -category, -comments, -source, -enclosure, -content|encoded, -dc|creator, -lastBuildDate, -atom|id, -atom|link, -atom|updated, -atom|published, -atom|author, -atom|category, -atom|rights, -atom|content, -language, -generator { +/* 隐藏不需要的元素 */ +link, guid, author, category, comments, source, enclosure, +content|encoded, dc|creator, lastBuildDate, +atom|id, atom|link, atom|updated, atom|published, atom|author, +atom|category, atom|rights, atom|content, +language, generator { display: none; } -channel>description, -atom|feed>atom|subtitle { +/* 副标题与说明文字 */ +channel > description, +atom|feed > atom|subtitle { display: block; - margin: 0.4em 0 2em 0; - /* 与条目明显拉开 */ text-align: center; - color: #666; - font-size: 0.95em; + color: var(--text-muted); + font-size: 1rem; + margin-bottom: 2rem; } -channel>title, -atom|feed>atom|title { - margin-bottom: 0.4em; - /* 原来较紧，这里放松 */ -} - -atom|feed>atom|subtitle::after, -channel>description::after { +channel > description::after, +atom|feed > atom|subtitle::after { content: "这是一个订阅源（Feed）。复制当前URL到任何支持 Atom/RSS 的阅读器，即可订阅本博客的最新文章。\A以下展示了此订阅源包含的最新文章："; display: block; - text-align: center; - font-size: 0.95em; - color: #666; - margin: 1em 0 2em 0; - line-height: 1.5; white-space: pre-wrap; + font-size: 0.875rem; + color: var(--text-light); + margin-top: 1rem; + padding: 1rem; + border-top: 1px solid rgba(128, 128, 128, 0.2); }
\ No newline at end of file |