Mayx's Home Page
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.

124 lines
3.0 KiB

  1. @namespace atom "http://www.w3.org/2005/Atom";
  2. @namespace content "http://purl.org/rss/1.0/modules/content/";
  3. @namespace dc "http://purl.org/dc/elements/1.1/";
  4. :root {
  5. --bg-color: #f4f5f7;
  6. --card-bg: #ffffff;
  7. --text-main: #222;
  8. --text-muted: #555;
  9. --text-light: #888;
  10. --max-width: 780px;
  11. }
  12. /* 深色模式适配 */
  13. @media (prefers-color-scheme: dark) {
  14. :root {
  15. --bg-color: #1a1a1c;
  16. --card-bg: #2c2c2e;
  17. --text-main: #e5e5e7;
  18. --text-muted: #a1a1a6;
  19. --text-light: #707074;
  20. }
  21. }
  22. body,
  23. rss,
  24. atom|feed {
  25. font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  26. background: var(--bg-color);
  27. color: var(--text-main);
  28. margin: 0 auto; /* 合并 margin */
  29. padding: 2rem 1rem;
  30. font-size: 16px; /* 稍微调大基础字号提升阅读感 */
  31. line-height: 1.6;
  32. max-width: var(--max-width);
  33. }
  34. /* 标题样式优化 */
  35. channel > title,
  36. atom|feed > atom|title {
  37. display: block;
  38. font-size: 2rem;
  39. font-weight: 800;
  40. text-align: center;
  41. margin: 0 0 0.5rem 0;
  42. letter-spacing: -0.02em;
  43. }
  44. /* 列表卡片 */
  45. item,
  46. atom|entry {
  47. display: block;
  48. background: var(--card-bg);
  49. padding: 1.5rem;
  50. margin-bottom: 1.25rem;
  51. border-radius: 16px;
  52. box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  53. transition: transform 0.2s ease;
  54. }
  55. item:hover,
  56. atom|entry:hover {
  57. transform: translateY(-2px); /* 轻微悬停效果 */
  58. }
  59. item > title,
  60. atom|entry > atom|title {
  61. display: block;
  62. font-size: 1.25rem;
  63. font-weight: 600;
  64. margin-bottom: 0.5rem;
  65. color: var(--text-main);
  66. }
  67. /* 多行省略号优化 */
  68. item > description,
  69. atom|entry > atom|summary {
  70. display: -webkit-box;
  71. -webkit-box-orient: vertical;
  72. -webkit-line-clamp: 4; /* 最多显示4行,自动加省略号 */
  73. overflow: hidden;
  74. color: var(--text-muted);
  75. font-size: 0.95rem;
  76. line-height: 1.6;
  77. }
  78. /* 元数据(日期) */
  79. item > pubDate,
  80. atom|entry > atom|updated {
  81. display: block;
  82. color: var(--text-light);
  83. font-size: 0.85rem;
  84. margin-top: 0.75rem;
  85. }
  86. /* 隐藏不需要的元素 */
  87. link, guid, author, category, comments, source, enclosure,
  88. content|encoded, dc|creator, lastBuildDate,
  89. atom|id, atom|link, atom|updated, atom|published, atom|author,
  90. atom|category, atom|rights, atom|content,
  91. language, generator {
  92. display: none;
  93. }
  94. /* 副标题与说明文字 */
  95. channel > description,
  96. atom|feed > atom|subtitle {
  97. display: block;
  98. text-align: center;
  99. color: var(--text-muted);
  100. font-size: 1rem;
  101. margin-bottom: 2rem;
  102. }
  103. channel > description::after,
  104. atom|feed > atom|subtitle::after {
  105. content: "这是一个订阅源(Feed)。复制当前URL到任何支持 Atom/RSS 的阅读器,即可订阅本博客的最新文章。\A以下展示了此订阅源包含的最新文章:";
  106. display: block;
  107. white-space: pre-wrap;
  108. font-size: 0.875rem;
  109. color: var(--text-light);
  110. margin-top: 1rem;
  111. padding: 1rem;
  112. border-top: 1px solid rgba(128, 128, 128, 0.2);
  113. }