chore: refine responsive layout and post timestamps

public/css/markdown.css

@@ -1,127 +1,243 @@
 .markdown-body {
-  overflow-wrap: break-word;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  line-height: 1.8;
+  font-size: 16px;
+  color: #111;
 }
+
 .markdown-body > *:first-child {
   margin-top: 0;
 }
+
 .markdown-body > *:last-child {
   margin-bottom: 0;
 }
+
 .markdown-body h1 {
-  font-size: 1.75rem;
+  font-size: 1.9rem;
   margin: 24px 0 12px;
 }
+
 .markdown-body h2 {
-  font-size: 1.45rem;
+  font-size: 1.5rem;
   margin: 22px 0 10px;
 }
+
 .markdown-body h3 {
-  font-size: 1.2rem;
+  font-size: 1.25rem;
   margin: 18px 0 8px;
 }
+
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
   font-size: 1.05rem;
   margin: 16px 0 8px;
 }
+
 .markdown-body p {
   margin: 0 0 12px;
 }
+
 .markdown-body ul,
 .markdown-body ol {
   margin: 0 0 12px;
   padding-left: 1.6em;
 }
+
 .markdown-body li {
   margin: 0 0 4px;
 }
+
 .markdown-body li > p {
   margin: 0 0 6px;
 }
+
 .markdown-body blockquote {
-  border-left: 4px solid #ccc;
+  border-left: 4px solid #d0d0d0;
   margin: 0 0 16px;
   padding: 2px 0 2px 16px;
   color: #444;
 }
+
 .markdown-body blockquote > :last-child {
   margin-bottom: 0;
 }
+
 .markdown-body pre {
   padding: 0;
   margin: 0 0 16px;
-  border-radius: 6px;
+  border-radius: 0;
   overflow-x: auto;
-  font-size: 0.9em;
+  background: #fafafa;
-  background: #f6f8fa;
+  border: 1px solid #e6e6e6;
 }
+
 .markdown-body pre code.hljs {
   display: block;
   padding: 12px 14px;
   overflow-x: auto;
   background: transparent;
 }
+
 .markdown-body code {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
-  font-size: 0.9em;
+  font-size: 0.92em;
 }
+
 .markdown-body pre code {
   background: none;
   padding: 0;
   font-size: inherit;
 }
+
 .markdown-body :not(pre) > code {
   background: #f0f0f0;
   padding: 2px 6px;
   border-radius: 4px;
 }
+
 .markdown-body table {
   border-collapse: collapse;
   width: 100%;
   margin: 0 0 16px;
   font-size: 0.95em;
 }
+
 .markdown-body th,
 .markdown-body td {
-  border: 1px solid #ccc;
+  border: 1px solid #d4d4d4;
   padding: 8px 10px;
   vertical-align: top;
 }
+
 .markdown-body th {
-  background: #f5f5f5;
+  background: #f6f6f6;
   font-weight: 600;
 }
+
 .markdown-body hr {
   margin: 20px 0;
+  border: 0;
+  border-top: 1px solid #ddd;
 }
+
 .markdown-body a {
   text-decoration: underline;
 }
+
 .markdown-body li:has(> input[type="checkbox"]) {
   list-style: none;
   margin-left: -1.5em;
   padding-left: 0;
 }
+
 .markdown-body input[type="checkbox"] {
   margin-right: 6px;
   vertical-align: middle;
 }
+
+.markdown-body img {
+  max-width: 100%;
+  height: auto;
+}
+
 .markdown-body .katex-display {
   overflow-x: auto;
   overflow-y: hidden;
   max-width: 100%;
   padding: 8px 0;
 }
+
 .markdown-body .katex {
   max-width: 100%;
 }
+
 .markdown-body .mermaid {
   margin: 16px 0;
   overflow-x: auto;
   text-align: center;
 }
+
 .markdown-pending .markdown-loading {
   color: #666;
   margin: 0;
 }
+
+@media (max-width: 1024px) {
+  .markdown-body {
+    font-size: 15.5px;
+  }
+
+  .markdown-body h1 {
+    font-size: 1.75rem;
+  }
+
+  .markdown-body h2 {
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .markdown-body {
+    font-size: 15px;
+    line-height: 1.75;
+  }
+
+  .markdown-body h1 {
+    font-size: 1.55rem;
+  }
+
+  .markdown-body h2 {
+    font-size: 1.28rem;
+  }
+
+  .markdown-body h3 {
+    font-size: 1.1rem;
+  }
+
+  .markdown-body table {
+    display: block;
+    overflow-x: auto;
+    font-size: 0.92em;
+  }
+
+  .markdown-body blockquote {
+    padding-left: 14px;
+  }
+}
+
+@media (max-width: 480px) {
+  .markdown-body {
+    font-size: 14.5px;
+    line-height: 1.72;
+  }
+
+  .markdown-body h1 {
+    font-size: 1.35rem;
+  }
+
+  .markdown-body h2 {
+    font-size: 1.18rem;
+  }
+
+  .markdown-body h3 {
+    font-size: 1.02rem;
+  }
+
+  .markdown-body ul,
+  .markdown-body ol {
+    padding-left: 1.35em;
+  }
+
+  .markdown-body pre code.hljs {
+    padding: 10px 12px;
+  }
+
+  .markdown-body th,
+  .markdown-body td {
+    padding: 7px 8px;
+  }
+}

worker.js

@@ -369,7 +369,11 @@ function renderPostCard(post) {
     <article class="post-card">
       <h2><a href="/post/${encodeURIComponent(post.slug)}">${escapeHtml(post.title)}</a></h2>
       <p class="post-excerpt">${escapeHtml(excerpt)}${excerpt.length >= 180 ? "…" : ""}</p>
-      <p class="post-meta"><span class="post-card-time">${formatDateTime(post.updated_at)}</span><span class="post-card-views">浏览 ${views}</span></p>
+      <p class="post-meta">
+        <span class="post-card-time">创建时间：${formatDateTime(post.created_at)}</span>
+        <span class="post-card-time">最后更新时间：${formatDateTime(post.updated_at)}</span>
+        <span class="post-card-views">浏览 ${views}</span>
+      </p>
     </article>
   `;
 }
@@ -406,18 +410,47 @@ function renderLayout(title, body, env, options = {}) {
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
   <title>${escapeHtml(title)}</title>
   <link rel="icon" href="/favicon.ico" sizes="any">
   ${mdHead}
   <style>
-    html, body { margin: 0; padding: 0; background: #fff; color: #111; }
+    :root {
-    body { font-family: Arial, sans-serif; line-height: 1.7; }
+      --page-max: 920px;
-    main { max-width: 820px; margin: 0 auto; padding: 16px; }
+      --page-pad-x: 24px;
+      --page-pad-y: 24px;
+      --page-gap: 24px;
+      --text: #111;
+      --muted: #555;
+      --line: #e8e8e8;
+    }
+    html {
+      margin: 0;
+      padding: 0;
+      background: #fff;
+      color: var(--text);
+      -webkit-text-size-adjust: 100%;
+      text-size-adjust: 100%;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      background: #fff;
+      color: var(--text);
+      font-family: Arial, sans-serif;
+      line-height: 1.7;
+      overflow-x: hidden;
+    }
+    main {
+      width: min(100%, var(--page-max));
+      margin: 0 auto;
+      padding: var(--page-pad-y) var(--page-pad-x) 32px;
+      box-sizing: border-box;
+    }
     header.site-header {
-      margin-bottom: 24px;
+      margin-bottom: var(--page-gap);
       padding-bottom: 16px;
-      border-bottom: 1px solid #e8e8e8;
+      border-bottom: 1px solid var(--line);
     }
     .site-brand {
       display: flex;
@@ -428,7 +461,8 @@ function renderLayout(title, body, env, options = {}) {
       text-decoration: none;
       color: inherit;
       font-weight: 700;
-      font-size: 1.2rem;
+      font-size: 1.25rem;
+      line-height: 1.2;
     }
     .site-logo {
       flex-shrink: 0;
@@ -445,30 +479,50 @@ function renderLayout(title, body, env, options = {}) {
       align-items: center;
       justify-content: center;
       z-index: 9999;
+      padding: 16px;
+      box-sizing: border-box;
     }
     .admin-gate[hidden] { display: none !important; }
     .admin-gate-panel {
       background: #fff;
-      padding: 16px;
+      padding: 16px 18px;
-      border-radius: 8px;
+      border-radius: 6px;
       border: 1px solid #ccc;
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: center;
-      max-width: 92vw;
+      width: min(100%, 420px);
+      box-sizing: border-box;
     }
-    .admin-gate-panel input[type="password"] { width: min(220px, 70vw); box-sizing: border-box; }
+    .admin-gate-panel input[type="password"] {
-    h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; }
+      width: 100%;
+      box-sizing: border-box;
+      min-width: 0;
+    }
+    h1, h2, h3 { line-height: 1.3; margin: 0 0 12px; word-break: break-word; }
     article, section { margin: 0 0 24px; }
-    p { margin: 0 0 12px; }
+    p { margin: 0 0 12px; word-break: break-word; }
     a { color: inherit; }
-    input, textarea, button { font: inherit; }
+    input, textarea, button {
-    input[type="text"], textarea { width: 100%; box-sizing: border-box; }
+      font: inherit;
-    textarea { min-height: 320px; }
+      max-width: 100%;
-    pre { white-space: pre-wrap; word-break: break-word; }
+    }
+    input[type="text"], input[type="password"], textarea {
+      width: 100%;
+      box-sizing: border-box;
+      min-width: 0;
+    }
+    textarea { min-height: 320px; resize: vertical; }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow-x: auto;
+    }
     img { max-width: 100%; height: auto; }
     hr { border: 0; border-top: 1px solid #ddd; margin: 24px 0; }
+    .post-card { padding-bottom: 16px; border-bottom: 1px solid #efefef; }
+    .post-card:last-of-type { padding-bottom: 0; border-bottom: 0; }
     .post-card .post-excerpt { margin: 0 0 10px; }
     .post-card .post-meta {
       font-size: 0.9em;
@@ -490,9 +544,53 @@ function renderLayout(title, body, env, options = {}) {
     }
     .post-detail-views { color: #666; }
     form { margin: 0; }
-    @media (max-width: 640px) {
+    @media (max-width: 1024px) {
-      main { padding: 12px; }
+      :root {
+        --page-max: 840px;
+        --page-pad-x: 20px;
+        --page-pad-y: 20px;
+        --page-gap: 20px;
+      }
+    }
+    @media (max-width: 768px) {
+      :root {
+        --page-max: 100%;
+        --page-pad-x: 16px;
+        --page-pad-y: 16px;
+        --page-gap: 18px;
+      }
+      .site-logo { width: 36px; height: 36px; }
+      .site-title-link { font-size: 1.1rem; }
+      .post-card .post-meta,
+      .post-detail-meta {
+        gap: 6px 12px;
+      }
+    }
+    @media (max-width: 480px) {
+      :root {
+        --page-pad-x: 14px;
+        --page-pad-y: 14px;
+        --page-gap: 16px;
+      }
+      body { line-height: 1.68; }
+      header.site-header { padding-bottom: 12px; }
       textarea { min-height: 240px; }
+      .site-brand {
+        gap: 10px;
+        align-items: flex-start;
+      }
+      .site-logo { width: 32px; height: 32px; }
+      .site-title-link { font-size: 1rem; }
+      .post-card .post-meta,
+      .post-detail-meta {
+        font-size: 0.88em;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+      }
+      .admin-gate-panel {
+        padding: 14px 14px;
+      }
     }
   </style>
 </head>