.blog-post-layout { position: relative; max-width: 58rem; margin: 0 auto; } .blog-post { display: flex; flex-direction: column; gap: 1rem; max-width: 58rem; margin: 0 auto; padding: 1rem 0 4rem; } .blog-post-cover { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--bg-card); } .blog-post-cover img { width: 100%; height: 100%; object-fit: cover; } .blog-post-header { margin-bottom: 4rem; } .blog-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; } .blog-post-category { color: var(--green); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.0625rem; text-transform: uppercase; } .blog-post-date, .blog-post-read-time, .blog-post-views { display: flex; align-items: center; gap: 0.375rem; color: var(--fg-muted); font-size: 0.8rem; font-weight: 400; } .blog-post-date i, .blog-post-read-time i, .blog-post-views i { font-size: 0.875rem; } .blog-post-title { margin-bottom: 1.5rem; color: var(--fg); font-size: 2.75rem; font-weight: 800; letter-spacing: -0.0625rem; line-height: 1.15; } .blog-post-excerpt { color: var(--fg-secondary); font-size: 1.15rem; font-weight: 300; line-height: 1.65; } .blog-post-audio { margin: 0 0 1.5rem; padding: 1.5rem; border: 0.0625rem solid var(--border); border-radius: 0.75rem; background: var(--bg-card); } .blog-post-audio-title { margin: 0 0 0.75rem; color: var(--fg); font-size: 1rem; font-weight: 700; } .blog-post-audio-player { width: 100%; } .blog-post-content { color: var(--fg-secondary); font-size: 1.1rem; line-height: 1.85; overflow-wrap: break-word; } .blog-post-content > *:first-child { margin-top: 0; } .blog-post-content > *:last-child { margin-bottom: 0; } .blog-post-content h2, .blog-post-content h3, .blog-post-content h4 { color: var(--fg); scroll-margin-top: 5rem; } .blog-post-content h2 { margin-top: 4rem; margin-bottom: 1.25rem; font-size: 1.85rem; font-weight: 750; letter-spacing: -0.03125rem; line-height: 1.25; } .blog-post-content h3 { margin-top: 3rem; margin-bottom: 1rem; font-size: 1.4rem; font-weight: 650; letter-spacing: -0.015625rem; line-height: 1.3; } .blog-post-content h4 { margin-top: 2.5rem; margin-bottom: 0.875rem; font-size: 1.15rem; font-weight: 600; } .blog-post-content p { margin-bottom: 1.5rem; } .blog-post-content a { border-bottom: 0.0625rem solid transparent; color: var(--green); text-decoration: none; transition: border-color 0.15s; } .blog-post-content a:hover { border-bottom-color: var(--green); } .blog-post-content strong, .blog-post-content b { color: var(--fg); font-weight: 650; } .blog-post-content ul, .blog-post-content ol { margin: 1.75rem 0; padding-left: 1.75rem; } .blog-post-content li { margin-bottom: 0.625rem; padding-left: 0.375rem; } .blog-post-content li::marker { color: var(--green); } .blog-post-content code { padding: 0.1875rem 0.5rem; border: 0.0625rem solid var(--chip-border); border-radius: 0.375rem; background: var(--chip-bg); color: var(--fg); font-family: "SF Mono", "Fira Code", "JetBrains Mono", monospace; font-size: 0.875em; font-weight: 400; } .blog-post-content pre { margin: 2.5rem 0; padding: 1.5rem; overflow-x: auto; border-radius: 0.625rem; background: #282a36; color: #f8f8f2; font-size: 0.875rem; line-height: 1.7; } .blog-post-content pre code { padding: 0; border: none; background: none; color: inherit; font-size: inherit; } .blog-post-content blockquote { margin: 2.5rem 0; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 0.1875rem solid var(--green); border-radius: 0 0.375rem 0.375rem 0; background: var(--chip-bg); color: var(--fg); font-size: 1.05rem; font-style: italic; } .blog-post-content hr { height: 0.0625rem; margin: 4rem 0; border: none; background: linear-gradient(to right, transparent, var(--border) 25%, var(--border) 75%, transparent); } .blog-post-content img { width: 100%; margin: 2.5rem 0; border-radius: 0.5rem; } .blog-post-content iframe { width: 100%; max-width: 100%; margin: 2.5rem 0; border: 0; border-radius: 0.5rem; } .blog-post-content iframe[src*="youtube"] { height: auto; aspect-ratio: 16 / 9; } .blog-post-content table { display: block; width: 100%; margin: 2.5rem 0; overflow-x: auto; border: 0.0625rem solid var(--border); border-collapse: collapse; border-radius: 0.5rem; font-size: 0.95rem; } .blog-post-content th, .blog-post-content td { padding: 0.875rem 1.125rem; border-bottom: 0.0625rem solid var(--border); text-align: left; } .blog-post-content th { background: var(--chip-bg); color: var(--fg); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03125rem; text-transform: uppercase; } .blog-post-content tr:last-child td { border-bottom: none; } .blog-post-content tr:hover td { background: var(--chip-bg); } .views-count { display: inline-flex; } .slot-reel { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: bottom; } .slot-strip { display: flex; flex-direction: column; } .slot-strip span { display: block; height: 1.2em; line-height: 1.2em; text-align: center; } @media (prefers-reduced-motion: no-preference) { .slot-reel.spin .slot-strip { animation: slot-roll 3s cubic-bezier(0.22, 1, 0.36, 1) forwards; } } @media (prefers-reduced-motion: reduce) { .slot-strip { transform: translateY(calc(-1.2em * var(--steps))); } } @keyframes slot-roll { to { transform: translateY(calc(-1.2em * var(--steps))); } } .toc { position: fixed; top: 5rem; left: calc(50% + 29rem); width: 16rem; max-height: calc(100vh - 6rem); overflow-y: auto; } .toc-title { margin-bottom: 1rem; color: var(--fg-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.0625rem; text-transform: uppercase; } .toc-list { display: flex; flex-direction: column; gap: 0.125rem; margin: 0; padding: 0; list-style: none; } .toc-item--level-3 { padding-left: 0.875rem; } .toc-link { display: block; padding: 0.375rem 0.75rem; border-left: 0.125rem solid transparent; color: var(--fg-muted); font-size: 0.8rem; line-height: 1.4; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .toc-link:hover { color: var(--fg); } .toc-link.active { border-left-color: var(--green); color: var(--green); } @media (max-width: 96rem) { .toc { display: none; } } .related-posts { padding-top: 3.5rem; border-top: 0.0625rem solid var(--border); } .related-posts-title { margin-bottom: 2rem; color: var(--fg); font-size: 1.35rem; font-weight: 650; letter-spacing: -0.015625rem; } @media (max-width: 56rem) { .blog-post-title { font-size: 2.25rem; } .blog-post-excerpt, .blog-post-content { font-size: 1.05rem; } .blog-post-content h2 { font-size: 1.6rem; } .blog-post-content h3 { font-size: 1.25rem; } } @media (max-width: 43.75rem) { .blog-post { padding: 1rem 0 3rem; } .blog-post-cover { border-radius: 0.375rem; } .blog-post-header { margin-bottom: 3rem; } .blog-post-title { font-size: 1.75rem; letter-spacing: -0.03125rem; } .blog-post-excerpt { font-size: 1rem; } .blog-post-meta { gap: 1rem; margin-bottom: 1.25rem; } .blog-post-content { font-size: 1rem; line-height: 1.75; } .blog-post-content h2 { margin-top: 3rem; font-size: 1.4rem; } .blog-post-content h3 { margin-top: 2.5rem; font-size: 1.15rem; } .blog-post-content pre { margin: 2rem 0; padding: 1.25rem; font-size: 0.825rem; } .blog-post-content blockquote { margin: 2rem 0; padding: 1rem 0 1rem 1.25rem; font-size: 1rem; } }