/* ========================================================================== AstroChris โ€” photo.css Loaded only on /photo/:slug, after main.css (via buildHead({ extraCss })). Everything main.css already provides is reused as-is: .container, .section, .panel, .data-list, .chip, .btn, .breadcrumbs, .prose, .lede, .page-title and the utilities. This file adds only what does not exist there: 1. The full-bleed hero figure and its zoom control 2. The two-column article layout 3. The designation line 4. The sidebar capture list 5. The comments region 6. The full-resolution zoom overlay 7. Reduced motion and print Tokens only โ€” no literal colours. See DESIGN.md ยง9. ========================================================================== */ /* -------------------------------------------- 1. Full-bleed hero figure */ /*
is a full-width flex child of , so a 100%-width figure is already edge-to-edge: no negative-margin trickery is needed. */ .shot { width: 100%; margin: 0 0 var(--space-lg); padding: 0; border-bottom: 1px solid var(--border); background: radial-gradient(120% 80% at 50% 0%, rgba(58, 78, 130, 0.18), transparent 70%), var(--bg-deep); } .shot__frame { position: relative; display: flex; justify-content: center; align-items: center; min-height: 12rem; } /* Scales to fit both axes so tall and wide framings both sit well, and never eats the whole viewport on a phone. width/height attributes on the element keep the aspect ratio reserved before the bytes arrive. */ .shot__img { width: auto; max-width: 100%; height: auto; max-height: min(78vh, 900px); margin-inline: auto; } .shot__zoom { position: absolute; right: var(--space-sm); bottom: var(--space-sm); z-index: 1; background: var(--overlay); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } @media (max-width: 560px) { .shot__zoom { right: var(--space-2xs); bottom: var(--space-2xs); } } /* ------------------------------------------------ 2. Two-column layout */ .photo-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; } /* min-width: 0 on the main column stops long unbroken strings (an r2 key, a filter string) from blowing the grid track out. */ .photo-main { min-width: 0; } .photo-main > * + * { margin-top: var(--space-md); } .photo-side { min-width: 0; display: flex; flex-direction: column; gap: var(--space-md); } @media (min-width: 961px) { .photo-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--space-xl); } } .photo-head { margin-bottom: var(--space-md); } .photo-head__chip { margin: 0 0 var(--space-2xs); } .photo-head .page-title { margin-bottom: var(--space-2xs); } .photo-description { max-width: 42rem; } .photo-notes .panel__body > * + * { margin-top: var(--space-xs); } /* ------------------------------------------------ 3. Designation line */ .photo-designation { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-xs); margin: 0 0 var(--space-sm); font-size: 0.9375rem; letter-spacing: 0.02em; } .photo-designation__link { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent-line); padding-bottom: 1px; } .photo-designation__link:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); } .photo-designation__hint { font-size: var(--step--1); font-family: var(--font-sans); } /* -------------------------------------------- 4. Sidebar capture list */ .capture-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); } .capture-item__link { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--space-2xs); padding: var(--space-3xs); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; transition: border-color var(--transition), background-color var(--transition); } .capture-item__link:hover { border-color: var(--border-strong); background: rgba(146, 170, 214, 0.06); color: var(--text); } .capture-item__img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); background: linear-gradient(160deg, #0d1424, #070b14); } .capture-item__img--empty { display: block; } .capture-item__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .capture-item__title { font-size: 0.9375rem; font-weight: 500; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .capture-item__meta { font-size: var(--step--1); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------------------------------------------------- 5. Comments region */ /* The containers ship empty; js/comments.js mounts into [data-comment-form] and [data-comment-list]. These rules style whatever it renders without assuming a particular element. */ .comments { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); scroll-margin-top: calc(var(--header-height) + var(--space-sm)); } .comments .section__title { margin-bottom: var(--space-sm); } .comments__form:not(:empty) { margin-bottom: var(--space-md); max-width: 40rem; } .comments__list:not(:empty) { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 40rem; margin: 0; padding: 0; list-style: none; } /* Individual comments as rendered by js/comments.js. */ .comment { padding: var(--space-sm); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .comment__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; } .comment__avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex: none; } .comment__avatar--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; } .comment__author { font-weight: 600; font-size: 0.92rem; } .comment__time { color: var(--text-dim); font-size: 0.8rem; } .comment__body { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; } .comment-state { color: var(--text-dim); font-size: 0.9rem; padding: var(--space-sm) 0; } /* ------------------------------------------ 6. Full-resolution overlay */ /* Opened by js/photo.js. Starts fitted to the viewport; clicking the image drops .zoom--fit so it renders at natural pixel size and the container scrolls โ€” that is the actual full-resolution view. */ .zoom { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: flex-start; overflow: auto; overscroll-behavior: contain; background: rgba(3, 4, 10, 0.94); -webkit-overflow-scrolling: touch; } .zoom[hidden] { display: none; } .zoom__img { display: block; margin: auto; max-width: none; width: auto; height: auto; cursor: zoom-out; } .zoom--fit .zoom__img { max-width: 100%; max-height: 100%; cursor: zoom-in; } .zoom__close { position: fixed; top: var(--space-sm); right: var(--space-sm); z-index: 1; background: var(--overlay); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); } .zoom__hint { position: fixed; left: 50%; bottom: var(--space-sm); transform: translateX(-50%); padding: 0.25rem 0.7rem; border-radius: var(--radius-pill); background: var(--overlay); color: var(--text-dim); font-size: var(--step--1); pointer-events: none; } /* Set on while the overlay is open so the page behind cannot scroll. */ .is-zoomed, .is-zoomed body { overflow: hidden; } /* ------------------------------------------ 7. Reduced motion and print */ @media (prefers-reduced-motion: reduce) { .capture-item__link { transition: none; } } @media print { .shot__zoom, .zoom, .comments, .photo-side { display: none !important; } .photo-layout { display: block; } .shot__img { max-height: none; } }