@font-face { font-family: KJing; src: url("assets/fonts/JingHuaSong.subset.woff2?font-recovery=20260904") format("woff2"); font-display: swap; } @font-face { font-family: Notebook; src: url("assets/fonts/handwriting.woff2?font-recovery=20260904") format("woff2"), url("assets/fonts/handwriting.ttf?font-recovery=20260904") format("truetype"); font-display: swap; } :root { --orange: #ee7b00; --orange-soft: #fff0df; --ink: #241b16; --muted: #88776b; --line: #eaded4; --paper: #fffdfb; --wash: #faf5f0; --site-serif: KJing, "Noto Serif SC", "Songti SC", STSong, serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* --------------------------------------------------------------------------- The whole page is laid out at 90%, emulating a browser zoom-out rather than a visual shrink: `zoom` scales every px value (a 100px box renders 90px, the nav label 64px -> 58px) and, applied to the root, it also adjusts the fixed- position containing block, so the topbar and the backdrop layers still reach the true viewport edges. A `transform: scale()` on a wrapper would NOT work here - it leaves the right and bottom edges exposed at 90% and turns position: fixed descendants into containing-block-relative ones, which would unpin the topbar. --------------------------------------------------------------------------- */ html { /* `zoom` does NOT rescale viewport units: 100vw / 100svh still resolve against the unzoomed viewport, so anything full-bleed or full-height renders 10% short (the orange footer lost its right-hand end). --page-zoom is the single knob; the full-bleed rules below divide by it. */ --page-zoom: 0.9; zoom: var(--page-zoom); } body { margin: 0; min-height: calc(100svh / var(--page-zoom)); display: flex; flex-direction: column; background: var(--wash); color: var(--ink); font-family: var(--site-serif); position: relative; isolation: isolate; overflow-x: hidden; background-image: none; } body::before { position: absolute; inset: -8px -8px 0; min-height: calc(100svh / var(--page-zoom) + 8px); height: 100%; z-index: 0; background-image: linear-gradient(138deg, rgba(255, 253, 251, 0.58), rgba(255, 244, 231, 0.68)), linear-gradient(rgba(238, 123, 0, 0.12), rgba(213, 91, 0, 0.08)), url("assets/blog/blog-sunlit-hand.png"); background-position: center top, center top, center -30vh; background-size: auto, auto, cover; background-repeat: repeat, repeat, no-repeat; background-attachment: scroll, scroll, scroll; background-blend-mode: normal, normal, normal; content: ""; filter: blur(3px); pointer-events: none; transform: scaleX(1.015); transform-origin: center top; } /* --------------------------------------------------------------------------- Frosted-paper grain - applied AFTER the gaussian blur, never inside it. Order is guaranteed by paint order, not declaration order: both layers sit at z-index 0 in 's stacking context, body::before (the backdrop carrying `filter: blur(3px)`) is the FIRST generated box and body::after the LAST, so the grain always lands on top of the already-blurred result. Content is lifted to z-index 1, so the grain textures the backdrop only and never covers type. The tile (assets/blog/grain.png, 128px) is generated rather than built from feTurbulence, and it is *signed*: each pixel is pure white or pure black with an alpha proportional to a gaussian deviate, half of each. Blended normally that adds speckle in both directions, which keeps the average tone put on any backdrop. The blend modes could not do this - `overlay`/`multiply` are both asymmetric, so on the near-white light backdrop they either clipped to nothing or dragged the whole page ~25 levels darker. Two earlier attempts with an SVG turbulence measured +20 and +33 mean drift; this one is neutral. Fixed to the viewport so the layer stays viewport-sized. Disabled on the performance-lite path - a full-viewport blend is the only real cost here. --------------------------------------------------------------------------- */ /* Layer 1 is a gentle vignette framing all four edges - white in the light theme, near-black at night. `closest-side` puts the gradient's 100% stop exactly on the edge midpoints, so the corners (which sit beyond that radius) clamp to full strength and read as the whitest / darkest points. It lives on this layer rather than on body::before so it stays viewport-sized and behind the content, framing the backdrop without dimming any type. */ body::after { position: fixed; inset: 0; z-index: 0; content: ""; pointer-events: none; background-image: /* Both edges share the two-stop 76% ramp; both peaks now sit at 0.2 so the day and night frames carry the same subtle weight. */ radial-gradient( closest-side, rgba(255, 253, 251, 0) 76%, rgba(255, 253, 251, 0.2) 100% ), url("assets/blog/grain.png"); background-repeat: no-repeat, repeat; background-size: 100% 100%, 128px 128px; /* strength lives in the assets, not here: the grain tile carries its own alpha and the vignette its own gradient, so neither scales the other. */ opacity: 1; mix-blend-mode: normal; } body.theme-dark::after { background-image: /* Night keeps the earlier two-stop ramp and sits much lighter (peak alpha 0.2 = 20% opacity): at full strength the tightened ramp read as a visible oval ring rather than a vignette. */ radial-gradient(closest-side, rgba(9, 5, 3, 0) 76%, rgba(9, 5, 3, 0.2) 100%), url("assets/blog/grain.png"); opacity: 1; } html.performance-lite body::after { display: none; } body > * { position: relative; z-index: 1; } body > main { flex: 1 0 auto; } button, input, textarea { font: inherit; } button { cursor: pointer; } a { color: inherit; text-decoration: none; } .blog-topbar { height: 72px; padding: 0 clamp(18px, 5vw, 84px); display: flex; align-items: center; justify-content: space-between; background: rgba(255, 253, 251, 0.42); border-bottom: 1px solid rgba(238, 123, 0, 0.18); backdrop-filter: blur(16px); position: fixed; top: 0; left: 0; right: 0; z-index: 10; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .blog-topbar.visible { transform: translateY(0); } .blog-brand { align-self: stretch; display: grid; place-items: center; padding: 0 20px; border: 0; background: var(--orange); } .blog-topbar-tools { display: flex; align-items: stretch; height: 100%; } .theme-toggle { display: grid; place-items: center; width: 42px; margin-left: 8px; border: 0; background: transparent; color: var(--ink); font: 22px/1 Arial, sans-serif; transition: color 0.25s, background 0.25s; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--orange); background: var(--orange-soft); } .blog-brand img { display: block; width: auto; height: 34px; max-width: 160px; object-fit: contain; } .blog-topbar nav { position: relative; display: flex; gap: clamp(18px, 3vw, 46px); align-items: stretch; height: 100%; } /* Sliding indicator for the view tabs - the "switch" animation between 枫叶手记 and 枫的旅行. The per-link bottom border stays as the no-JS fallback; once blog.js can measure the active tab it adds .has-indicator, retires those borders, and the movement is carried by this single element instead, so the mark glides from one tab to the other rather than blinking. Only transform/width/opacity animate, so it never touches the layout path. */ .blog-topbar nav::after { content: ""; position: absolute; bottom: 0; left: 0; width: var(--nav-w, 0px); height: 2px; background: var(--orange); opacity: var(--nav-o, 0); transform: translateX(var(--nav-x, 0px)); transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), width 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease; pointer-events: none; } .blog-topbar nav.has-indicator a.is-active { border-bottom-color: transparent; } .blog-topbar nav a { display: flex; align-items: center; border-bottom: 2px solid transparent; font-size: 16px; color: #66564c; transition: color 0.25s, border-color 0.25s; } .blog-topbar nav .nav-wip { display: flex; align-items: center; border-bottom: 2px solid transparent; color: #998b81; cursor: default; font-size: 16px; user-select: none; } .blog-topbar nav .nav-wip small { margin-left: 4px; color: var(--orange); font: 10px/1 Arial, sans-serif; letter-spacing: 0.04em; } body.theme-dark .blog-topbar nav .nav-wip { color: #bca998; } .blog-topbar nav a:hover, .blog-topbar nav a.is-active { color: var(--orange); border-color: var(--orange); } .blog-shell { width: min(1420px, 92vw); margin: 0 auto; padding: clamp(40px, 6vw, 92px) 0 64px; } .blog-intro { display: flex; align-items: flex-end; justify-content: space-between; min-height: 190px; padding: 0 clamp(5px, 2vw, 28px) 28px; border-bottom: 1px solid var(--line); } .eyebrow, .section-kicker { margin: 0 0 8px; color: var(--orange); font: 11px/1.2 Arial, sans-serif; letter-spacing: 0.16em; } .blog-intro h1 { margin: 0; font-size: clamp(50px, 6.4vw, 94px); line-height: 0.95; font-weight: 400; } .blog-intro p:not(.eyebrow) { max-width: 42ch; margin: 16px 0 0; font-size: 18px; line-height: 1.7; color: #66564c; } .blog-intro img { width: clamp(62px, 8vw, 120px); height: clamp(62px, 8vw, 120px); object-fit: contain; filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(1155%) hue-rotate(1deg) brightness(99%) contrast(102%); transform: rotate(-12deg); opacity: 0.88; } .blog-layout { display: grid; grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.8fr) minmax(220px, 0.78fr); gap: clamp(24px, 3.3vw, 52px); padding-top: 40px; } .blog-aside { padding-top: 6px; } .search-box { display: block; padding: 14px 0 12px; border-bottom: 1px solid var(--ink); color: var(--muted); font-size: 13px; } .search-box span { display: block; margin-bottom: 5px; } .search-box input { display: block; width: 100%; border: 0; background: transparent; outline: 0; color: var(--ink); font-size: 17px; } .aside-section { padding: 30px 0; border-bottom: 1px solid var(--line); } .aside-section h2, .column-head h2, .activity-card h2 { margin: 0; font-size: 24px; font-weight: 400; } .archive-list { margin-top: 15px; display: grid; } .archive-list button { display: flex; justify-content: space-between; width: 100%; padding: 9px 0; border: 0; background: transparent; color: #66564c; text-align: left; font-size: 16px; } .archive-list button:hover, .archive-list button.is-selected { color: var(--orange); } .category-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; } .category-list button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 2px; background: #fffdfb; color: #66564c; font-size: 14px; transition: background 0.2s, color 0.2s, border-color 0.2s; } .category-list button:hover, .category-list button.is-selected { border-color: var(--orange); background: var(--orange); color: #fff; } .column-head { display: flex; justify-content: space-between; align-items: end; padding-bottom: 18px; border-bottom: 0; } .column-head > span { color: var(--muted); font: 13px Arial, sans-serif; } .post-list { display: grid; gap: 14px; padding-top: 14px; } .post-preview { position: relative; display: block; padding: 25px 4px 24px; border-bottom: 1px solid var(--line); transition: padding 0.32s cubic-bezier(0.22, 1, 0.36, 1), background 0.32s; } .post-preview::before { content: ""; position: absolute; left: -18px; top: 21px; bottom: 21px; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: center; transition: transform 0.32s; } .post-preview:hover { padding-left: 18px; padding-right: 18px; background: rgba(255, 253, 251, 0.75); } .post-preview:hover::before { transform: scaleY(1); } .post-preview.has-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 31%); align-items: center; gap: clamp(18px, 3vw, 36px); } .post-preview-copy { min-width: 0; } .post-preview-image { position: relative; aspect-ratio: 16 / 10; margin: 0; overflow: hidden; border-radius: 16px 4px 16px 4px; background: #f5e8dc; } .post-preview-image::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(238, 123, 0, 0.18); border-radius: inherit; pointer-events: none; } .post-preview-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s; } .post-preview:hover .post-preview-image img { transform: scale(1.035); filter: saturate(1.05); } .post-meta { display: flex; gap: 11px; align-items: center; color: var(--orange); font: 11px Arial, sans-serif; letter-spacing: 0.08em; } .post-meta time { color: var(--muted); } .post-views { color: var(--muted); } .post-preview h3 { margin: 12px 0 8px; font-size: clamp(25px, 2.6vw, 38px); font-weight: 400; line-height: 1.15; } .post-preview p { margin: 0; max-width: 54ch; color: #66564c; font-size: 16px; line-height: 1.65; } .read-arrow { display: inline-flex; margin-top: 14px; align-items: center; gap: 7px; color: var(--orange); font: 13px Arial, sans-serif; } .activity-aside { padding-top: 6px; } .activity-card { padding: 24px; background: rgba(255, 253, 251, 0.8); border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(65, 40, 24, 0.04); } .activity-caption { margin: 14px 0 20px; color: #66564c; font-size: 15px; } .activity-caption span { color: var(--orange); font-size: 26px; } .contribution-graph { display: grid; grid-template-columns: repeat(12, minmax(10px, 1fr)); gap: 5px; min-height: 148px; align-content: end; } .contribution-graph button { aspect-ratio: 1; border: 0; border-radius: 2px; background: #f0e8e2; transition: transform 0.18s, background 0.18s; } .contribution-graph button:hover { transform: scale(1.28); outline: 2px solid #fff; outline-offset: -3px; } /* Light mode: every step must sit clearly "more orange" than the empty beige cell, otherwise a single-post day (level-1) is indistinguishable from a blank day. */ .contribution-graph .level-1 { background: #f4ab63; } .contribution-graph .level-2 { background: #ee8f2c; } .contribution-graph .level-3 { background: #dd740c; } .contribution-graph .level-4 { background: #b05500; } .graph-legend { display: flex; justify-content: flex-end; align-items: center; gap: 5px; margin-top: 15px; color: var(--muted); font: 11px Arial, sans-serif; } .graph-legend i { width: 11px; height: 11px; background: #f0e8e2; } .graph-legend i:nth-of-type(1) { background: #f4ab63; } .graph-legend i:nth-of-type(2) { background: #ee8f2c; } .graph-legend i:nth-of-type(3) { background: #dd740c; } .graph-legend i:nth-of-type(4) { background: #b05500; } .aside-note { margin: 14px 2px; color: #88776b; font-size: 13px; line-height: 1.65; } .empty-posts { padding: 70px 18px; text-align: center; color: #66564c; } .empty-posts img { width: 48px; height: 48px; opacity: 0.72; filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(1155%) hue-rotate(1deg) brightness(99%) contrast(102%); } .empty-posts h3 { margin: 14px 0 7px; font-size: 24px; font-weight: 400; } .empty-posts p { margin: 0; font-size: 14px; } .reader-dialog { width: min(860px, calc(100vw - 30px)); max-height: min(88vh, 980px); padding: 0; border: 0; background: transparent; color: var(--ink); box-shadow: 0 26px 90px rgba(48, 29, 18, 0.28); } .reader-dialog::backdrop { background: rgba(35, 25, 19, 0.45); backdrop-filter: blur(5px); } .reader-paper { padding: clamp(34px, 6vw, 74px); background: var(--paper); overflow: auto; max-height: min(88vh, 980px); } .dialog-close { position: absolute; right: 12px; top: 11px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font: 27px/1 Arial; z-index: 1; box-shadow: 0 5px 17px rgba(35, 20, 12, 0.12); transition: transform 0.22s, background 0.22s; } .dialog-close:hover { transform: rotate(90deg); background: var(--orange); color: #fff; } .reader-head { padding-bottom: 30px; border-bottom: 1px solid var(--line); } .reader-head h1 { margin: 12px 0 14px; font-size: clamp(35px, 5vw, 66px); font-weight: 400; line-height: 1.05; } .reader-excerpt { margin: 0; color: #66564c; font-size: 17px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; } .markdown-body { padding: 22px 0 12px; font-size: 18px; line-height: 1.95; } .markdown-body > :first-child { margin-top: 0; } .markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1.8em 0 0.6em; font-weight: 400; line-height: 1.2; } .markdown-body h1 { font-size: 2em; } .markdown-body h2 { font-size: 1.55em; } .markdown-body h3 { font-size: 1.22em; } .markdown-body p { margin: 0 0 1.1em; } .markdown-body blockquote { margin: 1.5em 0; padding: 10px 20px; border-left: 3px solid var(--orange); background: var(--orange-soft); color: #5f4431; } .markdown-body pre { overflow: auto; margin: 1.6em 0; padding: 18px; background: #2b211c; color: #fff3e9; font: 14px/1.6 Consolas, monospace; } .markdown-body code { padding: 0.12em 0.32em; background: #f3e7de; font: em Consolas, monospace; } .markdown-body pre code { padding: 0; background: transparent; } .markdown-body ul, .markdown-body ol { padding-left: 1.5em; } .markdown-body a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; } .markdown-body img { display: block; max-width: 100%; margin: 1.6em auto; } .post-comments { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--ink); } .comments-head { display: flex; justify-content: space-between; align-items: end; } .comments-head h2 { margin: 0; font-size: 26px; font-weight: 400; } .comments-head span { color: var(--muted); font: 13px Arial, sans-serif; } .comment-form { display: grid; grid-template-columns: 160px 1fr auto; gap: 10px; margin: 22px 0; } .comment-form input, .comment-form textarea { border: 1px solid var(--line); background: #fffaf7; padding: 12px; outline-color: var(--orange); resize: vertical; } .comment-form textarea { min-height: 48px; } .comment-form button { border: 0; background: var(--orange); color: #fff; padding: 12px 18px; } .comment-list { display: grid; gap: 0; } .comment-item { padding: 15px 0; border-top: 1px dashed var(--line); } .comment-item strong { color: var(--orange); margin-right: 10px; } .comment-item time { color: var(--muted); font: 11px Arial, sans-serif; } .comment-item p { margin: 7px 0 0; line-height: 1.65; white-space: pre-wrap; word-break: break-word; } .comment-reply { margin: 10px 0 0 16px !important; padding: 8px 12px; background: var(--orange-soft); } footer { flex: 0 0 auto; /* 100% of , NOT 100vw: vw is not rescaled by `zoom`, so 100vw came out 10% narrow and left the right-hand end of the bar unpainted. 100% also ends exactly at the visible edge instead of running under the scrollbar. */ width: 100%; max-width: none; align-self: flex-start; min-height: 61px; margin-top: auto; position: relative; z-index: 2; padding: 24px; text-align: center; background: var(--orange); color: #fff; font: 13px Georgia, serif; } .page-enter { opacity: 0; transform: translateY(16px); animation: pageEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .blog-aside { animation-delay: 0.08s; } .post-column { animation-delay: 0.15s; } .activity-aside { animation-delay: 0.22s; } @keyframes pageEnter { to { opacity: 1; transform: none; } } @media (max-width: 930px) { .blog-layout { grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr); } .blog-aside { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .search-box { grid-column: 1/-1; } .aside-section { padding: 0 0 18px; } .activity-aside { grid-column: 2; grid-row: 2; } .post-column { grid-column: 1; grid-row: 2; } } @media (max-width: 640px) { .blog-topbar { height: 52px; min-height: 52px; padding: 0 10px; gap: 8px; align-items: center; } .blog-brand { flex: 0 0 auto; padding: 0 9px; } .theme-toggle { width: 32px; margin-left: 2px; font-size: 18px; } .blog-brand img { height: 23px; max-width: 78px; } .blog-topbar nav { min-width: 0; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; } .blog-topbar nav a { height: 100%; white-space: nowrap; font-size: 11px; } .blog-shell { width: min(100% - 32px, 620px); padding-top: 38px; } .blog-intro { min-height: 150px; padding-bottom: 20px; } .blog-intro h1 { font-size: 54px; } .blog-intro p:not(.eyebrow) { font-size: 15px; } .blog-intro img { width: 62px; height: 62px; } .blog-layout { display: block; padding-top: 28px; } .blog-aside { display: block; } .aside-section { padding: 22px 0; } .activity-aside { margin-top: 26px; } .post-column { margin-top: 28px; } .post-preview { padding: 21px 0; } .post-preview:hover { padding-left: 10px; padding-right: 10px; } .contribution-graph { grid-template-columns: repeat(12, 1fr); gap: 4px; } .reader-paper { padding: 36px 22px; } .markdown-body { font-size: 16px; } .comment-form { grid-template-columns: 1fr; } .comment-form button { justify-self: start; } .reader-dialog { width: calc(100vw - 20px); } .comments-head h2 { font-size: 22px; } } /* Recent listening: compact chart at rest, record-sleeve detail on intent. */ .recent-music { position: relative; z-index: 3; margin-bottom: 30px; padding-bottom: 27px; border-bottom: 1px solid var(--line); } .recent-music-head { display: flex; align-items: baseline; margin-bottom: 17px; } .recent-music-tabs { display: flex; align-items: baseline; gap: 16px; } .recent-music-tabs button { position: relative; padding: 0 0 9px; border: 0; background: transparent; color: var(--muted); cursor: pointer; font: 400 clamp(19px, 1.8vw, 23px) / 1.1 var(--site-serif); transition: color 0.24s ease; } .recent-music-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--orange); content: ""; opacity: 0; transform: scaleX(0.5); transition: opacity 0.24s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .recent-music-tabs button[aria-selected="true"] { color: var(--orange); } .recent-music-tabs button[aria-selected="true"]::after { opacity: 1; transform: scaleX(1); } .recent-music-tabs button:focus-visible { outline: 2px solid color-mix(in srgb, var(--orange) 70%, transparent); outline-offset: 4px; } .recent-music-panel[hidden] { display: none; } .weekly-recommendation { display: grid; grid-template-columns: 86px minmax(0, 1fr) auto; gap: 13px; align-items: center; min-width: 0; color: inherit; text-decoration: none; } .weekly-recommendation > img { width: 86px; height: 86px; object-fit: cover; box-shadow: 0 8px 18px rgba(67, 35, 14, 0.16); } .weekly-recommendation-copy { display: grid; min-width: 0; gap: 3px; } .weekly-recommendation-copy strong, .weekly-recommendation-copy span, .weekly-recommendation-copy small, .weekly-recommendation-copy time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .weekly-recommendation-copy strong { color: var(--ink); font-size: 15px; line-height: 1.35; } .weekly-recommendation-copy span { color: var(--ink); font-size: 12px; line-height: 1.35; } .weekly-recommendation-copy small, .weekly-recommendation-copy time { color: var(--muted); font-size: 11px; line-height: 1.35; } .weekly-recommendation > i { color: var(--orange); font: 12px/1 Arial, sans-serif; opacity: 0; transform: translateX(-4px); transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1); } .weekly-recommendation:hover > i, .weekly-recommendation:focus-visible > i { opacity: 1; transform: translateX(0); } .weekly-recommendation:focus-visible { outline: 2px solid color-mix(in srgb, var(--orange) 70%, transparent); outline-offset: 5px; } .recent-music-list { display: grid; gap: 14px; } .recent-track { position: relative; display: block; min-width: 0; outline: 0; } .recent-track-line { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; gap: 0 7px; } .recent-track-line > b { grid-row: 1 / 3; color: var(--orange); font: 700 10px/1.4 Arial, sans-serif; letter-spacing: 0.04em; } .recent-track-line > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .recent-track-line > small { grid-column: 2; margin-top: 2px; color: var(--muted); font: 10px/1.25 Arial, sans-serif; } .recent-track-meter { display: block; height: 5px; margin: 8px 0 0 29px; overflow: hidden; background: color-mix(in srgb, var(--line) 82%, transparent); } .recent-track-meter i { display: block; width: calc(var(--music-ratio) * 100%); height: 100%; background: var(--orange); transform-origin: left center; transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease, transform 0.25s ease; } .recent-track:hover .recent-track-meter i, .recent-track:focus-visible .recent-track-meter i { filter: saturate(1.18) brightness(1.06); transform: scaleY(1.65); } .recent-track:focus-visible .recent-track-line > strong { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; } .recent-track-detail { position: absolute; top: 50%; left: calc(100% + 15px); width: 250px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px; border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-radius: 14px; background: var(--paper); box-shadow: 10px 14px 34px rgba(62, 34, 16, 0.16); opacity: 0; pointer-events: none; transform: translate(8px, -50%) scale(0.96); transform-origin: left center; transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); } .recent-track-detail::before { content: ""; position: absolute; top: calc(50% - 6px); left: -7px; width: 12px; height: 12px; border-left: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-bottom: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); background: var(--paper); transform: rotate(45deg); } .recent-track:hover .recent-track-detail, .recent-track:focus-visible .recent-track-detail { opacity: 1; transform: translate(0, -50%) scale(1); } .recent-track-detail img { width: 72px; height: 72px; border-radius: 11px; object-fit: cover; } .recent-track-detail > span { min-width: 0; align-self: center; } .recent-track-detail strong, .recent-track-detail small, .recent-track-detail time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-track-detail strong { color: var(--ink); font-size: 13px; line-height: 1.4; } .recent-track-detail small, .recent-track-detail time { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; } .recent-music-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; } .recent-music-status.is-error { color: #9b4e16; } body.theme-dark .recent-music-status.is-error { color: #ffb875; } body.theme-dark .recent-track-detail { box-shadow: 10px 14px 34px rgba(0, 0, 0, 0.36); } .recent-reading { margin-bottom: 24px; padding-bottom: 19px; border-bottom: 1px solid var(--line); } .recent-reading > h2 { margin: 0 0 16px; font-size: clamp(21px, 2vw, 25px); font-weight: 400; line-height: 1.1; } .recent-reading-content { min-width: 0; } .recent-reading-link { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 9px; margin: 0 -10px; padding: 12px 10px 11px; outline: 0; background-color: transparent; transition: background-color 0.34s cubic-bezier(0.45, 0, 0.55, 1), color 0.34s cubic-bezier(0.45, 0, 0.55, 1); } .recent-reading-link:hover, .recent-reading-link:focus-visible { background-color: color-mix(in srgb, var(--orange) 11%, transparent); } .recent-reading-link > span { align-self: center; color: var(--orange); font-size: 12px; line-height: 1.2; transition: color 0.34s cubic-bezier(0.45, 0, 0.55, 1); } .recent-reading-link > strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 19px; font-weight: 400; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; transition: color 0.34s cubic-bezier(0.45, 0, 0.55, 1); } .recent-reading-link:hover > strong, .recent-reading-link:focus-visible > strong { color: var(--orange); } .recent-reading-quote, .recent-reading-link > i { grid-column: 1 / -1; color: var(--muted); font-size: 13px; line-height: 1.35; } .recent-reading-quote { margin: 2px 0 0; font-style: normal; } .recent-reading-link > i { color: var(--orange); font-style: normal; opacity: 0; transform: translateX(-6px); transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .recent-reading-link:hover > i, .recent-reading-link:focus-visible > i { opacity: 1; transform: translateX(0); } .recent-reading-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .activity-aside > .blog-aside .search-box { border-bottom: 1px solid color-mix(in srgb, var(--ink) 58%, transparent); } body.theme-dark .activity-aside > .blog-aside .search-box { border-bottom-color: color-mix(in srgb, var(--ink) 36%, transparent); } @media (max-width: 1040px) { .recent-track-detail { width: min(230px, 32vw); } } @media (max-width: 640px) { .recent-music { width: 100%; margin-bottom: 28px; } .recent-music-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .weekly-recommendation { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 11px; } .weekly-recommendation > img { width: 76px; height: 76px; } .recent-track { padding: 11px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper) 88%, transparent); } .recent-track-line { grid-template-columns: 1fr; } .recent-track-line > b { grid-row: auto; margin-bottom: 5px; } .recent-track-line > strong, .recent-track-line > small { grid-column: 1; } .recent-track-meter { margin-left: 0; } .recent-track-detail { top: calc(100% + 9px); left: 50%; width: min(250px, calc(100vw - 48px)); transform: translate(-50%, -5px) scale(0.96); transform-origin: top center; } .recent-track:hover .recent-track-detail, .recent-track:focus-visible .recent-track-detail { transform: translate(-50%, 0) scale(1); } .recent-track-detail::before { top: -7px; left: calc(50% - 6px); border: 0; border-top: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-left: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); } } @media (max-width: 430px) { .recent-music-tabs { gap: 13px; } .recent-music-tabs button { font-size: 18px; } .recent-music-list { grid-template-columns: 1fr; } .recent-track { padding: 10px 12px; } .recent-track-line { grid-template-columns: 22px minmax(0, 1fr); } .recent-track-line > b { grid-row: 1 / 3; margin-bottom: 0; } .recent-track-line > strong, .recent-track-line > small { grid-column: 2; } .recent-track-meter { margin-left: 29px; } } @media (prefers-reduced-motion: reduce) { .recent-track-meter i, .recent-track-detail, .recent-reading-link, .recent-reading-link > strong, .recent-reading-link > span, .recent-reading-quote, .recent-reading-link > i { transition: none; } } /* Admin authentication lives inside the notebook instead of on a separate login page. */ .admin-login-dialog { width: min(520px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 8px; overflow: visible; background: var(--paper); color: var(--ink); box-shadow: 0 24px 72px rgba(45, 27, 17, 0.25); opacity: 0; transform: translateY(14px) scale(0.985); } .admin-login-dialog[open] { opacity: 1; transform: none; animation: adminDialogIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .admin-login-dialog.is-leaving { opacity: 0; transform: translateY(-8px) scale(0.99); transition: opacity 0.2s ease, transform 0.2s ease; } .admin-login-dialog::backdrop { background: rgba(36, 27, 22, 0.38); backdrop-filter: blur(5px); } .admin-login-panel { padding: 42px 42px 38px; border-top: 5px solid var(--orange); } .admin-login-mark { width: 54px; height: 54px; margin-bottom: 18px; } .admin-login-mark img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) saturate(100%) invert(47%) sepia(96%) saturate(1155%) hue-rotate(1deg) brightness(99%) contrast(102%); } .admin-login-kicker { margin: 0 0 8px; color: var(--orange); font: 12px/1.2 Arial, sans-serif; } .admin-login-panel h2 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.2; } .admin-login-copy { margin: 12px 0 28px; color: #66564c; font-size: 15px; line-height: 1.65; } .admin-login-panel label { display: block; margin-bottom: 8px; color: #66564c; font-size: 13px; } .admin-password-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .admin-password-row input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-right: 0; border-radius: 3px 0 0 3px; outline: 0; background: #fff; color: var(--ink); } .admin-password-row input:focus { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); } .admin-password-row button { min-width: 116px; border: 0; border-radius: 0 3px 3px 0; background: var(--orange); color: #fff; padding: 0 18px; transition: background 0.2s ease, opacity 0.2s ease; } .admin-password-row button:hover { background: #cf6900; } .admin-password-row button:disabled { cursor: wait; opacity: 0.62; } .admin-login-status { min-height: 22px; margin: 10px 0 0; color: #a14f00; font-size: 13px; } .admin-login-close { position: absolute; top: 14px; right: 14px; z-index: 1; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #66564c; font: 24px/1 Arial, sans-serif; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .admin-login-close:hover { color: #fff; background: var(--orange); transform: rotate(90deg); } @keyframes adminDialogIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @media (max-width: 520px) { .admin-login-panel { padding: 34px 24px 28px; } .admin-login-panel h2 { font-size: 29px; } .admin-password-row { grid-template-columns: 1fr; gap: 10px; } .admin-password-row input { border: 1px solid var(--line); border-radius: 3px; } .admin-password-row button { min-height: 46px; border-radius: 3px; } } @media (prefers-reduced-motion: reduce) { .admin-login-dialog[open] { animation: none; } .admin-login-close:hover { transform: none; } } .book-reader .reader-paper { position: relative; } .book-reader .reader-toolbar { margin-bottom: 18px; } .book-timeline { position: sticky; top: 104px; z-index: 2; display: flex; flex-direction: column; gap: 8px; width: min(220px, 24vw); max-height: calc(100vh - 140px); overflow: auto; padding: 16px 14px; border-left: 2px solid var(--orange); background: rgba(255, 253, 251, 0.92); } .book-timeline a { display: block; padding: 5px 8px; color: var(--muted); font-size: 13px; line-height: 1.35; } .book-timeline a.level-1 { color: var(--ink); font-size: 15px; } .book-timeline a:hover { color: var(--orange); background: var(--orange-soft); } .book-content-upload { display: grid; gap: 8px; } .book-content-upload input { padding: 10px; border: 1px solid var(--line); background: #fffdfb; } .book-content-upload small { color: var(--muted); } .book-timeline-preview { display: grid; gap: 5px; padding: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } .timeline-preview-item.level-2 { padding-left: 16px; color: var(--muted); } @media (max-width: 640px) { .book-timeline { position: static; width: 100%; max-height: 180px; margin: 0 0 16px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .page-enter { opacity: 1; transform: none; animation: none; } * { transition: none !important; } } /* Refined notebook index: clear reading column, quiet supporting rails. */ .blog-shell { width: min(1480px, calc(100% - 48px)); padding-top: clamp(34px, 5vw, 76px); } .blog-intro { position: relative; min-height: clamp(180px, 20vw, 270px); padding: 0 clamp(6px, 2vw, 28px) clamp(20px, 2.5vw, 34px); } .blog-intro::after { content: ""; position: absolute; right: 0; bottom: -1px; width: min(28vw, 340px); height: 3px; background: var(--orange); } .blog-intro h1 { font-size: clamp(48px, 6vw, 88px); text-wrap: balance; } .blog-intro p:not(.eyebrow) { max-width: 36ch; text-wrap: pretty; } .blog-intro img { width: clamp(74px, 9vw, 136px); height: clamp(74px, 9vw, 136px); margin: 0 clamp(12px, 5vw, 92px) 6px 0; } .blog-layout { grid-template-columns: minmax(190px, 0.62fr) minmax(440px, 1.68fr) minmax(218px, 0.7fr); gap: clamp(28px, 4vw, 68px); padding-top: clamp(30px, 4vw, 56px); } .blog-aside, .activity-aside { position: sticky; top: 104px; align-self: start; } .search-box { padding: 0 0 8px; border-bottom: 1px solid var(--ink); } .search-box span { color: var(--orange); font: 11px/1.2 Arial, sans-serif; letter-spacing: 0.12em; } .search-box input { min-height: 34px; } .aside-section { padding: 25px 0; } .aside-section h2, .column-head h2, .activity-card h2 { font-size: 25px; line-height: 1.1; } /* The section label and the post counter both wear the homepage's solid orange plate - brand orange with white type - rather than the soft tint they had. */ .column-head h2 { display: inline-block; padding: 7px 15px 8px; background: var(--orange); color: #fff; } .column-head { padding: 3px 0 17px; border-bottom: 0; } .column-head > span, .column-stats { padding: 5px 8px; background: var(--orange); color: #fff; } .column-stats { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font: 13px Arial, sans-serif; } .column-stats > span + span { padding-left: 9px; border-left: 1px solid currentColor; opacity: 0.82; } body.theme-dark .column-stats { color: #fff; } .post-list { gap: 0; padding-top: 0; } .post-preview { margin: 0; padding: 29px 12px 27px 0; border-bottom-color: rgba(234, 222, 212, 0.96); } .post-preview::before { left: -14px; top: 24px; bottom: 24px; width: 4px; } .post-preview:hover { padding-right: 16px; background: rgba(255, 240, 223, 0.5); } .post-preview h3 { max-width: none; margin: 11px 0 8px; font-size: clamp(28px, 3vw, 42px); line-height: 1.18; /* Titles wrap instead of being cut on a single line: up to TWO lines, then an ellipsis. Unbroken CJK/latin runs may break so line two is never wasted. */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: break-word; } .post-preview p { max-width: 52ch; text-wrap: pretty; } .read-arrow { margin-top: 16px; } .activity-card { padding: 0; border: 0; background: transparent; box-shadow: none; } .activity-card > :not(.contribution-graph):not(.graph-legend) { margin-left: 0; margin-right: 0; } .activity-card .section-kicker { margin-top: 2px; } .activity-caption { padding-bottom: 16px; border-bottom: 0; } .contribution-graph { grid-template-columns: repeat(12, minmax(9px, 1fr)); gap: 4px; min-height: 0; padding: 15px; background: #fff; } .contribution-graph button { border-radius: 1px; } .graph-legend { margin-top: 12px; } .aside-note { max-width: 28ch; margin: 18px 0 0; } @media (max-width: 1040px) { .blog-layout { grid-template-columns: minmax(0, 1fr) minmax(210px, 0.64fr); } .blog-aside { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; } .blog-aside .search-box { grid-column: span 1; } .blog-aside .aside-section { padding: 0 0 18px; } } @media (max-width: 640px) { .blog-shell { width: min(100% - 32px, 620px); padding-top: 30px; } .blog-intro { min-height: 150px; align-items: flex-end; } .blog-intro::after { width: 112px; } .blog-intro h1 { font-size: clamp(42px, 15vw, 58px); } .blog-intro img { width: 58px; height: 58px; margin: 0 6px 2px 10px; } .blog-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .blog-aside .search-box { grid-column: 1 / -1; margin-bottom: 20px; } .blog-aside .aside-section { min-width: 0; } .blog-layout { padding-top: 25px; } .post-column { margin-top: 32px; } .post-preview { padding: 24px 8px 23px 0; } .post-preview h3 { font-size: clamp(27px, 8.5vw, 36px); } .post-preview.has-image { grid-template-columns: 1fr; gap: 16px; } .post-preview-image { order: -1; width: min(100%, 520px); } .activity-aside { position: static; } .contribution-graph { gap: 4px; padding: 13px; } } /* Final reading hierarchy: activity, generous article stream, then filters. */ body { background-size: auto, auto, cover; background-attachment: scroll, scroll, scroll; } .blog-intro > div { margin-left: clamp(18px, 8vw, 132px); } .blog-intro::after { width: min(18vw, 230px); } .blog-layout { grid-template-areas: "activity posts filters"; grid-template-columns: minmax(165px, 0.5fr) minmax(0, 2.35fr) minmax(165px, 0.5fr); gap: clamp(26px, 3.3vw, 56px); } .blog-aside { grid-area: filters; } .post-column { grid-area: posts; } .activity-aside { grid-area: activity; } @media (max-width: 1040px) { .blog-layout { grid-template-areas: "activity posts" "filters filters"; grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.7fr); } .blog-aside, .post-column, .activity-aside { grid-column: auto; grid-row: auto; } .blog-aside { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 640px) { .blog-intro > div { margin-left: 0; } .blog-layout { display: flex; flex-direction: column; } .activity-aside { order: 1; } .post-column { order: 2; } .blog-aside { order: 3; } } /* Compact hero and a left archive rail under writing activity. */ .blog-shell { display: grid; grid-template-columns: minmax(165px, 0.52fr) minmax(0, 2.16fr) minmax(165px, 0.52fr); grid-template-areas: "activity intro intro" "filters posts posts"; column-gap: clamp(26px, 3.3vw, 56px); row-gap: 28px; } .blog-intro { grid-area: intro; min-height: 154px; padding-top: 0; padding-bottom: 20px; align-self: start; } .blog-intro > div { margin-left: auto; text-align: right; } .blog-intro h1 { font-size: clamp(45px, 5.3vw, 78px); } .blog-intro p:not(.eyebrow) { margin-top: 10px; } .blog-layout { display: contents; } .blog-layout[hidden] { display: none; } .activity-aside { grid-area: activity; position: static; align-self: start; } .blog-profile { display: grid; justify-items: start; gap: 14px; margin-bottom: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .blog-profile-avatar { width: clamp(94px, 9vw, 124px); aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(238, 123, 0, 0.42); } .blog-profile-avatar img { display: block; width: 210%; max-width: none; height: 210%; object-fit: cover; transform: translate(-36%, 3%); } .blog-profile-avatar.has-uploaded-avatar img { width: 100%; height: 100%; object-fit: cover; transform: none; } .blog-profile p { margin: 0; color: #66564c; font-size: clamp(14px, 1.25vw, 16px); line-height: 1.75; text-wrap: pretty; } .blog-aside { grid-area: filters; position: static; align-self: start; padding-top: 0; } .activity-aside > .blog-aside { display: block; grid-area: auto; width: 100%; margin-top: 28px; padding-top: 0; } .activity-aside > .blog-aside .search-box { margin-bottom: 0; } .post-column { grid-area: posts; min-width: 0; } .blog-aside .aside-section { padding: 20px 0; } .blog-aside .search-box { margin-bottom: 2px; } .travel-view .blog-intro { grid-column: 1 / -1; align-self: start; border-bottom: 1px solid var(--line); } .travel-view .blog-intro::before { display: none; } .travel-view .blog-intro > div { margin-left: auto; text-align: right; } .travel-view .blog-intro::after { top: auto; bottom: -1px; width: min(18vw, 230px); } .travel-view .blog-intro p { display: none; } .post-column { align-self: start; } .empty-posts { padding: 24px 0 18px; text-align: left; } .empty-posts img { display: none; } .empty-posts h3 { margin: 0 0 5px; font-size: 24px; } .empty-posts p { max-width: 34ch; font-size: 14px; } .post-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; padding: 26px 0 8px; } .post-pagination-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; color: var(--muted); } .post-pagination button { min-width: 32px; height: 32px; padding: 0 9px; border: 1px solid var(--line); background: #fffdfb; color: var(--muted); } .post-pagination button:hover:not(:disabled), .post-pagination button.is-active { border-color: var(--orange); background: var(--orange); color: #fff; } .post-pagination button:disabled { cursor: default; opacity: 0.35; } .post-pin { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid currentColor; color: var(--orange); font-size: 10px; letter-spacing: 0.04em; line-height: 1; } /* The category chip wears the same solid orange plate as the section label and the post counter, but sized exactly like the outlined 置顶 badge it sits next to - same min-height, padding, 10px type and 1px border box, so the two line up and the meta row keeps one rhythm. */ .post-category { display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px; border: 1px solid var(--orange); background: var(--orange); color: #fff; font-size: 10px; letter-spacing: 0.04em; line-height: 1; } .post-preview.is-pinned h3 { color: #a55005; } body.theme-dark .post-preview.is-pinned h3 { color: #ffd6b2; } .travel-catalog { grid-column: 2 / -1; width: 100%; min-width: 0; padding: 28px clamp(6px, 2vw, 28px) clamp(48px, 7vw, 90px); } .travel-catalog-head { display: flex; align-items: end; justify-content: space-between; padding: 3px 0 17px; border-bottom: 2px solid var(--ink); } .travel-catalog-head h2 { margin: 0; font-size: 25px; line-height: 1.1; font-weight: 400; } .travel-catalog-head > span { padding: 5px 8px; background: var(--orange-soft); color: #8b4807; font: 13px Arial, sans-serif; } .travel-book-list { display: grid; gap: 0; padding-top: clamp(20px, 2.4vw, 34px); } .travel-book { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); padding: 0 0 32px; border-bottom: 1px solid var(--line); } .travel-book { position: relative; transition: background 0.32s, padding 0.32s, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .travel-book::before { content: ""; position: absolute; left: -18px; top: 0; bottom: 32px; width: 3px; background: var(--orange); transform: scaleY(0); transform-origin: center; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .travel-book:hover { padding-left: 18px; background: rgba(255, 253, 251, 0.72); } .travel-book:hover::before { transform: scaleY(1); } .travel-book-cover { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--orange-soft); display: grid; place-items: center; color: var(--orange); } .book-lock-badge { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 6px; background: rgba(255, 250, 247, 0.78); color: #a14f00; font: 14px/1.2 Arial, sans-serif; letter-spacing: 0.14em; } .travel-book:hover .book-lock-badge { background: rgba(255, 250, 247, 0.9); } .travel-book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .travel-book-copy { align-self: center; width: min(100%, 760px); min-width: 0; } .travel-book-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--orange); font: 12px Arial, sans-serif; } .travel-book-meta time { color: var(--muted); } .travel-book-copy h2 { margin: 14px 0 8px; font-size: clamp(30px, 4vw, 56px); font-weight: 400; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; } .travel-book-subtitle { margin: 0 0 12px; color: var(--orange); font-size: 17px; } .travel-book-copy > p:last-child { margin: 0; color: #66564c; line-height: 1.8; white-space: pre-wrap; word-break: break-word; } .travel-empty { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--muted); } .travel-empty span { color: var(--orange); font-size: 28px; } .travel-empty p { margin: 0; } @keyframes travelViewEnter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .travel-reveal { animation: travelViewEnter 0.58s cubic-bezier(0.22, 1, 0.36, 1) both; } .travel-reveal .travel-book { animation: travelViewEnter 0.58s cubic-bezier(0.22, 1, 0.36, 1) both; } .travel-reveal .travel-book:nth-child(2) { animation-delay: 0.09s; } .travel-reveal .travel-book:nth-child(3) { animation-delay: 0.16s; } @keyframes notebookTitleEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .notebook-reveal > div { animation: notebookTitleEnter 0.62s cubic-bezier(0.22, 1, 0.36, 1) both; } @media (min-width: 641px) { .blog-intro > div { transform: translateX(clamp(10px, 2vw, 28px)); } .activity-aside { padding-top: clamp(28px, 3vw, 42px); } .post-column { grid-area: intro; margin-top: clamp(28px, 3vw, 42px); } } @media (max-width: 1040px) { .blog-shell { display: grid; grid-template-areas: "activity intro" "filters posts"; grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.7fr); } .travel-view .blog-intro { grid-column: 1 / -1; } .travel-catalog { grid-column: 1 / -1; } } @media (max-width: 640px) { .blog-shell { display: block; } .blog-layout { display: flex; flex-direction: column; } .blog-intro { min-height: 118px; padding-bottom: 17px; } .blog-intro > div { margin-left: auto; text-align: right; } .blog-intro h1 { font-size: clamp(40px, 13vw, 56px); } .travel-view .blog-intro { min-height: 118px; } .travel-catalog { padding: 24px 0 48px; } .travel-book-list { padding-top: 20px; } .activity-aside, .blog-aside, .post-column { margin-top: 24px; } .activity-aside > .blog-aside { margin-top: 26px; } .blog-profile { grid-template-columns: 82px minmax(0, 1fr); align-items: center; justify-items: start; gap: 16px; margin-bottom: 24px; padding-bottom: 20px; } .blog-profile-avatar { width: 82px; } .blog-profile p { font-size: 14px; } } /* Travel state keeps a generous lower field and anchors copyright to the viewport. */ body.travel-view .blog-shell { min-height: calc(100svh / var(--page-zoom) - 63px); padding-bottom: clamp(36px, 7vh, 76px); } body.travel-view main { min-height: calc(100svh / var(--page-zoom) - 63px); } .travel-view .blog-intro { align-items: flex-end; padding-top: 0; } @media (max-width: 640px) { body.travel-view .blog-shell, body.travel-view main { min-height: calc(100svh / var(--page-zoom) - 63px); } .travel-view .blog-intro { min-height: 118px; padding-top: 0; } .travel-book { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; } .travel-book-copy h2 { font-size: 30px; } .travel-book-meta { display: block; line-height: 1.7; } } @media (prefers-reduced-motion: reduce) { .travel-reveal, .travel-reveal .travel-book, .notebook-reveal > div { animation: none; } } /* In-page reading mode */ .reader-view { --reader-font-size: 18px; width: min(1640px, 100%); grid-column: 1 / -1; margin: 0 auto; display: grid; grid-template-columns: 190px minmax(0, 1240px); justify-content: center; gap: clamp(30px, 5vw, 76px); } .reader-view[hidden] { display: none; } .book-timeline[hidden], .book-pager[hidden], .reader-share[hidden] { display: none !important; } .blog-intro[hidden], .blog-layout[hidden] { display: none !important; } .reader-toolbar { position: sticky; top: 106px; align-self: start; display: grid; gap: 28px; padding-top: 8px; } .reader-back { display: flex; align-items: center; gap: 10px; width: max-content; padding: 10px 14px; border: 1px solid var(--orange); background: #fffdfb; color: var(--orange); font-size: 15px; transition: color 0.22s, border-color 0.22s, background 0.22s, transform 0.22s; } .reader-back:hover { color: #fff; border-color: var(--orange); background: var(--orange); transform: translateX(-3px); } .reader-size-control { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label value" "slider slider"; align-items: center; gap: 10px; color: var(--muted); font: 12px/1.3 Arial, sans-serif; } .reader-size-control > span { grid-area: label; } .reader-size-control input { grid-area: slider; width: 100%; accent-color: var(--orange); } .reader-size-control output { grid-area: value; color: var(--orange); white-space: nowrap; } .reader-view .reader-paper { min-width: 0; max-height: none; overflow: visible; padding: clamp(34px, 5vw, 72px) clamp(38px, 6vw, 92px) 72px; background: rgba(255, 253, 251, 0.94); border-top: 4px solid var(--orange); box-shadow: 0 18px 54px rgba(72, 45, 29, 0.08); } .reader-view .reader-head h2 { margin: 12px 0 16px; font-size: clamp(38px, 5.4vw, 68px); font-weight: 400; line-height: 1.08; text-wrap: balance; } .reader-share { display: flex; align-items: center; gap: 6px; margin-top: 22px; } .reader-share-button { width: 31px; height: 31px; display: inline-grid; place-items: center; flex: 0 0 31px; padding: 7px; border: 1px solid var(--line); background: rgba(255, 253, 251, 0.72); color: var(--ink); transition: color 0.22s, background 0.22s, border-color 0.22s, transform 0.22s; } .reader-share-button img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 0.82; transition: filter 0.22s, opacity 0.22s; } .reader-share-button:hover, .reader-share-button:focus-visible { border-color: var(--orange); background: var(--orange); transform: translateY(-1px); } .reader-share-button:hover img, .reader-share-button:focus-visible img { filter: brightness(0) invert(1); opacity: 1; } body.theme-dark .reader-share-button { background: transparent; border-color: rgba(255, 242, 229, 0.28); } body.theme-dark .reader-share-button img { filter: invert(1); opacity: 0.9; } body.theme-dark .reader-share-button:hover img, body.theme-dark .reader-share-button:focus-visible img { filter: brightness(0) invert(1); } @media (max-width: 560px) { .reader-share { margin-top: 16px; } } body.theme-dark .markdown-body blockquote { background: #3a1f0d; color: #fff2e5; border-left-color: var(--orange); } .reader-view .markdown-body { width: 100%; max-width: none; margin: 0 auto; font-size: var(--reader-font-size); line-height: 1.9; transition: font-size 0.18s ease; } .book-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 44px auto 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font: 13px/1.3 Arial, sans-serif; } .book-pager button { min-width: 78px; padding: 8px 12px; border: 1px solid var(--line); background: transparent; color: var(--orange); transition: background 0.22s, color 0.22s, border-color 0.22s; } .book-pager button:hover:not(:disabled), .book-pager button:focus-visible { background: var(--orange); color: #fff; border-color: var(--orange); } .book-pager button:disabled { cursor: not-allowed; opacity: 0.35; } body.theme-dark .book-pager button { background: transparent; color: var(--orange); } .reader-view .reader-head { width: 100%; max-width: none; margin: 0 auto; } .reader-view .post-comments { width: 100%; max-width: none; margin: clamp(56px, 8vw, 96px) auto 0; padding: 28px clamp(20px, 3vw, 38px) 34px; border: 1px solid rgba(238, 123, 0, 0.24); border-top: 4px solid var(--orange); background: rgba(255, 247, 240, 0.76); } .reader-view .comments-head { padding-bottom: 16px; border-bottom: 1px solid rgba(103, 75, 56, 0.18); } .reader-view .comment-form { margin: 20px 0 24px; } .reader-view .comments-head h3 { margin: 0; font-size: 26px; font-weight: 400; } body.reader-open .blog-shell { width: min(1700px, 94vw); padding-top: max(clamp(40px, 6vw, 92px), 72px); display: block; } @media (max-width: 760px) { .reader-view { grid-template-columns: 1fr; gap: 18px; } .reader-toolbar { position: static; grid-template-columns: 1fr minmax(150px, 220px); align-items: end; gap: 18px; } .reader-size-control { min-width: 0; } body:not(.book-reader) .reader-view { gap: 12px; } body:not(.book-reader) .reader-toolbar { gap: 12px; margin-bottom: 0; } .reader-view .reader-paper { padding: 30px 22px 42px; } .reader-view .reader-head h2 { font-size: clamp(34px, 10vw, 48px); } .comment-form { grid-template-columns: 1fr; } .post-preview h3 { line-height: 1.2; } } @media (max-width: 480px) { .reader-toolbar { grid-template-columns: 1fr; } .reader-size-control { width: min(100%, 250px); } } @media (max-width: 640px) { body:not(.reader-open) .blog-layout { display: block; } body:not(.reader-open) .blog-layout > .blog-aside, body:not(.reader-open) .blog-layout > .activity-aside { display: none; } body:not(.reader-open) .post-column { width: 100%; margin-top: 0; } } /* The fixed navigation owns the first 72px of the viewport. */ body:not(.reader-open) .blog-shell { padding-top: max(clamp(40px, 6vw, 92px), 72px); } @media (max-width: 640px) { body:not(.reader-open) .blog-shell { padding-top: 62px; } } /* Quiet black-orange night reading mode. */ body.theme-dark { --orange: #ff8a16; --orange-soft: #3a1f0d; --ink: #fff7ed; --muted: #d7b69b; --line: #5c3821; --paper: #21150f; --wash: #130e0b; background-color: var(--wash); background-image: none; } body.theme-dark::before { background-image: radial-gradient(circle at 68% 6%, rgba(255, 138, 22, 0.2), transparent 40%), linear-gradient(156deg, rgba(17, 11, 9, 0.62), rgba(19, 14, 11, 0.76)), linear-gradient(rgba(111, 48, 9, 0.14), rgba(63, 28, 8, 0.08)), url("assets/blog/blog-tide-walker.png"); background-position: center top, center top, center top, center -12vh; background-size: auto, auto, auto, cover; background-repeat: repeat, repeat, repeat, no-repeat; background-attachment: scroll, scroll, scroll, scroll; } /* --------------------------------------------------------------------------- "枫的旅行" carries its own backdrop; "枫叶手记" keeps the original artwork. Two things matter here and both are easy to get wrong: 1. `center top`, never the default -30vh / -12vh. The supplied panorama is far wider than it is tall, so `cover` matches the layer's HEIGHT exactly and any upward offset uncovers the bottom of the layer, letting the paper colour show through below the footer. 2. No transform. The enlargement is already baked into the image asset (upscaled 1.5x), because a transformed pseudo-element contributes its grown bounds to scrollable overflow - scaling it here made the document ~55px taller than and produced a band of backdrop under the orange footer. --------------------------------------------------------------------------- */ body.travel-view::before { background-image: linear-gradient(138deg, rgba(255, 253, 251, 0.58), rgba(255, 244, 231, 0.68)), linear-gradient(rgba(238, 123, 0, 0.12), rgba(213, 91, 0, 0.08)), url("assets/blog/blog-page-bg.jpg"); background-position: center top, center top, center top; background-size: auto, auto, cover; background-repeat: repeat, repeat, no-repeat; transform: none; } body.travel-view.theme-dark::before { background-image: radial-gradient(circle at 68% 6%, rgba(255, 138, 22, 0.2), transparent 40%), linear-gradient(156deg, rgba(17, 11, 9, 0.62), rgba(19, 14, 11, 0.76)), linear-gradient(rgba(111, 48, 9, 0.14), rgba(63, 28, 8, 0.08)), url("assets/blog/blog-page-bg.jpg"); background-position: center top, center top, center top, center top; background-size: auto, auto, auto, cover; background-repeat: repeat, repeat, repeat, no-repeat; } body.theme-dark .blog-topbar { background: rgba(25, 16, 11, 0.62); border-bottom-color: rgba(255, 138, 22, 0.32); } body.theme-dark .blog-topbar nav a { color: #f1d7c1; } body.theme-dark .blog-topbar nav a:hover, body.theme-dark .blog-topbar nav a.is-active { color: var(--orange); } body.theme-dark .theme-toggle { color: #fff7ed; } body.theme-dark .post-preview:hover, body.theme-dark .travel-book:hover { background: rgba(58, 31, 13, 0.72); } body.theme-dark .post-preview p, body.theme-dark .travel-book-copy > p:last-child, body.theme-dark .blog-intro p:not(.eyebrow), body.theme-dark .activity-caption { color: #f0d9c6; } body.theme-dark .blog-profile p { color: #f0d9c6; } body.theme-dark .empty-posts { color: #f0d9c6; } body.theme-dark .empty-posts h3 { color: var(--ink); } body.theme-dark .activity-card, body.theme-dark .reader-view .reader-paper { background: rgba(33, 21, 15, 0.96); } body.theme-dark .contribution-graph { border: 1px solid rgba(238, 123, 0, 0.16); background: rgba(20, 13, 10, 0.9); } body.theme-dark .contribution-graph button, body.theme-dark .graph-legend i { background: #3a2a21; } body.theme-dark .contribution-graph .level-1, body.theme-dark .graph-legend i:nth-of-type(1) { background: #684126; } body.theme-dark .contribution-graph .level-2, body.theme-dark .graph-legend i:nth-of-type(2) { background: #9f581d; } body.theme-dark .contribution-graph .level-3, body.theme-dark .graph-legend i:nth-of-type(3) { background: #d86c0b; } body.theme-dark .contribution-graph .level-4, body.theme-dark .graph-legend i:nth-of-type(4) { background: #ff941f; } body.theme-dark .contribution-graph button:hover { outline-color: #21150f; } body.theme-dark .book-timeline { background: rgba(33, 21, 15, 0.96); } body.theme-dark .reader-back { background: var(--paper); } body.theme-dark .travel-catalog-head > span { color: #ffd2a7; } body.theme-dark input, body.theme-dark textarea, body.theme-dark select { background: #241710; color: var(--ink); border-color: var(--line); } /* The chapter rail becomes a compact floating index after its original place is passed. */ .book-timeline-toggle { display: none; align-items: center; justify-content: space-between; width: 100%; padding: 7px 8px; border: 0; background: transparent; color: var(--orange); font: 13px/1.3 Arial, sans-serif; text-align: left; } .book-timeline.is-floating { position: fixed; top: 104px; right: clamp(14px, 3vw, 42px); left: auto; width: min(238px, calc(100vw - 28px)); max-height: min(54vh, 440px); margin-top: 0; padding: 8px; border: 1px solid var(--line); border-left: 3px solid var(--orange); box-shadow: 0 10px 26px rgba(48, 29, 18, 0.12); animation: timelineFloatIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; } .book-timeline.is-floating .book-timeline-toggle { display: flex; } .book-timeline.is-floating .book-timeline-toggle { cursor: grab; touch-action: none; } .book-timeline.is-floating.is-dragging .book-timeline-toggle { cursor: grabbing; user-select: none; } .book-timeline.is-floating.is-collapsed { width: 122px; max-height: none; } .book-timeline.is-floating.is-collapsed a { display: none; } @keyframes timelineFloatIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 760px) { .book-timeline.is-floating { top: 68px; right: 12px; } } @media (prefers-reduced-motion: reduce) { .book-timeline.is-floating { animation: none; } } .reader-view > .book-timeline.is-floating { margin-top: 0; } /* Desktop keeps the generous left rail visible. The compact floating control is mobile-only. */ @media (min-width: 761px) { .reader-view > .book-timeline.is-floating { position: sticky; top: 104px; right: auto; left: auto; width: min(220px, 24vw); max-height: calc(100vh - 140px); margin-top: 176px; padding: 16px 14px; border: 0; border-left: 2px solid var(--orange); box-shadow: none; animation: none; } .book-timeline.is-floating .book-timeline-toggle { display: none; } } @media (max-width: 760px) { body.book-reader .book-timeline.is-floating { position: fixed; top: 68px; right: 12px; left: auto; width: min(238px, calc(100vw - 24px)); max-height: min(54vh, 440px); margin: 0; } } /* Keep the reading paper in the wide column. Auto-placement previously put it below the toolbar in the narrow rail, which collapsed long book titles. */ .reader-view > .reader-toolbar { grid-column: 1; grid-row: 1; } .reader-view > .book-timeline { grid-column: 1; grid-row: 1; align-self: start; margin-top: 176px; } .reader-view > .reader-paper { grid-column: 2; grid-row: 1; width: 100%; } @media (max-width: 760px) { .reader-view > .reader-toolbar, .reader-view > .book-timeline, .reader-view > .reader-paper { grid-column: auto; grid-row: auto; } body.book-reader .reader-view { display: flex; flex-direction: column; gap: 18px; } body.book-reader .reader-toolbar { order: 0; } body.book-reader .reader-toolbar { padding-bottom: 4px; } body.book-reader .book-timeline { order: 1; position: static; width: 100%; max-height: min(34vh, 220px); margin: 0; box-sizing: border-box; } body.book-reader .reader-paper { order: 2; min-width: 0; width: 100%; box-sizing: border-box; } } /* Keep the notebook login entry visually identical to the main site's dialog. */ .admin-login-dialog { width: min(430px, calc(100vw - 32px)); border: 1px solid rgba(238, 123, 0, 0.32); border-radius: 0; background: #fffaf7; color: #17120f; box-shadow: 0 24px 80px rgba(45, 25, 14, 0.24); } .admin-login-dialog::backdrop { background: rgba(23, 18, 15, 0.42); backdrop-filter: blur(4px); } .admin-login-panel { padding: 34px 32px 30px; border-top: 0; } .admin-login-mark { width: 42px; height: 42px; margin-bottom: 15px; display: grid; place-items: center; background: var(--orange); } .admin-login-mark img { width: 25px; height: auto; filter: brightness(0) invert(1); } .admin-login-kicker { margin: 0; letter-spacing: 0.14em; } .admin-login-panel h2 { margin: 8px 0 10px; font-size: 30px; } .admin-login-copy { margin: 0 0 22px; font-size: 14px; } .admin-login-close { top: 8px; right: 12px; width: auto; height: auto; padding: 0; border-radius: 0; background: transparent; color: #88776b; font-size: 28px; } .admin-login-close:hover { color: #88776b; background: transparent; transform: none; } .admin-password-row input { border-radius: 0; padding: 10px 11px; } .admin-password-row button { border-radius: 0; padding: 10px 14px; } @media (max-width: 760px) { body.book-reader .book-timeline.is-floating { width: min(172px, calc(100vw - 206px)); max-height: min(48vh, 360px); z-index: 5; } body.book-reader .book-timeline.is-floating.is-collapsed { width: 112px; } } @media (max-width: 520px) { .admin-login-panel { padding: 30px 22px 24px; } .admin-login-panel h2 { font-size: 29px; } } /* Anonymous mailbox nav entry matches the other notebook tabs. */ .blog-topbar nav .nav-mailbox { display: flex; align-items: center; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 0; font: inherit; font-size: 16px; color: #66564c; cursor: pointer; transition: color 0.25s, border-color 0.25s; } .blog-topbar nav .nav-mailbox:hover { color: var(--orange); border-color: var(--orange); } body.theme-dark .blog-topbar nav .nav-mailbox { color: #f1d7c1; } /* Anonymous mailbox dialog mirrors the notebook login dialog's look. */ .mailbox-dialog { width: min(430px, calc(100vw - 32px)); padding: 0; border: 1px solid rgba(238, 123, 0, 0.32); border-radius: 0; overflow: visible; background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px rgba(45, 25, 14, 0.24); opacity: 0; transform: translateY(14px) scale(0.985); } .mailbox-dialog[open] { opacity: 1; transform: none; animation: adminDialogIn 0.32s cubic-bezier(0.22, 1, 0.36, 1); } .mailbox-dialog::backdrop { background: rgba(23, 18, 15, 0.42); backdrop-filter: blur(4px); } .mailbox-panel { display: grid; gap: 10px; padding: 34px 32px 30px; } .mailbox-kicker { margin: 0; color: var(--orange); font: 12px/1.2 Arial, sans-serif; letter-spacing: 0.14em; } .mailbox-panel h2 { margin: 0; font-size: 34px; font-weight: 400; line-height: 1.2; } .mailbox-copy { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.65; } .mailbox-panel label { margin-top: 6px; color: var(--muted); font-size: 13px; } .mailbox-panel input, .mailbox-panel textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 0; outline: 0; background: var(--wash); color: var(--ink); padding: 10px 11px; font: inherit; } .mailbox-panel input:focus, .mailbox-panel textarea:focus { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); } .mailbox-panel textarea { min-height: 110px; resize: vertical; line-height: 1.6; } .mailbox-submit-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; } .mailbox-submit-row button { min-width: 116px; border: 0; border-radius: 0; background: var(--orange); color: #fff; padding: 11px 18px; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; } .mailbox-submit-row button:hover { background: #cf6900; } .mailbox-submit-row button:disabled { cursor: wait; opacity: 0.62; } .mailbox-status { min-width: 0; color: var(--orange); font-size: 13px; line-height: 1.45; } .mailbox-close { position: absolute; top: 8px; right: 12px; z-index: 1; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--muted); font: 28px/1 Arial, sans-serif; cursor: pointer; transition: color 0.2s ease; } .mailbox-close:hover { color: var(--orange); } @media (max-width: 520px) { .mailbox-panel { padding: 30px 22px 24px; } .mailbox-panel h2 { font-size: 29px; } .mailbox-submit-row { flex-direction: column; align-items: stretch; } } /* Shared category tabs sit directly above the article stream. */ .mobile-category-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; padding: 0 0 14px; border-bottom: 1px solid var(--line); } .mobile-category-bar[hidden] { display: none; } .category-chip { position: relative; flex: 0 0 auto; padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #66564c; font-size: 13px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } body.theme-dark .category-chip { border-color: rgba(255, 194, 136, 0.42); background: rgba(92, 56, 33, 0.42); color: #f4d9c2; } body.theme-dark .category-chip:hover, body.theme-dark .category-chip:focus-visible { border-color: #ff9b38; background: rgba(238, 123, 0, 0.18); color: #ffb86f; } .category-chip:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px); } .category-chip.is-selected { background: var(--orange); border-color: var(--orange); color: #fff; animation: categoryChipPop 0.42s cubic-bezier(0.16, 1, 0.3, 1); } body.theme-dark .category-chip.is-selected { border-color: #ff9b38; background: #ee7b00; color: #fffaf4; } @keyframes categoryChipPop { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(238, 123, 0, 0.3); } 62% { transform: scale(1.045); box-shadow: 0 0 0 7px rgba(238, 123, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 123, 0, 0); } } @media (prefers-reduced-motion: reduce) { .category-chip.is-selected { animation: none; } } @media (max-width: 640px) { .mobile-category-bar { flex-wrap: nowrap; overflow-x: auto; margin: 14px 0 2px; padding-bottom: 4px; border-bottom: 0; scrollbar-width: none; -ms-overflow-style: none; } .mobile-category-bar::-webkit-scrollbar { display: none; } .category-chip { padding: 6px 14px; } .blog-topbar nav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .blog-topbar nav::-webkit-scrollbar { display: none; } .blog-topbar nav .nav-mailbox { height: 100%; white-space: nowrap; font-size: 11px; } } /* Serialization log rides the left rail of the travel view, styled like the notebook sidebar cards. */ .serial-log-panel { display: none; grid-column: 1; grid-row: 2; align-self: start; min-width: 0; padding-right: clamp(6px, 1vw, 14px); } body.travel-view .serial-log-panel { display: block; } body.reader-open .serial-log-panel { display: none; } .serial-log-card { padding: 24px; border: 1px solid var(--line); background: rgba(255, 253, 251, 0.8); box-shadow: 0 14px 38px rgba(65, 40, 24, 0.04); animation: serialLogIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes serialLogIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .serial-log-card h2 { margin: 0 0 16px; font-size: 25px; font-weight: 400; line-height: 1.1; } .serial-log-list { display: grid; } .serial-log-item { padding: 13px 0; border-top: 1px dashed var(--line); } .serial-log-item time { display: block; margin-bottom: 5px; color: var(--orange); font: 12px/1.2 Arial, sans-serif; } .serial-log-item p { margin: 0; color: #66564c; font-size: 14px; line-height: 1.6; } .serial-log-empty { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; } @media (max-width: 1040px) { .serial-log-panel { grid-column: 1 / -1; grid-row: auto; padding: 0 0 26px; } } @media (max-width: 640px) { .serial-log-panel { margin-top: 16px; padding: 0 0 22px; } .serial-log-card { padding: 20px; } } @media (prefers-reduced-motion: reduce) { .serial-log-card { animation: none; } } body.theme-dark .serial-log-card { background: rgba(33, 21, 15, 0.96); border-color: rgba(234, 222, 212, 0.18); } body.theme-dark .serial-log-item p { color: #f0d9c6; } body.theme-dark .serial-log-empty { color: #cbb7a6; } /* Desktop reading tools share one sticky rail so controls never drift apart. */ .reader-view > .reader-rail { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: 104px; z-index: 2; display: grid; gap: 28px; max-height: calc(100vh - 132px); } .reader-rail .reader-toolbar { position: static; margin: 0; padding-top: 8px; } .reader-rail .book-timeline, .reader-rail .book-timeline.is-floating { position: static; width: min(220px, 24vw); max-height: min(54vh, 440px); margin: 0; padding: 16px 14px; border: 0; border-left: 2px solid var(--orange); box-shadow: none; animation: none; } .reader-rail .book-timeline.is-floating .book-timeline-toggle { display: none; } @media (max-width: 760px) { .reader-view > .reader-rail { grid-column: auto; grid-row: auto; position: static; display: flex; flex-direction: column; gap: 18px; max-height: none; } .reader-rail .reader-toolbar { order: 0; } .reader-rail .book-timeline, .reader-rail .book-timeline.is-floating { order: 1; position: static; width: 100%; max-height: min(34vh, 220px); margin: 0; box-sizing: border-box; } body.book-reader .reader-rail .book-timeline.is-floating { position: fixed; width: min(172px, calc(100vw - 206px)); max-height: min(48vh, 360px); z-index: 5; } body.book-reader .reader-rail .book-timeline.is-floating .book-timeline-toggle { display: flex; } body.book-reader .reader-rail .book-timeline.is-floating.is-collapsed { width: 112px; max-height: none; } } /* Orange interaction states share one calm ease-in-out rhythm. */ .theme-toggle, .blog-topbar nav a, .blog-topbar nav .nav-mailbox, .archive-list button, .category-list button, .category-chip, .book-timeline a, .post-pagination button, .reader-back, .reader-share-button, .mailbox-close, .dialog-close, .admin-login-close { transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1); } .archive-list button, .book-timeline a, .post-pagination button { transition-property: color, background-color, border-color; transition-duration: 0.28s; } /* Keep embedded mobile WebViews on cheap compositing paths. */ html.performance-lite { scroll-behavior: auto; } html.performance-lite body { background-attachment: scroll; } html.performance-lite .blog-topbar, html.performance-lite dialog::backdrop, html.performance-lite .book-timeline.is-floating { backdrop-filter: none !important; } html.performance-lite .blog-topbar { background: rgba(255, 253, 251, 0.58); transform: translateY(0); } /* Let the title copy fill the header area so its visible end can align with the accent rule instead of inheriting intrinsic-width whitespace. */ @media (min-width: 641px) { .blog-intro { padding-right: 0; } .blog-intro > div, .travel-view .blog-intro > div { width: 100%; margin-left: 0; transform: none; } .blog-intro p:not(.eyebrow) { margin-left: auto; } } /* The unavailable album stays visually equivalent to a tab and never shrinks into the other mobile navigation labels. */ @media (max-width: 640px) { .blog-topbar nav { flex: 1 1 auto; min-width: 0; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; } .blog-topbar nav a, .blog-topbar nav .nav-wip, .blog-topbar nav .nav-mailbox { flex: 0 0 auto; height: 100%; white-space: nowrap; font-size: 11px; } .blog-topbar nav .nav-wip small { margin-left: 3px; font-size: 8px; } } html.performance-lite .page-enter, html.performance-lite .post-preview, html.performance-lite .category-chip, html.performance-lite .archive-list button { animation: none !important; transition-duration: 0.12s !important; } html.performance-lite .page-enter { opacity: 1; transform: none; } html.performance-lite .post-preview:hover, html.performance-lite .post-preview:focus-visible { transform: none; } /* The supporting rail stays quiet, but separates cleanly from the writing field. */ @media (min-width: 641px) { .activity-aside { margin-left: clamp(-18px, -1.4vw, -14px); margin-right: clamp(26px, 2.6vw, 36px); padding: clamp(20px, 2vw, 28px); background: rgba(255, 253, 251, 0.48); border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 6px; box-shadow: 0 16px 42px rgba(76, 48, 26, 0.1); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); } body.theme-dark .activity-aside { background: rgba(19, 13, 10, 0.58); border-color: rgba(255, 221, 190, 0.15); box-shadow: 0 18px 46px rgba(0, 0, 0, 0.25); } } @media (min-width: 1041px) { .blog-shell { grid-template-columns: minmax(244px, 0.82fr) minmax(0, 2.04fr) minmax(165px, 0.52fr); column-gap: clamp(24px, 3vw, 50px); } } @media (min-width: 641px) { .activity-aside > .blog-aside .search-box { border-bottom: 0; } .activity-aside > .blog-aside .search-box span { color: #66564c; font-family: var(--site-serif); font-size: 15px; font-weight: 400; line-height: normal; letter-spacing: 0; } .activity-aside .activity-card { background: transparent; } .activity-aside .contribution-graph { background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(112, 76, 48, 0.12); } /* Only the EMPTY cells get the rail tone. Without :not(...) this rule (0,2,1) out-specifies .contribution-graph .level-1 (0,2,0) and flat-fills the whole heatmap in light mode; dark mode survived by accident via (0,3,1). */ body:not(.theme-dark) .activity-aside .contribution-graph button:not([class*="level-"]) { background: #ddcabe; } .activity-aside .search-box input { padding: 0 8px; background: rgba(255, 255, 255, 0.38); border: 1px solid rgba(112, 76, 48, 0.14); border-radius: 4px; } body.theme-dark .activity-aside .activity-card { background: transparent; } body.theme-dark .activity-aside > .blog-aside .search-box span { color: #f0d9c6; } body.theme-dark .activity-aside .contribution-graph { background: rgba(19, 13, 10, 0.3); border-color: rgba(255, 221, 190, 0.16); } body.theme-dark .activity-aside .search-box input { background: rgba(19, 13, 10, 0.3); border-color: rgba(255, 221, 190, 0.18); } } @media (max-width: 640px) { body::before { background-size: auto, auto, 128% 128%; } } /* The activity grid yields before its rail does, so every month stays inside the panel. */ @media (min-width: 641px) { .activity-aside { min-width: 0; margin-top: clamp(28px, 3vw, 42px); } .activity-aside .contribution-graph { width: 100%; /* No max-width cap: it used to stop at 220px inside a 236px rail, so the panel - and the grid inside it - fell ~51px short of the rail's right-hand text column (archive/search/caption all end at the same edge). Filling the rail both lines the panel up with that column and grows the cells. Tighter padding passes a little more of the width to the cells themselves. */ max-width: none; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3px, 0.45vw, 5px); padding: clamp(6px, 0.9vw, 11px); } .activity-aside .contribution-graph button { min-width: 0; } } @media (min-width: 641px) and (max-width: 1040px) { .activity-aside { margin-left: clamp(12px, 2.4vw, 24px); margin-right: clamp(12px, 2.4vw, 24px); padding: clamp(14px, 2.2vw, 20px); } } /* --------------------------------------------------------------------------- Theme-switch hygiene. Colour/background transitions on controls and text are what smeared unevenly across the page when flipping day/night, and they read as stray animation on hover too. They are removed wholesale here; motion (transform, opacity, geometry) is deliberately kept so hover feel is unchanged. The reduced-motion preference is re-asserted afterwards because this rule uses !important. --------------------------------------------------------------------------- */ button, a, span, strong, time, label { transition-property: transform, opacity, visibility, width, height, margin, padding, top, left, right, bottom, border-radius, box-shadow, font-size, letter-spacing, filter !important; } @media (prefers-reduced-motion: reduce) { button, a, span, strong, time, label { transition: none !important; } } /* --------------------------------------------------------------------------- Day/night reveal. Exactly one thing animates: a circle wiped across the root view-transition snapshot, anchored on the theme toggle. No per-element colour transitions are involved, so the switch stays a single deliberate gesture instead of a ragged fade. Browsers without View Transitions, and reduced-motion users, swap instantly (applyTheme() skips startViewTransition entirely). --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; animation: themeReveal 700ms cubic-bezier(0.4, 0, 0.2, 1) both; } } @keyframes themeReveal { from { clip-path: circle(0% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 0%)); } to { clip-path: circle(135% at var(--theme-reveal-x, 50%) var(--theme-reveal-y, 0%)); } }