venus/blog
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

patch: fixed sticky sidebar on mobile

Browse Source
This commit is contained in:
venus
2026-09-15 09:18:27 -05:00
parent 835ac40cd2
commit f77b43c766
3 changed files with 25 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server.js
+2 -2
View File
@@ -347,8 +347,8 @@ export function createServer(customSiteDir, customPostsDir, customAssetsDir) {
const ext = path.extname(targetFile).toLowerCase(); const ext = path.extname(targetFile).toLowerCase();
const contentType = MIME_TYPES[ext] || "application/octet-stream"; const contentType = MIME_TYPES[ext] || "application/octet-stream";
// Cache control: assets get long-term caching, html gets short // Cache control: static media and webfonts get long-term caching; CSS, JS, and HTML get short revalidation
if (decodedPath.startsWith("/assets/")) { if (decodedPath.startsWith("/assets/") && !decodedPath.endsWith(".css") && !decodedPath.endsWith(".js")) {
res.setHeader("Cache-Control", "public, max-age=2592000, immutable"); res.setHeader("Cache-Control", "public, max-age=2592000, immutable");
} else { } else {
res.setHeader("Cache-Control", "public, max-age=0, must-revalidate"); res.setHeader("Cache-Control", "public, max-age=0, must-revalidate");
src/_includes/layouts/base.njk
+1 -1
View File
@@ -12,7 +12,7 @@
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Inter:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<!-- Modular Bundled Stylesheet --> <!-- Modular Bundled Stylesheet -->
<link rel="stylesheet" href="/assets/css/main.css"> <link rel="stylesheet" href="/assets/css/main.css?v=1.1">
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
src/assets/css/components/article.css
+22 -3
View File
@@ -2,13 +2,32 @@
Article Workspace & Markdown Prose (components/article.css) Article Workspace & Markdown Prose (components/article.css)
========================================================================== */ ========================================================================== */
/* Left Sticky Sidebar */ /* Left Sticky Sidebar (Sticky on multi-column desktop, natural flow on mobile/single-column) */
.article-sidebar { .article-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--tile-gap); gap: var(--tile-gap);
position: sticky; position: static;
top: 16px; }
@media (min-width: 961px) {
.article-sidebar {
position: sticky;
top: 16px;
max-height: calc(100vh - 32px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
}
@media (max-width: 960px) {
.article-sidebar {
position: static !important;
top: auto !important;
max-height: none !important;
overflow: visible !important;
}
} }
.sidebar-tile { .sidebar-tile {