/* Blog styles. Tokens and element defaults come from style.css; the nav and footer are shared with the landing page, so blog pages load landing.css too and carry `class="product-landing"` on for the widths those rules read. Nothing here is used by the generated guide pages. */ .blog-main { width: min(42rem, calc(100% - 2.5rem)); margin: 0 auto; padding: 3rem 0 4rem; } .blog-main a { text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Reading column. Long-form prose wants a larger body size and a longer measure than the reference pages, which are built to be scanned. */ .post-body { font-size: 1.0625rem; line-height: 1.72; } .post-body p { margin: 0 0 1.35rem; } .post-header { margin-bottom: 2.5rem; } .post-header h1 { font-size: clamp(2rem, 5.5vw, 2.9rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .75rem; } .post-lead { font-size: 1.15rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.25rem; } .post-meta { margin: 0; color: var(--muted); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; } /* style.css sets an uppercase, rule-under heading for reference pages. An essay reads better with plain sentence-case section headings. */ .post-body h2 { font-size: 1.35rem; font-weight: 640; letter-spacing: -.01em; text-transform: none; color: var(--text); border-bottom: 0; padding-bottom: 0; margin: 2.75rem 0 1rem; } .post-body pre { font-size: .85rem; margin: 0 0 1.35rem; } .post-body hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; } .post-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .95rem; } .post-footer p { margin: 0 0 .6rem; } /* Index */ .blog-index-header { margin-bottom: 2.5rem; } .blog-index-header h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); margin: 0 0 .6rem; } .blog-index-header p { color: var(--muted); margin: 0; } .post-list { list-style: none; padding: 0; margin: 0; } .post-list li { padding: 1.5rem 0; border-top: 1px solid var(--border); } .post-list li:last-child { border-bottom: 1px solid var(--border); } .post-list time { display: block; color: var(--muted); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .4rem; } .post-list h2 { font-size: 1.3rem; font-weight: 640; letter-spacing: -.01em; text-transform: none; color: var(--text); border-bottom: 0; padding-bottom: 0; margin: 0 0 .45rem; } .post-list h2 a { color: var(--text); text-decoration: none; } .post-list h2 a:hover { color: var(--accent); text-decoration: underline; } .post-list p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.6; } .blog-subscribe { margin-top: 2.5rem; font-size: .9rem; color: var(--muted); } @media (max-width: 640px) { .blog-main { padding: 2rem 0 3rem; } .post-body { font-size: 1rem; } }