/* ───────────────────────────────────────────────────────────────────────────── home.css — styles for the home page (photo viewer) Global colors, fonts, and background texture live in type.css — edit those there. ───────────────────────────────────────────────────────────────────────────── */ /* The page itself — fills the full viewport height so the photo always sits in the center of the screen, even on short content. */ body { margin: 0; min-height: 100vh; } /* ── Masthead (fixed top line) ───────────────────────────────────────────── */ /* One quiet line spread across the full top edge — name on the left, place and medium in the middle, site links riding the right edge. Fixed so it stays put; pointer-events: none lets clicks pass through the empty stretches to reach the photo, while each child turns them back on. */ .home-header { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 8px 14px 0 10px; pointer-events: none; } /* The site name — leftmost entry in the masthead, plain ink. */ .home-brand { margin: 0; pointer-events: auto; font-family: var(--font-receipt); /* site typeface — defined in type.css */ font-size: 1rem; font-weight: 400; letter-spacing: 0.01em; text-transform: lowercase; color: var(--text); } /* Makes the brand name link invisible (no underline, inherits text color). */ .home-brand a { color: inherit; text-decoration: none; } /* Place + medium — the small facts in the middle of the masthead line. */ .home-meta { margin: 0; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(0, 0, 0, 0.45); } /* Site links on the right edge, spaced like the metadata. */ .home-links { pointer-events: auto; display: flex; align-items: baseline; gap: 1.4rem; } .home-links a { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(0, 0, 0, 0.45); text-decoration: none; transition: color 0.2s ease; } .home-links a:hover { color: var(--text); } /* "about" while its panel is open — italic marks the on state, same convention the old project nav used. */ .home-links a.is-open { color: var(--text); font-style: italic; } /* ── Inline about ───────────────────────────────────────────────────────── */ /* Opening "about" gives the text the whole page: the photo fades out and the words sit alone under the name, top-left. Closing brings the photo back. home.js toggles .is-about-open on . */ .is-about-open .home-viewer { opacity: 0; pointer-events: none; } .home-viewer { transition: opacity 0.25s ease; } .home-about { position: fixed; /* Hangs just under the name so "is from..." reads as its continuation. */ top: 2.4rem; left: 10px; z-index: 15; margin: 0; max-width: 34rem; padding-right: 1.5rem; /* never flush against anything on narrow windows */ font-size: 0.85rem; line-height: 1.7; letter-spacing: 0.02em; color: var(--text); } .home-about[hidden] { display: none; } .home-about p { margin: 0 0 0.7rem; text-wrap: pretty; /* avoid one-word hang lines when wrapping */ } .home-about p:last-child { margin-bottom: 0; } /* Contact line under the bio — a quiet link, clearly set apart from the bio block above it. */ .home-contact { margin-top: 2.25rem; color: rgba(0, 0, 0, 0.45); } .home-contact:empty { display: none; } .home-contact a { color: rgba(0, 0, 0, 0.45); text-decoration: none; transition: color 0.2s ease; } .home-contact a:hover { /* hot plum-pink — pulls the pink undertone out of the paper */ color: #a84364; } .home-contact svg { width: 0.9em; height: auto; vertical-align: -0.08em; margin-right: 0.4em; } /* ── Photo viewer (the centered area that holds the photo) ──────────────── */ /* Centers the photo on the page. No vertical padding on desktop so a portrait can run the full height of the page, top to bottom. */ .home-viewer { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; } /* Wrapper around the photo. */ .home-slide { margin: 0; display: flex; cursor: default; } /* The photo itself. Its width and height are set by JavaScript based on the screen size — edit fitPhoto() in home.js to change the photo size. The image is loaded as a CSS background so it scales to fill the box. */ .home-photo { display: block; flex-shrink: 0; background-size: cover; background-position: center; background-repeat: no-repeat; /* Prevents the photo from being saved via right-click drag on iOS/Safari */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; /* Photo fade speed when advancing — increase (e.g. 0.3s) for a slower fade, decrease for a snappier transition. Must match ADVANCE_MS in home.js. */ transition: opacity 0.09s ease; } /* Removes any browser highlight when hovering or focusing the photo. */ .home-photo:hover, .home-photo:focus { filter: none; outline: none; } /* During the fade between photos the photo is made invisible. JavaScript adds this class, then removes it after the new photo loads. */ .home-photo.is-advancing { opacity: 0; } /* ── Footer (bottom-left corner) ─────────────────────────────────────────── */ /* Small copyright line pinned to the bottom-left, quiet like the header. */ .home-footer { position: fixed; bottom: 0; left: 0; z-index: 10; padding: 0 0 6px 6px; font-family: var(--font-receipt); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.01em; text-transform: lowercase; color: rgba(0, 0, 0, 0.45); } .home-footer a { color: inherit; text-decoration: none; } .home-footer a:hover { text-decoration: underline; } /* ── Loading / empty state ───────────────────────────────────────────────── */ /* While photos load: a small red dot orbiting an invisible circle (adapted from boguz.github.io/Spinners). The box spins; the ::before dot rides its corner. */ .home-loading { height: 26px; width: 26px; animation: home-loading-orbit 1.8s infinite linear; } .home-loading::before { content: ''; display: block; height: 6px; width: 6px; border-radius: 50%; background-color: var(--text); } @keyframes home-loading-orbit { to { transform: rotate(360deg); } } /* Text shown if no photos could be fetched. */ .home-empty { font-family: var(--font-receipt); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: #000; } /* ── Mobile styles ───────────────────────────────────────────────────────── */ /* These styles apply on screens narrower than 600px (phones). To change the breakpoint, edit the 600px value in the line below. */ @media (max-width: 600px) { .home-brand { font-size: 0.8rem; } /* The middle metadata (place, medium) gives way on small screens so the masthead stays one clean line: name left, links right. */ .home-meta { display: none; } .home-links { gap: 1rem; } .home-links a { font-size: 0.72rem; } /* Nudge the masthead off the very top edge so the links are easy to tap (clear of Safari's UI). */ .home-header { padding: 0.75rem 0.75rem 0 0.6rem; } /* The about text spans the width under the masthead on phones (the photo is faded out while it's open, same as desktop). */ .home-about { top: 2.6rem; left: 0.6rem; right: 1rem; max-width: none; padding-right: 0; font-size: 0.8rem; } /* On phones the photo spans the full width (sides flush), centered vertically but lifted: less padding on top than bottom, so the image sits a touch higher and the larger bottom margin balances it. Raise the first value to drop it down, raise the second for more space beneath. */ .home-viewer { padding: 4rem 0 7rem; } /* Landscape photos can't fill a tall phone screen, so instead of floating dead-center they hang in the upper third — a clear band of white below the header, the photo, then the rest of the white pooling at the bottom. Raise/lower the 22vh to move the photo up/down. home.js adds .is-landscape per photo; portraits stay centered as before. */ .home-viewer.is-landscape { align-items: flex-start; padding-top: 22vh; } /* Full-width slide container on mobile */ .home-slide { width: 100%; } }