Merge pull request #26 from ClovertaTheTrilobita/dev

fix css

src/i18n/en.ts

@@ -15,6 +15,10 @@ export default {
         writtenBy: "Written by",
         comments: "Comments",
         publishedOn: "Published on",
+        commentsDesc: [
+            "Feel free to leave your thoughts here. 💭💡",
+            "After signing in, you can click the “Subscribe by Email” button at the bottom right of the text box to receive notifications of new interactions via email."
+        ]
     },
     theme: {
         toggle: "Toggle theme",

src/i18n/zh.ts

@@ -15,6 +15,10 @@ export default {
         writtenBy: "作者",
         comments: "评论",
         publishedOn: "发布于",
+        commentsDesc: [
+            "欢迎在这里留下你的想法。💭💡",
+            "你可以在登录评论区后，点击文本框右下角的「Subscribe by Email」以通过邮件接收最新的互动通知。"
+        ]
     },
     theme: {
         toggle: "切换主题",

src/layouts/MarkdownPostLayout.astro

@@ -87,6 +87,7 @@ const t = getTranslations(lang);
     <PostNav post={post} lang={lang} />
 
     <h2>{comments}</h2>
+    {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
     <Remark42Embed slug={slug} />
   </article>
 </BaseLayout>
@@ -367,4 +368,88 @@ const t = getTranslations(lang);
       aspect-ratio: 16 / 9;
     }
   }
+
+
+details {
+  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);
+}
+
+details summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 0.9rem;
+  cursor: pointer;
+  font-weight: 600;
+  user-select: none;
+  list-style: none;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::before {
+  content: "›";
+  display: inline-block;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: transform 0.2s ease;
+}
+
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+/* 展开内容 */
+details > :not(summary) {
+  box-sizing: border-box;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-right: 1rem;
+}
+
+/* 为列表序号预留空间 */
+details > ol,
+details > ul {
+  padding: 0.6rem 1rem 1rem 3rem;
+}
+
+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;
+}
+
+/* 块级公式：超出屏幕时只滚动公式，不撑宽整篇文章 */
+.katex-display {
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: 0.25rem 0;
+    -webkit-overflow-scrolling: touch;
+}
+
+/* 避免 KaTeX 内部元素强行把父容器撑宽 */
+.katex-display > .katex {
+    min-width: max-content;
+}
 </style>

src/styles/global.css

@@ -161,4 +161,112 @@ 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;
+}