Make image responsive by removing fixed width

Removed fixed width style from image for better responsiveness.

README-en.md

@@ -15,11 +15,9 @@
 <br>
 
 <p align="center">
-  <img
-    src="./docs/preview-en.png"
-    alt="preview-en"
-    style="max-width: 700px; width: 100%; height: auto;"
-  />
+    <img width="865" height="472" alt="image" src="https://github.com/user-attachments/assets/f0c8c75a-43ac-4e15-bce2-a1288c3b4598" 
+        alt="preview-en"
+    />
 </p>
 
 <br>

README.md

@@ -17,11 +17,9 @@
 <br>
 
 <p align="center">
-  <img
-    src="./docs/preview-zh.png"
-    alt="preview-zh"
-    style="max-width: 700px; width: 100%; height: auto;"
-  />
+    <img width="868" height="503" alt="image" src="https://github.com/user-attachments/assets/f9551692-1720-42c2-a75d-576e2b8dc571" 
+        alt="preview-zh" 
+    />
 </p>
 
 <br>

public/images/copy-svgrepo-com.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 460 460" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M425.934,0H171.662c-18.122,0-32.864,14.743-32.864,32.864v77.134h30V32.864c0-1.579,1.285-2.864,2.864-2.864h254.272
+				c1.579,0,2.864,1.285,2.864,2.864v254.272c0,1.58-1.285,2.865-2.864,2.865h-74.729v30h74.729
+				c18.121,0,32.864-14.743,32.864-32.865V32.864C458.797,14.743,444.055,0,425.934,0z"/>
+			<path d="M288.339,139.998H34.068c-18.122,0-32.865,14.743-32.865,32.865v254.272C1.204,445.257,15.946,460,34.068,460h254.272
+				c18.122,0,32.865-14.743,32.865-32.864V172.863C321.206,154.741,306.461,139.998,288.339,139.998z M288.341,430H34.068
+				c-1.58,0-2.865-1.285-2.865-2.864V172.863c0-1.58,1.285-2.865,2.865-2.865h254.272c1.58,0,2.865,1.285,2.865,2.865v254.273h0.001
+				C291.206,428.715,289.92,430,288.341,430z"/>
+		</g>
+	</g>
+</g>
+</svg>

public/images/correct-signal-svgrepo-com.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 335.765 335.765"
+	 xml:space="preserve">
+<g>
+	<g>
+		<polygon points="311.757,41.803 107.573,245.96 23.986,162.364 0,186.393 107.573,293.962 335.765,65.795 		"/>
+	</g>
+</g>
+</svg>

src/components/Divider.astro

@@ -0,0 +1,40 @@
+<div class="divider" aria-hidden="true"></div>
+
+<style>
+    .divider {
+        --divider-red: var(--deep-red);
+        --divider-blue: var(--deep-blue);
+
+        --px: 4px; /* 单个像素点大小 */
+        --stripe: 16px; /* 每段斜纹横向长度 */
+        --period: 64px; /* 一个完整重复周期 */
+        --row-pattern: linear-gradient(
+            90deg,
+            var(--divider-red) 0 var(--stripe),
+            transparent var(--stripe) calc(var(--stripe) * 2),
+            var(--divider-blue) calc(var(--stripe) * 2) calc(var(--stripe) * 3),
+            transparent calc(var(--stripe) * 3) calc(var(--stripe) * 4)
+        );
+
+        width: 100%;
+        height: calc(var(--px) * 3);
+        margin-bottom: 1rem;
+
+        background:
+            var(--row-pattern) 0 0 / var(--period) var(--px) repeat-x,
+            var(--row-pattern) calc(-1 * var(--px)) calc(1 * var(--px)) /
+                var(--period) var(--px) repeat-x,
+            var(--row-pattern) calc(-2 * var(--px)) calc(2 * var(--px)) /
+                var(--period) var(--px) repeat-x,
+            var(--row-pattern) calc(-3 * var(--px)) calc(3 * var(--px)) /
+                var(--period) var(--px) repeat-x;
+
+        pointer-events: none;
+    }
+
+    :global(html.dark) .divider,
+    :global(.dark) .divider {
+        --divider-red: #ff8a8a;
+        --divider-blue: #9ecbff;
+    }
+</style>

src/components/Footer.astro

@@ -1,12 +1,14 @@
 ---
 import { getLangFromUrl, getTranslations, type Lang } from "@/i18n";
 import BuildHashBlocks from "@/components/BuildHashBlocks.astro";
+import Divider from "@/components/Divider.astro";
 const commit = import.meta.env.PUBLIC_GIT_COMMIT || "unknown";
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
 ---
 
 <footer class="footer">
+  <Divider />
   <a
     href="https://github.com/ClovertaTheTrilobita/SanYeCao-blog"
     class="github"
@@ -82,22 +84,6 @@ const t = getTranslations(lang);
     text-align: center;
   }
 
-  .footer::before {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 12px;
-    margin-bottom: 1rem;
-    background: repeating-linear-gradient(
-      -45deg,
-      var(--deep-red) 0 14px,
-      transparent 14px 28px,
-      var(--deep-blue) 28px 42px,
-      transparent 42px 56px
-    );
-    pointer-events: none;
-  }
-
   .footer-content-mobile {
     display: none;
   }
@@ -108,16 +94,6 @@ const t = getTranslations(lang);
     /* display: inline-flex; */
   }
 
-  :global(.dark) .footer::before {
-    background: repeating-linear-gradient(
-      -45deg,
-      #ff8a8a 0 14px,
-      transparent 14px 28px,
-      #9ecbff 28px 42px,
-      transparent 42px 56px
-    );
-  }
-
   @media (max-width: 700px) {
     .footer-content-pc {
       display: none;

src/components/FriendlyLinks/FriendlyLinkItem.astro

@@ -24,10 +24,18 @@ const { name, description, avatar, url } = Astro.props;
         align-items: center;
         gap: 1rem;
         padding: 0.1rem 0.5rem;
-        background: #fffcf1;
-        border: 2px solid #ede3d0;
+        background: #fff5ea;
+        border-top: 1px dotted var(--deep-blue); /* 上下点线 */
+        border-left: 1px dotted var(--deep-blue);
+        border-bottom: 2px solid var(--deep-blue);
+        border-right: 2px solid var(--deep-blue);
         text-decoration: none;
         color: inherit;
+
+        transition:
+            transform 0.2s ease,
+            background-color 0.2s ease,
+            box-shadow 0.2s ease;
     }
 
     .friendly-link-text {
@@ -63,12 +71,14 @@ const { name, description, avatar, url } = Astro.props;
     }
 
     .friendly-link-card:hover {
-        background: #efe2be;
+        /* background: #efe2be; */
+        transform: translate(-3px, -3px);
+        box-shadow: 5px 6px 12px rgb(0 0 0 / 18%);
     }
 
     :global(.dark) .friendly-link-card {
-        background: #3a352b;
-        border-color: #8f8268;
+        background: rgba(127, 127, 127, 0.12);
+        border-color: #9ecbff;
     }
 
     :global(.dark) .friendly-link-title {

src/components/FriendlyLinks/FriendsDescription.astro

@@ -64,6 +64,11 @@ avatar: 'https://s2.loli.net/2025/11/22/tiDKuzdqycx1v9B.png'
         border-radius: 3px;
         padding: 0rem;
         overflow-x: auto;
+        /* color: var(--text-color); */
+    }
+
+    :global(.dark) .friend-code-block {
+        background: rgba(127, 127, 127, 0.12);
     }
 
     .friend-code-block pre {

src/components/Header.astro

@@ -2,6 +2,7 @@
 import Navigation from "./Navigation.astro";
 import ThemeIcon from "./ThemeIcon.astro";
 import { getLangFromUrl, getTranslations } from "@/i18n";
+import Divider from "@/components/Divider.astro";
 
 const lang = getLangFromUrl(Astro.url);
 const t = getTranslations(lang);
@@ -25,6 +26,9 @@ const t = getTranslations(lang);
         </div>
         <Navigation />
     </nav>
+    <div class="divider">
+        <Divider />
+    </div>
 </header>
 
 <style>
@@ -81,6 +85,11 @@ const t = getTranslations(lang);
         font-size: clamp(1.6rem, 6vw, 2.5rem);
     }
 
+    .divider {
+        margin-top: 0.2rem;
+        margin-bottom: 2rem;
+    }
+
     @media (max-width: 768px) {
         .site-header {
             padding-top: 0.25rem;

src/components/Navigation.astro

@@ -43,37 +43,10 @@ const t = getTranslations(lang);
 <style>
     .site-nav {
         margin: 1rem 0;
-        padding-bottom: 3rem;
+        padding-bottom: 1rem;
         position: relative;
     }
 
-    .site-nav::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 12px;
-        background: repeating-linear-gradient(
-            -45deg,
-            var(--deep-red) 0 14px,
-            transparent 14px 28px,
-            var(--deep-blue) 28px 42px,
-            transparent 42px 56px
-        );
-        pointer-events: none;
-    }
-
-    :global(.dark) .site-nav::after {
-        background: repeating-linear-gradient(
-            -45deg,
-            #ff8a8a 0 14px,
-            transparent 14px 28px,
-            #9ecbff 28px 42px,
-            transparent 42px 56px
-        );
-    }
-
     .site-nav-desktop {
         display: flex;
         gap: 1.5rem;

src/components/Posts/PostItem.astro

@@ -64,6 +64,7 @@ const tags = data.tags;
 
   .tag {
     font-family:
+      "Noto Sans SC",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,
@@ -148,6 +149,7 @@ const tags = data.tags;
   .post-title {
     margin: 0;
     font-family:
+      "Noto Sans SC",
       system-ui,
       -apple-system,
       BlinkMacSystemFont,

src/layouts/BaseLayout.astro

@@ -42,6 +42,65 @@ const {
 		<title>{pageTitle}</title>
 	</head>
 	<FloatingActions />
+	<script is:inline>
+		function addCodeCopyButtons() {
+			document.querySelectorAll("pre").forEach((pre) => {
+				if (pre.querySelector(":scope > .code-copy-button")) return;
+
+				const code = pre.querySelector("code");
+				if (!code) return;
+
+				const button = document.createElement("button");
+				button.className = "code-copy-button";
+				button.type = "button";
+				button.setAttribute("aria-label", "复制代码");
+				button.title = "复制代码";
+
+				const icon = document.createElement("img");
+				icon.className = "code-copy-icon";
+				icon.src = "/images/copy-svgrepo-com.svg";
+				icon.alt = "";
+				icon.setAttribute("aria-hidden", "true");
+
+				button.appendChild(icon);
+
+				button.addEventListener("click", async () => {
+					const text = code.textContent ?? "";
+
+					try {
+						await navigator.clipboard.writeText(text);
+					} catch {
+						const textarea = document.createElement("textarea");
+						textarea.value = text;
+						textarea.style.position = "fixed";
+						textarea.style.opacity = "0";
+
+						document.body.appendChild(textarea);
+						textarea.select();
+						document.execCommand("copy");
+						textarea.remove();
+					}
+
+					icon.src = "/images/correct-signal-svgrepo-com.svg";
+					button.setAttribute("aria-label", "已复制");
+					button.title = "已复制";
+					button.classList.add("copied");
+
+					window.setTimeout(() => {
+						icon.src = "/images/copy-svgrepo-com.svg";
+						button.setAttribute("aria-label", "复制代码");
+						button.title = "复制代码";
+						button.classList.remove("copied");
+					}, 1500);
+				});
+
+				pre.appendChild(button);
+			});
+		}
+
+		addCodeCopyButtons();
+		document.addEventListener("astro:page-load", addCodeCopyButtons);
+	</script>
 
 	<body>
 		<Header />

src/pages/[lang]/tags/index.astro

@@ -40,6 +40,7 @@ const pageTitle = lang === "zh" ? "标签索引" : "Tag Index";
 
     .tag {
         font-family:
+            "Noto Sans SC",
             system-ui,
             -apple-system,
             BlinkMacSystemFont,

src/styles/code.css

@@ -0,0 +1,86 @@
+pre {
+    padding: 1rem;
+    border-radius: 3px;
+    overflow-x: auto;
+    line-height: 1.6;
+    margin: 1rem 0;
+    position: relative;
+
+}
+
+/* pre:has(> .code-copy-button) {
+    padding-top: 2.75rem;
+} */
+
+code {
+    font-family: "Maple Mono", monospace;
+    font-size: 0.96rem;
+}
+
+/* 行内代码 */
+p code,
+li code,
+blockquote code,
+td code {
+    padding: 0.15em 0.4em;
+    border-radius: 0.25rem;
+    background: rgba(127, 127, 127, 0.12);
+}
+
+.code-copy-button {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    z-index: 2;
+
+    display: grid;
+    place-items: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.35rem;
+
+    border-top: 1px dotted var(--deep-blue);
+    border-left: 1px dotted var(--deep-blue);
+    border-right: 2px solid var(--deep-blue);
+    border-bottom: 2px solid var(--deep-blue);
+    border-radius: 3px;
+
+    background: rgba(250, 250, 250, 0.7);
+    cursor: pointer;
+
+    transition:
+        transform 0.15s ease,
+        background-color 0.15s ease,
+        box-shadow 0.15s ease;
+}
+
+.code-copy-icon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    pointer-events: none;
+}
+
+.code-copy-button:hover {
+    background: rgb(250, 250, 250, 0.9);
+    transform: translate(-1px, -1px);
+    box-shadow: 3px 4px 8px rgb(0 0 0 / 18%);
+}
+
+.code-copy-button:active {
+    transform: translate(0, 0);
+    box-shadow: none;
+}
+
+.code-copy-button.copied {
+    background: #dcebd5;
+}
+
+/* .dark .code-copy-button {
+    border-color: #9ecbff;
+}
+
+.dark .code-copy-button:hover {
+    box-shadow: 3px 4px 8px rgb(0 0 0 / 35%);
+} */

src/styles/global.css

@@ -4,29 +4,9 @@
 @import "./latest-comments.css";
 @import "./variables.css";
 @import "./dialog.css";
+@import "./posts.css";
+@import "./code.css";
 
-pre {
-  padding: 1rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  line-height: 1.6;
-  margin: 1rem 0;
-}
-
-code {
-  font-family: "Maple Mono", monospace;
-  font-size: 0.96rem;
-}
-
-/* 行内代码 */
-p code,
-li code,
-blockquote code,
-td code {
-  padding: 0.15em 0.4em;
-  border-radius: 0.25rem;
-  background: rgba(127, 127, 127, 0.12);
-}
 
 article svg.flowchart,
 article svg[class*="flowchart"],
@@ -117,7 +97,7 @@ h1 {
 
 
 a {
-  color: #3D74B6;
+  color: var(--url-color);
   font-weight: 700;
   text-decoration: none;
 }
@@ -161,112 +141,4 @@ img {
   max-width: 100%;
   height: auto;
   display: block;
-}
-
-/* 避免 Markdown 内容撑宽正文 */
-.post-article,
-.post-content {
-  min-width: 0;
-  max-width: 100%;
-}
-
-/* 块级公式过长时独立横向滚动 */
-.post-content .katex-display {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  box-sizing: border-box;
-  padding: 0.25rem 0;
-  -webkit-overflow-scrolling: touch;
-}
-
-.post-content .katex-display > .katex {
-  display: inline-block;
-  min-width: max-content;
-  white-space: nowrap;
-}
-
-/* =========================
-   Markdown details 下拉栏
-   ========================= */
-
-.post-content details {
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  margin: 1.5rem 0;
-  overflow: hidden;
-
-  border-top: 2px solid #1e3a5f;
-  border-radius: 0 0 0.5rem 0.5rem;
-  background: rgba(128, 128, 128, 0.14);
-}
-
-.post-content details summary {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  padding: 0.8rem 0.9rem;
-
-  cursor: pointer;
-  font-weight: 600;
-  user-select: none;
-  list-style: none;
-}
-
-.post-content details summary::-webkit-details-marker {
-  display: none;
-}
-
-.post-content details summary::before {
-  content: "›";
-  display: inline-block;
-  flex: 0 0 auto;
-  font-size: 1.25rem;
-  line-height: 1;
-  transition: transform 0.2s ease;
-}
-
-.post-content details[open] summary::before {
-  transform: rotate(90deg);
-}
-
-.post-content details > :not(summary) {
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-right: 1rem;
-}
-
-.post-content details > ol,
-.post-content details > ul {
-  padding: 0.6rem 1rem 1rem 3rem;
-}
-
-.post-content details li {
-  margin: 0.8rem 0;
-}
-
-blockquote {
-  margin: 1.25rem 0;
-  padding: 0.75rem 1rem;
-  border-left: 4px solid var(--deep-red);
-  background: rgba(128, 128, 128, 0.1);
-  border-radius: 0 0.4rem 0.4rem 0;
-}
-
-blockquote p {
-  margin: 0;
-}
-
-blockquote p + p {
-  margin-top: 0.75rem;
-}
+}

src/styles/latest-comments.css

@@ -38,7 +38,7 @@
     margin: 0 0 14px 0;
     padding: 0.6rem 1rem;
     border: 2px dashed #aeb8c2;
-    background-color: #fbf5f2;
+    background-color: var(--comment-background);
 
 }
 

src/styles/posts.css

@@ -0,0 +1,108 @@
+
+/* 避免 Markdown 内容撑宽正文 */
+.post-article,
+.post-content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* 块级公式过长时独立横向滚动 */
+.post-content .katex-display {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  box-sizing: border-box;
+  padding: 0.25rem 0;
+  -webkit-overflow-scrolling: touch;
+}
+
+.post-content .katex-display > .katex {
+  display: inline-block;
+  min-width: max-content;
+  white-space: nowrap;
+}
+
+/* =========================
+   Markdown details 下拉栏
+   ========================= */
+
+.post-content details {
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin: 1.5rem 0;
+  overflow: hidden;
+
+  border-top: 2px solid #1e3a5f;
+  border-radius: 0 0 0.5rem 0.5rem;
+  background: rgba(128, 128, 128, 0.14);
+}
+
+.post-content details summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding: 0.8rem 0.9rem;
+
+  cursor: pointer;
+  font-weight: 600;
+  user-select: none;
+  list-style: none;
+}
+
+.post-content details summary::-webkit-details-marker {
+  display: none;
+}
+
+.post-content details summary::before {
+  content: "›";
+  display: inline-block;
+  flex: 0 0 auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: transform 0.2s ease;
+}
+
+.post-content details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.post-content details > :not(summary) {
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-right: 1rem;
+}
+
+.post-content details > ol,
+.post-content details > ul {
+  padding: 0.6rem 1rem 1rem 3rem;
+}
+
+.post-content details li {
+  margin: 0.8rem 0;
+}
+
+blockquote {
+  margin: 1.25rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 4px solid var(--deep-red);
+  background: rgba(128, 128, 128, 0.1);
+  border-radius: 0 0.4rem 0.4rem 0;
+}
+
+blockquote p {
+  margin: 0;
+}
+
+blockquote p + p {
+  margin-top: 0.75rem;
+}

src/styles/variables.css

@@ -1,8 +1,11 @@
+/* 默认配色 */
 :root {
     --deep-blue: #536493;
     --deep-red: #ef5a6f;
     --background-color: #f9f2ed;
-    --text-color: #0E2F56;
+    --text-color: #0e2f56;
+    --url-color: #3D74B6;
+    --comment-background: #fbf5f2;
 
     --background-color-dark: #1e1e1e;
     --text-color-dark: #e6e6e6;