添加修订功能

2026-07-17 16:56:32 +08:00
parent c9384526a6
commit ed5c0c343a
7 changed files with 306 additions and 11 deletions
@@ -14,3 +14,4 @@
@import "./site/14-animations.css";
@import "./site/15-reading-series.css";
@import "./site/16-pwa.css";
+@import "./site/17-revisions.css";
@@ -0,0 +1,150 @@
+.article-date-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  color: var(--muted);
+  font-size: 0.92rem;
+}
+
+.article-date-line time + time::before {
+  content: "·";
+  margin-right: 14px;
+}
+
+.article-outdated-note a {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 3px;
+  color: inherit;
+  font-weight: 900;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.post-changelog {
+  margin-top: 38px;
+  overflow: hidden;
+  border: 1px solid rgba(15, 118, 110, 0.18);
+  border-radius: 12px;
+  background:
+    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.78), transparent 30%),
+    rgba(236, 253, 245, 0.46);
+}
+
+.post-changelog-head {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 13px;
+  border-bottom: 1px solid rgba(15, 118, 110, 0.14);
+  padding: 17px 20px;
+}
+
+.post-changelog-icon {
+  display: grid;
+  width: 44px;
+  height: 44px;
+  place-items: center;
+  border-radius: 12px;
+  color: #fff;
+  background: #3eb8be;
+}
+
+.post-changelog-head span {
+  color: var(--accent);
+  font-size: 0.7rem;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+}
+
+.post-changelog-head h2 {
+  margin: 1px 0 0;
+  font-size: 1.2rem;
+}
+
+.post-changelog-head > strong {
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+
+.post-changelog-list {
+  margin: 0;
+  padding: 16px 20px 18px 34px;
+  list-style: none;
+}
+
+.post-changelog-list li {
+  position: relative;
+  border-left: 1px solid rgba(15, 118, 110, 0.22);
+  padding: 0 0 20px 22px;
+}
+
+.post-changelog-list li:last-child {
+  padding-bottom: 0;
+}
+
+.post-changelog-marker {
+  position: absolute;
+  top: 8px;
+  left: -5px;
+  width: 9px;
+  height: 9px;
+  border: 2px solid var(--surface);
+  border-radius: 999px;
+  background: #3eb8be;
+  box-shadow: 0 0 0 3px rgba(62, 184, 190, 0.16);
+}
+
+.post-changelog-entry > div {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.post-changelog-entry h3,
+.post-changelog-entry p {
+  margin: 0;
+}
+
+.post-changelog-entry h3 {
+  font-size: 1rem;
+}
+
+.post-changelog-entry time {
+  flex: 0 0 auto;
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.post-changelog-entry p {
+  margin-top: 4px;
+  color: var(--muted);
+  font-size: 0.92rem;
+  line-height: 1.7;
+}
+
+:root[data-theme='dark'] .post-changelog {
+  border-color: rgba(139, 224, 213, 0.22);
+  background:
+    radial-gradient(circle at 10% 0%, rgba(139, 224, 213, 0.1), transparent 32%),
+    rgba(13, 23, 29, 0.88);
+}
+
+:root[data-theme='dark'] .post-changelog-list li {
+  border-left-color: rgba(139, 224, 213, 0.24);
+}
+
+:root[data-theme='dark'] .post-changelog-marker {
+  border-color: #132028;
+}
+
+@media (max-width: 720px) {
+  .article-date-line { display: grid; gap: 1px; }
+  .article-date-line time + time::before { content: none; }
+  .post-changelog-head { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 15px; }
+  .post-changelog-icon { width: 40px; height: 40px; }
+  .post-changelog-list { padding-right: 15px; padding-left: 27px; }
+  .post-changelog-entry > div { align-items: flex-start; flex-direction: column; gap: 1px; }
+}