@@ -181,19 +197,33 @@ const articleJsonLd = {
+ {post.changelog.length > 0 &&
}
{post.comments &&
}
@@ -288,13 +318,14 @@ const articleJsonLd = {
diff --git a/src/styles/site.css b/src/styles/site.css
index 8fb6d7e..e3a7300 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -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";
diff --git a/src/styles/site/17-revisions.css b/src/styles/site/17-revisions.css
new file mode 100644
index 0000000..cb53e31
--- /dev/null
+++ b/src/styles/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; }
+}