/* ========================================================================== Blog post reading styles + lightbox -------------------------------------------------------------------------- SCOPING NOTE — everything here is scoped under .post-body, which exists ONLY on individual post pages (src/_includes/post.njk). It is deliberately NOT scoped to .blog-list: that class is also on the home page, via the "Development Updates" teaser section (_includes/sections/updatesTeaser.njk), so styling .blog-list would restyle the splash page too. LOAD ORDER — this file must stay LAST in base.njk's stylesheet list. A few rules here (headings, lists) override same-specificity rules in style.css and win on source order alone. ========================================================================== */ .post-body { --post-size: 17px; --post-rule: #e3e6e2; --post-shade: rgba(20, 30, 20, .07); max-width: 820px; margin-left: auto; margin-right: auto; font-size: var(--post-size); line-height: 1.74; } .post-body p { margin: 0 0 1.2rem; } .post-body h2, .post-body h3, .post-body h4, .post-body h5 { color: #2b2b2b; font-weight: 300; line-height: 1.3; margin: 2.1em 0 .5em; } .post-body h3 { font-size: 1.72em; } .post-body h4 { font-size: 1.32em; } .post-body > h2:first-child, .post-body > h3:first-child, .post-body > h4:first-child { margin-top: 0; } .post-body ol, .post-body ul { list-style: disc outside; padding-left: 22px; margin: 0 0 1.2rem; } .post-body li { margin-bottom: .35em; } .post-body strong { font-weight: 700; color: #2b2b2b; } /* -------------------------------------------------------------------------- Images A standalone image in markdown renders as

, so :only-child targets exactly those and leaves any inline image alone. Capping the height stops tall phone screenshots running past the viewport, which is what the old max-width-only rule allowed. -------------------------------------------------------------------------- */ .post-body p > img:only-child { display: block; margin: 2em auto 2.2em; max-width: 100%; max-height: 70vh; width: auto; height: auto; border: 1px solid var(--post-rule); border-radius: 4px; background: #f4f4f4; box-shadow: 0 1px 3px var(--post-shade); } /* Added by post-lightbox.js, so the zoom affordance only appears when the script is actually there to handle the click. */ .post-body p > img.is-zoomable { cursor: zoom-in; } .post-body p > img.is-zoomable:focus-visible { outline: 3px solid #00880f; outline-offset: 3px; } /* -------------------------------------------------------------------------- Lightbox — markup is built by post-lightbox.js and appended to -------------------------------------------------------------------------- */ .pl-lb { position: fixed; inset: 0; /* Must clear the site header (z-index 9998) and the page preloader (.se-pre-con, 9999) in style.css, or the viewer opens underneath the nav and its Close button is unreachable. */ z-index: 10000; background: rgba(10, 14, 10, .93); display: flex; flex-direction: column; touch-action: pan-y; } .pl-lb[hidden] { display: none !important; } .pl-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #dfe6df; } .pl-count { font-size: 12px; letter-spacing: 1.3px; color: #93a593; font-variant-numeric: tabular-nums; } .pl-close { margin-left: auto; font-family: inherit; font-size: 13px; letter-spacing: .8px; text-transform: uppercase; color: #dfe6df; background: transparent; border: 1px solid #3c4b3e; border-radius: 4px; padding: 7px 14px; cursor: pointer; } .pl-close:hover { background: #1d271f; border-color: #55684f; } .pl-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 8px; } .pl-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px; } .pl-nav { flex: 0 0 auto; width: 46px; height: 78px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .07); color: #e6ece6; font-size: 24px; line-height: 1; cursor: pointer; } .pl-nav:hover:not(:disabled) { background: rgba(255, 255, 255, .16); } .pl-nav:disabled { opacity: .22; cursor: default; } .pl-cap { flex: 0 0 auto; margin: 0; padding: 14px 16px; text-align: center; color: #c2ccc2; font-size: 13px; line-height: 1.5; } .pl-lb :focus-visible { outline: 2px solid #8fd79a; outline-offset: 2px; } @media (max-width: 720px) { .post-body { --post-size: 16px; } .post-body p > img:only-child { margin: 1.6em auto 1.8em; } .pl-nav { width: 38px; height: 62px; font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .pl-lb, .pl-lb * { transition: none !important; animation: none !important; } }