页面样式

src/pages/posts/[slug].astro

@@ -164,22 +164,17 @@ const articleJsonLd = {
       </header>
       {post.summary && (
         <section class="article-summary-card" aria-label="AI 文章摘要">
-          <div class="article-summary-dots" aria-hidden="true">
+          <div class="article-summary-header">
-            <span></span>
+            <span class="article-summary-brand">
-            <span></span>
+              <span class="article-summary-icon" aria-hidden="true">✦</span>
-            <span></span>
+              AI 摘要
+            </span>
+            <span class="article-summary-model">QWEN</span>
           </div>
           <p class="article-summary-content">
             <span class="article-summary-text" data-summary-text={post.summary}>{post.summary}</span>
             <span class="article-summary-caret" aria-hidden="true"></span>
           </p>
-          <div class="article-summary-footer">
-            <span class="article-summary-brand">
-              <span aria-hidden="true">✣</span>
-              AI摘要
-            </span>
-            <span class="article-summary-model">QWEN</span>
-          </div>
         </section>
       )}
       {seriesPosts.length > 1 && <PostSeries currentPost={post} posts={seriesPosts} />}

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 {

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: 1px solid rgba(15, 118, 110, 0.16);
-  border-radius: 8px;
+  border-radius: 14px;
-  padding: 34px 20px 16px;
+  padding: 20px 22px 22px;
   background:
-    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 32%),
+    radial-gradient(circle at 100% 0%, rgba(62, 184, 190, 0.12), transparent 40%),
-    linear-gradient(135deg, rgba(250, 252, 247, 0.88), rgba(228, 240, 234, 0.78)),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 248, 245, 0.82));
-    rgba(245, 250, 246, 0.78);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.9),
-    0 14px 34px rgba(58, 51, 38, 0.1);
+    0 10px 28px rgba(35, 71, 66, 0.08);
-  backdrop-filter: blur(18px) saturate(145%);
-  -webkit-backdrop-filter: blur(18px) saturate(145%);
 }
 
 .article-summary-card::before {
   content: "";
   position: absolute;
   top: 0;
-  right: 0;
+  bottom: 0;
   left: 0;
-  height: 25px;
+  width: 3px;
-  border-bottom: 1px solid rgba(133, 162, 153, 0.18);
+  background: linear-gradient(180deg, var(--accent), rgba(62, 184, 190, 0.26));
-  background: rgba(255, 255, 255, 0.28);
   pointer-events: none;
 }
 
-.article-summary-dots {
+.article-summary-header {
-  position: absolute;
+  position: relative;
-  top: 14px;
-  left: 16px;
   z-index: 1;
   display: flex;
-  gap: 8px;
+  align-items: center;
-}
+  justify-content: space-between;
-
+  gap: 12px;
-.article-summary-dots span {
+  margin-bottom: 13px;
-  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;
 }
 
 .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 {
+.article-summary-icon {
-  color: rgba(15, 118, 110, 0.56);
+  display: inline-flex;
-  font-size: 1.05rem;
+  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;
+  border-radius: 12px;
-  background: rgba(22, 31, 36, 0.96);
+  background: #172126;
-  box-shadow: 0 14px 32px rgba(44, 55, 63, 0.12);
+  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;
+  position: relative;
-  top: 0;
+  z-index: 4;
-  right: 0;
-  left: 0;
-  z-index: 2;
   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;
+  padding: 7px 9px 7px 15px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
+  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;
+  border-radius: 7px;
-  padding: 5px 9px;
+  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);

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);

src/styles/site/13-responsive.css

@@ -390,13 +390,8 @@
   }
 
   .article-summary-card {
-    padding: 34px 16px 16px;
+    border-radius: 12px;
-  }
+    padding: 17px 16px 18px;
-
-  .article-summary-footer {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 8px;
   }
 
   .prose .code-block,
@@ -406,8 +401,24 @@
   }
 
   .prose .code-block pre {
-    padding-right: 16px;
+    padding: 14px 13px 16px;
-    padding-left: 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 {