/* ═══════════════════════════════════════════════════════════════════════════ styles.css — Funky Side of Town Single stylesheet for ALL pages. Edit here to change the look site-wide. Fonts: Playfair Display (body, Google Fonts) + brother-1816 (headings/nav, Adobe Typekit) — both loaded in each HTML file's . ═══════════════════════════════════════════════════════════════════════════ */ /* ─── Reset ──────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Base ───────────────────────────────────────────────────────────────────── */ html, body { height: 100%; background: #fefefe; color: #222; font-family: 'Playfair Display', serif; font-size: 15px; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'brother-1816', 'Playfair Display', serif; font-weight: 600; } /* The ONE variable that sets where content starts below the fixed header. Everything else (view paddings) is zero — tune this, nothing else. */ body { padding-top: var(--content-top, 40px); } .hidden { display: none !important; } /* ─── Layout variables ─────────────────────────────────────────────────────── Base values first, breakpoint overrides BELOW them — media queries add no specificity, so for equal selectors the later rule in the file wins. */ :root { --content-top: 40px; /* content start below the fixed header */ --scroll-top: 30px; /* where a deep-linked/clicked photo lands (+ group margin) */ } @media (max-width: 600px) { :root { --content-top: 150px; --scroll-top: 60px; } } /* ─── Logo ───────────────────────────────────────────────────────────────────── */ .logo { position: fixed; top: 20px; left: 15px; padding: 0; margin: 0; z-index: 200; font-size: 18px; font-weight: 600; text-transform: uppercase; } .logo a { display: block; cursor: pointer; text-decoration: none; color: #222; transition: all 0.2s; padding-bottom: 1px; border-bottom: solid 1px #000; } .logo a:active { padding-bottom: 3px; transform: scale(0.96); } /* ─── Navigation ─────────────────────────────────────────────────────────────── */ .navigation { font-family: 'brother-1816', 'Playfair Display', serif; font-size: 15px; font-weight: 600; text-transform: uppercase; position: fixed; top: 20px; right: 15px; z-index: 200; color: #444; } .navigation a { color: #444; text-decoration: none; border-bottom: solid 1px #aaa; padding-bottom: 1px; transition: all 0.3s; } .navigation a:hover { padding-bottom: 1px; border-bottom: solid 1px #000; } .navigation a:active { transform: scale(0.96); padding-bottom: 3px; } /* On the home page the logo isn't underlined (you're already there) — the underline appears once you've scrolled a viewport down, where the logo becomes a useful "back to the top/home" link. gallery.js toggles the class. */ .logo-home a { border-bottom-color: transparent; } .logo-home.scrolled a { border-bottom-color: #000; } /* Mobile: logo centered, navigation centered below it. The header starts roomy (logo at 40px, nav at 88px) and tightens smoothly over the first 300px of scroll to logo 12px / nav 44px — driven by --hdr-t (0 at page top → 1 after 300px, set by shared.js). Transforms only, so no layout thrash while scrolling. Per-view top paddings are zeroed on mobile so the body padding is the single thing separating nav from content. */ @media (max-width: 700px) { .logo { left: 0; right: 0; top: 40px; text-align: center; font-size: 19px; transform: translateY(calc(var(--hdr-t, 0) * -28px)); } .logo a { display: inline-block; } .navigation { left: 0; right: 0; top: 88px; text-align: center; font-size: 15px; transform: translateY(calc(var(--hdr-t, 0) * -44px)); } } /* ─── About page ─────────────────────────────────────────────────────────────── */ .about { padding: 56px 20px 60px; max-width: 540px; margin: 0 auto; } @media (max-width: 600px) { .about { padding-top: 22px; } } .about h1 { font-size: 30px; font-weight: bold; padding-bottom: 35px; } .about p { line-height: 20px; padding-bottom: 25px; } .about a { color: #222; border-bottom: solid 1px #444; text-decoration: none; transition: border-color 0.2s; } .about a:hover { border-color: #000; } .about img { width: 100%; height: auto; padding-bottom: 25px; } .about .end { text-align: center; color: #222; font-size: 24px; } /* ─── Grid view ─────────────────────────────────────────────────────────────── */ #grid-view { min-height: 100vh; margin-top: 30px; } /* The grid's spacing has exactly two knobs, set per breakpoint below: --gap — gap between photos, both axes --cols — number of columns Everything else (tile width, gutter sizer, margins) derives from them. IMPORTANT: this container must have NO padding — Masonry's percentPosition computes against the content box while the absolutely-positioned tiles resolve their %-values against the padding box, so any padding here skews horizontal gaps and page margins. Page inset is margin instead. */ .masonry-grid { --gap: 10px; --cols: 5; margin: 0 15px 15px; } /* Sizer elements used by Masonry.js for responsive column/gutter calculation */ .masonry-col-sizer, .photo-tile { width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); } .masonry-gutter-sizer { width: var(--gap); } .photo-tile { margin-bottom: var(--gap); cursor: pointer; overflow: hidden; background: #eee; } .photo-tile img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; } .photo-tile:hover img { transform: scale(1.02); } @media (max-width: 900px) { .masonry-grid { --cols: 3; } } @media (max-width: 600px) { .masonry-grid { --gap: 4px; margin: 0 5px 5px; } } /* ─── Flowing feed (home + album feed) ──────────────────────────────────────── */ .feed { --feed-gap: 10px; /* single knob: photo gaps within a group, both axes */ margin: 0 auto; padding: 0 20px 80px; /* flex column so the groups' equal top/bottom margins stack instead of collapsing into each other */ display: flex; flex-direction: column; } /* Each group is as large as possible while fully visible: width is capped by the container, or by what fits in the viewport height (minus header room and the gaps between rows) at the group's aspect ratio (--group-ar, set by renderFeed). */ .feed-group { margin: 36px auto; width: min(100%, calc((100vh - 110px - var(--row-gaps, 0px)) * var(--group-ar, 999))); width: min(100%, calc((100svh - 110px - var(--row-gaps, 0px)) * var(--group-ar, 999))); } .feed-row { display: flex; gap: var(--feed-gap); margin-bottom: var(--feed-gap); } .feed-row:last-child { margin-bottom: 0; } /* Cells get flex-grow proportional to aspect ratio (set inline by renderFeed), which aligns all photos in a row to the same height. */ .feed-cell { min-width: 0; } .feed-cell img { width: 100%; height: auto; display: block; background: #eee; } @media (max-width: 700px) { .feed { --feed-gap: 6px; padding: 0 8px 48px; } .feed-group { margin-top: 20px; margin-bottom: 20px; } /* Pairs stay side by side on mobile; rows of 3 stack vertically */ .feed-row:not(.feed-row--pair) { flex-direction: column; } .feed-row:not(.feed-row--pair) .feed-cell { flex: none !important; } } /* ─── Albums page ───────────────────────────────────────────────────────────── */ #albums-view { /* min-height: 100vh; */ margin-top: 60px; } .albums-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; padding: 0 24px 24px; } @media (max-width: 600px) { .albums-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 14px 14px; } } .album-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; } /* Stack of cover photos: all straight, overlapping each other messily. On hover they shift slightly and some pick up a subtle rotation. */ .album-stack { position: relative; width: 100%; aspect-ratio: 1; } .album-stack img { position: absolute; top: 50%; left: 50%; width: 78%; height: 78%; object-fit: cover; background: #eee; border: 3px solid #fff; box-shadow: 0 2px 14px rgba(0,0,0,0.18); transition: transform 0.4s ease; } /* Messy resting offsets — straight, no rotation */ .album-stack img:nth-child(1) { transform: translate(-55%, -48%); } .album-stack img:nth-child(2) { transform: translate(-45%, -55%); } .album-stack img:nth-child(3) { transform: translate(-52%, -43%); } .album-stack img:nth-child(4) { transform: translate(-43%, -47%); } .album-stack img:nth-child(5) { transform: translate(-50%, -52%); } .album-stack-placeholder { position: absolute; inset: 0; background: #e8e8e8; border-radius: 4px; border: 1px dashed rgba(0,0,0,0.15); } /* Subtle scatter on hover: small shifts, some rotate a touch */ .album-card:hover .album-stack img:nth-child(1) { transform: translate(-58%, -50%) rotate(-2deg); } .album-card:hover .album-stack img:nth-child(2) { transform: translate(-42%, -58%) rotate(1.5deg); } .album-card:hover .album-stack img:nth-child(3) { transform: translate(-53%, -40%); } .album-card:hover .album-stack img:nth-child(4) { transform: translate(-40%, -46%) rotate(2.5deg); } .album-card:hover .album-stack img:nth-child(5) { transform: translate(-50%, -55%) rotate(-1deg); } .album-info h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; } .album-info p { font-size: 0.85rem; opacity: 0.55; margin-top: 4px; line-height: 1.5; } .album-count { font-size: 0.8rem; opacity: 0.4; display: block; margin-top: 4px; } /* ─── Album grid view ────────────────────────────────────────────────────────── */ #album-grid-view { min-height: 100vh; } .album-grid-header { display: flex; align-items: center; gap: 16px; padding: 0 15px 14px; margin-top: 20px; } .btn-back { background: none; border: none; color: #333; padding: 4px; cursor: pointer; display: flex; align-items: center; opacity: 0.55; transition: opacity 0.2s; } .btn-back svg { width: 22px; height: 22px; } .btn-back:hover { opacity: 1; } .album-grid-header h1 { font-size: 1.1rem; font-weight: 500; } .album-empty { padding: 48px 24px; opacity: 0.4; font-size: 0.9rem; }