diff --git a/src/pages/posts/[slug].astro b/src/pages/posts/[slug].astro index 5fa53ff..4076845 100644 --- a/src/pages/posts/[slug].astro +++ b/src/pages/posts/[slug].astro @@ -164,22 +164,17 @@ const articleJsonLd = { {post.summary && (
-
)} {seriesPosts.length > 1 && } diff --git a/src/styles/site/05-cards-sidebar.css b/src/styles/site/05-cards-sidebar.css index dc6ef35..83e9f2f 100644 --- a/src/styles/site/05-cards-sidebar.css +++ b/src/styles/site/05-cards-sidebar.css @@ -401,11 +401,8 @@ position: sticky; top: 90px; display: grid; - max-height: calc(100vh - 110px); align-content: start; gap: 20px; - overflow-y: auto; - scrollbar-width: thin; } .article-author-card { diff --git a/src/styles/site/06-article-prose.css b/src/styles/site/06-article-prose.css index 049db05..1de4aac 100644 --- a/src/styles/site/06-article-prose.css +++ b/src/styles/site/06-article-prose.css @@ -137,68 +137,47 @@ position: relative; margin: 0 0 30px; overflow: hidden; - border: 1px solid rgba(133, 162, 153, 0.34); - border-radius: 8px; - padding: 34px 20px 16px; + border: 1px solid rgba(15, 118, 110, 0.16); + border-radius: 14px; + padding: 20px 22px 22px; background: - radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%), - linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)), - rgba(245, 250, 246, 0.78); + radial-gradient(circle at 100% 0%, rgba(62, 184, 190, 0.12), transparent 40%), + linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 245, 0.82)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), - 0 14px 34px rgba(58, 51, 38, 0.1); - backdrop-filter: blur(18px) saturate(145%); - -webkit-backdrop-filter: blur(18px) saturate(145%); + 0 10px 28px rgba(35, 71, 66, 0.08); } .article-summary-card::before { content: ""; position: absolute; top: 0; - right: 0; + bottom: 0; left: 0; - height: 25px; - border-bottom: 1px solid rgba(133, 162, 153, 0.18); - background: rgba(255, 255, 255, 0.28); + width: 3px; + background: linear-gradient(180deg, var(--accent), rgba(62, 184, 190, 0.26)); pointer-events: none; } -.article-summary-dots { - position: absolute; - top: 14px; - left: 16px; +.article-summary-header { + position: relative; z-index: 1; display: flex; - gap: 8px; -} - -.article-summary-dots span { - width: 10px; - height: 10px; - border-radius: 999px; - box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12); -} - -.article-summary-dots span:nth-child(1) { - background: #ff6b63; -} - -.article-summary-dots span:nth-child(2) { - background: #ffc247; -} - -.article-summary-dots span:nth-child(3) { - background: #4ecb71; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 13px; } .article-summary-content { position: relative; z-index: 1; margin: 0; - color: #59615f; + color: #465552; font-family: "LXGW WenKai", "霞鹜文楷", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; font-size: 1rem; - line-height: 1.9; + line-height: 1.8; + overflow-wrap: anywhere; } .article-summary-caret { @@ -211,33 +190,36 @@ animation: summary-caret-blink 0.9s steps(1) infinite; } -.article-summary-footer { - position: relative; - z-index: 1; - display: flex; - align-items: center; - justify-content: space-between; - gap: 16px; - margin-top: 24px; - color: rgba(85, 95, 94, 0.56); - font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace; - font-size: 0.95rem; - font-weight: 900; - letter-spacing: 0; -} - .article-summary-brand { display: inline-flex; align-items: center; gap: 8px; + color: #376d67; + font-family: "JetBrains Mono", Consolas, "Microsoft YaHei", monospace; + font-size: 0.86rem; + font-weight: 800; } -.article-summary-brand span { - color: rgba(15, 118, 110, 0.56); - font-size: 1.05rem; +.article-summary-icon { + display: inline-flex; + width: 26px; + height: 26px; + align-items: center; + justify-content: center; + border-radius: 8px; + color: #fff; + background: linear-gradient(135deg, #2f9f96, #5dbcc0); + box-shadow: 0 5px 12px rgba(47, 159, 150, 0.2); } .article-summary-model { + border: 1px solid rgba(15, 118, 110, 0.14); + border-radius: 999px; + padding: 4px 9px; + color: rgba(55, 109, 103, 0.72); + font: 700 0.7rem/1.2 "JetBrains Mono", Consolas, monospace; + letter-spacing: 0.06em; + background: rgba(255, 255, 255, 0.56); white-space: nowrap; } @@ -630,9 +612,9 @@ margin: 1.25em 0; overflow: hidden; border: 1px solid rgba(15, 118, 110, 0.16); - border-radius: 8px; - background: rgba(22, 31, 36, 0.96); - box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12); + border-radius: 12px; + background: #172126; + box-shadow: 0 10px 28px rgba(25, 38, 44, 0.16); } .prose .code-block pre::-webkit-scrollbar, @@ -663,9 +645,10 @@ } .prose .code-block pre { + margin: 0; max-width: 100%; max-height: none; - padding: 44px 18px 18px; + padding: 16px 18px 18px; background: transparent; white-space: normal !important; word-wrap: normal !important; @@ -745,19 +728,16 @@ } .code-block-header { - position: absolute; - top: 0; - right: 0; - left: 0; - z-index: 2; + position: relative; + z-index: 4; display: flex; - min-height: 42px; + min-height: 44px; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); - padding: 8px 10px 8px 16px; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); + padding: 7px 9px 7px 15px; + background: rgba(255, 255, 255, 0.035); pointer-events: none; } @@ -809,8 +789,8 @@ justify-content: center; min-height: 30px; border: 1px solid rgba(255, 255, 255, 0.18); - border-radius: 8px; - padding: 5px 9px; + border-radius: 7px; + padding: 6px 10px; color: rgba(255, 255, 255, 0.86); font: 700 0.78rem/1 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: rgba(255, 255, 255, 0.1); diff --git a/src/styles/site/12-theme.css b/src/styles/site/12-theme.css index 5325dcb..d61e09e 100644 --- a/src/styles/site/12-theme.css +++ b/src/styles/site/12-theme.css @@ -152,6 +152,20 @@ box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32); } +:root[data-theme='dark'] .article-summary-content { + color: rgba(229, 239, 241, 0.86); +} + +:root[data-theme='dark'] .article-summary-brand { + color: rgba(166, 226, 217, 0.9); +} + +:root[data-theme='dark'] .article-summary-model { + border-color: rgba(139, 224, 213, 0.2); + color: rgba(181, 229, 222, 0.72); + background: rgba(139, 224, 213, 0.08); +} + :root[data-theme='dark'] .prose :not(pre) > code { border-color: rgba(139, 224, 213, 0.3); color: var(--accent); diff --git a/src/styles/site/13-responsive.css b/src/styles/site/13-responsive.css index b3d97da..4971495 100644 --- a/src/styles/site/13-responsive.css +++ b/src/styles/site/13-responsive.css @@ -390,13 +390,8 @@ } .article-summary-card { - padding: 34px 16px 16px; - } - - .article-summary-footer { - align-items: flex-start; - flex-direction: column; - gap: 8px; + border-radius: 12px; + padding: 17px 16px 18px; } .prose .code-block, @@ -406,8 +401,24 @@ } .prose .code-block pre { - padding-right: 16px; - padding-left: 16px; + padding: 14px 13px 16px; + font-size: 0.86rem; + } + + .code-block-header { + min-height: 42px; + padding: 6px 7px 6px 12px; + } + + .code-block-toolbar { + gap: 5px; + } + + .code-block-copy, + .code-block-toggle { + min-height: 29px; + padding: 5px 8px; + font-size: 0.72rem; } .prose table {