+
+
+
+
+
+
+
+
+
+
{% trans "Theme" %}
+
+
+
+
+
+
+
+
+
+
{% trans "Font" %}
+
+
+
+
+
+
+
+
+
+
+
{% trans "Size" %}
+
+
+ 17px
+
+
+
+
+
+
{% trans "Spacing" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -1437,5 +1861,118 @@ function regenerateWithVoice() {
if (backdrop) backdrop.addEventListener('click', closeMobileDrawer);
});
})();
+
+// ============================================================
+// Reader preferences — 微信读书-style reading experience
+// ============================================================
+(function() {
+ var STORAGE_KEY = 'links-reader-prefs-v1';
+ var DEFAULTS = { theme: 'light', font: 'system', size: 17, spacing: 1.85 };
+
+ var prefs = Object.assign({}, DEFAULTS);
+ try {
+ var saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
+ Object.assign(prefs, saved);
+ } catch (e) { /* ignore corrupt prefs */ }
+
+ function clampSize(v) { return Math.min(24, Math.max(13, v)); }
+ function clampSpacing(v) { return Math.min(2.3, Math.max(1.4, v)); }
+
+ function save() {
+ try { localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs)); } catch (e) {}
+ }
+
+ function apply() {
+ var body = document.body;
+ // Theme
+ ['light', 'paper', 'green', 'night'].forEach(function(t) {
+ body.classList.toggle('reader-' + t, t === prefs.theme);
+ });
+ // Font
+ ['system', 'serif', 'hei', 'kai', 'mono'].forEach(function(f) {
+ body.classList.toggle('reader-font-' + f, f === prefs.font);
+ });
+ // Size + spacing on the article
+ var article = document.getElementById('post-article');
+ if (article) {
+ article.style.setProperty('--reader-font-size', prefs.size + 'px');
+ article.style.setProperty('--reader-line-height', prefs.spacing);
+ }
+ // Panel UI state
+ document.querySelectorAll('.rp-swatch').forEach(function(el) {
+ el.classList.toggle('active', el.getAttribute('data-theme') === prefs.theme);
+ });
+ document.querySelectorAll('.rp-font-chip').forEach(function(el) {
+ el.classList.toggle('active', el.getAttribute('data-font') === prefs.font);
+ });
+ document.querySelectorAll('.rp-spacing-btn').forEach(function(el) {
+ el.classList.toggle('active', parseFloat(el.getAttribute('data-spacing')) === prefs.spacing);
+ });
+ var sizeVal = document.getElementById('rp-size-val');
+ if (sizeVal) sizeVal.textContent = prefs.size + 'px';
+ }
+
+ // Reading progress bar + back-to-top visibility
+ var progressBar = document.getElementById('reading-progress');
+ var backToTop = document.getElementById('back-to-top');
+ var scrollTicking = false;
+ function onScroll() {
+ if (scrollTicking) return;
+ scrollTicking = true;
+ requestAnimationFrame(function() {
+ scrollTicking = false;
+ var doc = document.documentElement;
+ var total = doc.scrollHeight - window.innerHeight;
+ var pct = total > 0 ? (window.scrollY / total) * 100 : 0;
+ if (progressBar) progressBar.style.width = pct + '%';
+ if (backToTop) backToTop.classList.toggle('visible', window.scrollY > 600);
+ });
+ }
+ window.addEventListener('scroll', onScroll, { passive: true });
+ onScroll();
+
+ // Expose panel controls globally (used by inline onclick)
+ window.toggleReaderPanel = function() {
+ var panel = document.getElementById('reader-panel');
+ if (!panel) return;
+ var open = panel.classList.toggle('open');
+ syncReaderTriggers(open);
+ };
+ window.closeReaderPanel = function() {
+ var panel = document.getElementById('reader-panel');
+ if (panel) panel.classList.remove('open');
+ syncReaderTriggers(false);
+ };
+ function syncReaderTriggers(open) {
+ ['reader-toolbar-btn', 'reader-fab'].forEach(function(id) {
+ var el = document.getElementById(id);
+ if (el) el.classList.toggle('active', open);
+ });
+ }
+ window.setReaderTheme = function(t) {
+ prefs.theme = t; save(); apply();
+ };
+ window.setReaderFont = function(f) {
+ prefs.font = f; save(); apply();
+ };
+ window.changeReaderSize = function(delta) {
+ prefs.size = clampSize(prefs.size + delta); save(); apply();
+ };
+ window.setReaderSpacing = function(s) {
+ prefs.spacing = clampSpacing(s); save(); apply();
+ };
+ window.resetReaderPrefs = function() {
+ prefs = Object.assign({}, DEFAULTS); save(); apply();
+ };
+
+ // Close panel on Escape
+ document.addEventListener('keydown', function(e) {
+ if (e.key === 'Escape') closeReaderPanel();
+ });
+
+ document.addEventListener('DOMContentLoaded', function() {
+ apply();
+ });
+})();
{% endblock %}
diff --git a/static/css/markdown.css b/static/css/markdown.css
index 6a44281..fce6232 100644
--- a/static/css/markdown.css
+++ b/static/css/markdown.css
@@ -1,103 +1,185 @@
+/* ============================================================
+ Markdown prose styling — theme-variable driven.
+ Defaults keep existing light appearance; the post detail
+ reader overrides --md-* variables per theme (paper/green/night).
+ ============================================================ */
+:root {
+ --md-bg: #ffffff; /* content background */
+ --md-text: #374151; /* body text */
+ --md-muted: #6b7280; /* secondary text */
+ --md-heading: #111827; /* headings */
+ --md-border: #e5e7eb; /* table / block borders */
+ --md-accent: #2563eb; /* links */
+ --md-accent-soft: rgba(37, 99, 235, 0.08);
+ --md-table-head-bg: #f3f4f6;
+ --md-table-zebra: rgba(0, 0, 0, 0.02);
+ --md-code-bg: #f3f4f6;
+ --md-code-text: #111827;
+ --md-pre-bg: #1f2937;
+ --md-pre-text: #e5e7eb;
+ --md-quote-bg: rgba(0, 0, 0, 0.02);
+ --md-hr: #e5e7eb;
+ --md-radius: 12px;
+}
+
.prose {
- color: #374151;
+ color: var(--md-text);
max-width: none;
+ line-height: 1.85;
}
.prose p {
- margin-top: 1.25em;
- margin-bottom: 1.25em;
+ margin-top: 1.3em;
+ margin-bottom: 1.3em;
+ overflow-wrap: break-word;
}
.prose a {
- color: #2563eb;
+ color: var(--md-accent);
text-decoration: underline;
+ text-underline-offset: 2px;
+ text-decoration-thickness: 1px;
+}
+.prose a:hover {
+ text-decoration-thickness: 2px;
}
.prose strong {
- font-weight: 600;
+ font-weight: 700;
+ color: var(--md-heading);
}
.prose ul {
- margin-top: 1.25em;
- margin-bottom: 1.25em;
+ margin-top: 1.1em;
+ margin-bottom: 1.1em;
list-style-type: disc;
padding-left: 1.625em;
}
.prose ol {
- margin-top: 1.25em;
- margin-bottom: 1.25em;
+ margin-top: 1.1em;
+ margin-bottom: 1.1em;
list-style-type: decimal;
padding-left: 1.625em;
}
+.prose li {
+ margin-top: 0.35em;
+ margin-bottom: 0.35em;
+}
+.prose li > ul,
+.prose li > ol {
+ margin-top: 0.3em;
+ margin-bottom: 0.3em;
+}
.prose h1 {
- font-size: 2.25em;
+ font-size: 2.1em;
margin-top: 0;
- margin-bottom: 0.8888889em;
- line-height: 1.1111111;
- font-weight: 600;
+ margin-bottom: 0.8em;
+ line-height: 1.25;
+ font-weight: 700;
+ color: var(--md-heading);
+ letter-spacing: -0.015em;
}
.prose h2 {
- font-size: 1.5em;
- margin-top: 2em;
- margin-bottom: 1em;
- line-height: 1.3333333;
- font-weight: 600;
+ font-size: 1.55em;
+ margin-top: 2.2em;
+ margin-bottom: 0.7em;
+ line-height: 1.35;
+ font-weight: 700;
+ color: var(--md-heading);
+ letter-spacing: -0.01em;
}
.prose h3 {
- font-size: 1.25em;
+ font-size: 1.22em;
+ margin-top: 1.8em;
+ margin-bottom: 0.55em;
+ line-height: 1.5;
+ font-weight: 650;
+ color: var(--md-heading);
+}
+.prose h4 {
+ font-size: 1.05em;
margin-top: 1.6em;
- margin-bottom: 0.6em;
- line-height: 1.6;
- font-weight: 600;
+ margin-bottom: 0.5em;
+ line-height: 1.5;
+ font-weight: 650;
+ color: var(--md-heading);
}
.prose img {
margin-top: 2em;
margin-bottom: 2em;
+ border-radius: var(--md-radius);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.prose code {
- color: #111827;
+ color: var(--md-code-text);
font-weight: 600;
- background-color: #f3f4f6;
- padding: 0.2em 0.4em;
+ background-color: var(--md-code-bg);
+ padding: 0.2em 0.45em;
border-radius: 0.375rem;
font-size: 0.875em;
+ font-family: 'SF Mono', 'Monaco', 'Menlo', 'Cascadia Code', Consolas, monospace;
}
.prose pre {
- color: #e5e7eb;
- background-color: #1f2937;
+ color: var(--md-pre-text);
+ background-color: var(--md-pre-bg);
overflow-x: auto;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
- border-radius: 0.375rem;
- padding: 1em;
+ border-radius: var(--md-radius);
+ padding: 1.1em 1.25em;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.prose pre code {
background-color: transparent;
color: inherit;
padding: 0;
+ font-weight: 450;
}
.prose blockquote {
- font-style: italic;
- border-left: 4px solid #e5e7eb;
- padding-left: 1em;
- margin: 1.25em 0;
+ font-style: normal;
+ border-left: 3px solid var(--md-border);
+ background: var(--md-quote-bg);
+ padding: 0.9em 1.2em;
+ margin: 1.4em 0;
+ border-radius: 0 var(--md-radius) var(--md-radius) 0;
+ color: var(--md-text);
+}
+.prose blockquote p {
+ margin: 0.4em 0;
+}
+.prose blockquote strong {
+ color: var(--md-heading);
+}
+.prose hr {
+ border: 0;
+ height: 1px;
+ background: var(--md-hr);
+ margin: 2.4em 0;
}
.prose table {
display: block;
width: 100%;
overflow-x: auto;
border-collapse: collapse;
- margin: 2em 0;
+ margin: 1.8em 0;
-webkit-overflow-scrolling: touch;
+ border-radius: var(--md-radius);
+ font-size: 0.93em;
}
.prose table th {
- background-color: #f3f4f6;
- font-weight: 600;
+ background-color: var(--md-table-head-bg);
+ font-weight: 650;
text-align: left;
- padding: 0.5em;
- border: 1px solid #e5e7eb;
+ padding: 0.6em 0.8em;
+ border: 1px solid var(--md-border);
+ color: var(--md-heading);
+ white-space: nowrap;
}
.prose table td {
- padding: 0.5em;
- border: 1px solid #e5e7eb;
+ padding: 0.6em 0.8em;
+ border: 1px solid var(--md-border);
word-break: break-word;
overflow-wrap: anywhere;
+ vertical-align: top;
+}
+.prose table tr:nth-child(even) td {
+ background-color: var(--md-table-zebra);
}