You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
blog/assets/css/feed.css

125 lines
3.0 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

@namespace atom "http://www.w3.org/2005/Atom";
@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: 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: var(--max-width);
}
/* 标题样式优化 */
channel > title,
atom|feed > atom|title {
display: block;
font-size: 2rem;
font-weight: 800;
text-align: center;
margin: 0 0 0.5rem 0;
letter-spacing: -0.02em;
}
/* 列表卡片 */
item,
atom|entry {
display: block;
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 {
display: block;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-main);
}
/* 多行省略号优化 */
item > description,
atom|entry > atom|summary {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* 最多显示4行自动加省略号 */
overflow: hidden;
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* 元数据(日期) */
item > pubDate,
atom|entry > atom|updated {
display: block;
color: var(--text-light);
font-size: 0.85rem;
margin-top: 0.75rem;
}
/* 隐藏不需要的元素 */
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 {
display: block;
text-align: center;
color: var(--text-muted);
font-size: 1rem;
margin-bottom: 2rem;
}
channel > description::after,
atom|feed > atom|subtitle::after {
content: "这是一个订阅源Feed。复制当前URL到任何支持 Atom/RSS 的阅读器,即可订阅本博客的最新文章。\A以下展示了此订阅源包含的最新文章";
display: block;
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);
}