/* ============================================================ /stones — the PAGE-SPECIFIC half of the archive. ⚠️ REQUIRES public/css/archive.css, LOADED FIRST. That file carries every `.as-*` rule the three archives share (filter bar, view toggle, list frame, `.is-grid` reflow, pager, empty state). What is left here is only the part that is named after stone data: the column tracks, the six `.as-col-*` classes and the type/status badge palette. Both files are pulled in by resources/views/stones/index.blade.php via @include('partials.archive.head') followed by a to this file — order is load-bearing, because most rules below sit at the SAME specificity as the shared ones they refine. Class names are still the live theme's on purpose (penguinstones/generatepress-child/style.css ~1027-1480). ============================================================ */ /* The two grid tracks the shared chrome reads. `--as-grid` is consumed by BOTH `.as-list-head` and `.as-row`, so the header and the rows cannot drift out of alignment (theme style.css:1199). Six filter cells: number, type, status, country, contributor, actions. The live theme has five (no status filter — see the blade's comment); the extra track is the only structural change to that row. */ .as-wrap { /* Seven tracks now: a 64px THUMBNAIL column leads. The site is about photographs of painted stones and the list showed none of them; the gallery view still exists for the photo-first browse, but the default list no longer reads as a spreadsheet. The list-head carries an empty leading cell (as-col-thumb) so header and rows keep the same tracks. */ --as-grid: 64px 80px 1fr 140px 150px 120px 120px; --as-filter-cols: 1.2fr 0.9fr 0.9fr 1fr 1.3fr auto; } /* ── Toolbar: view toggle on the left, Near-me on the right ── */ .as-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .as-toolbar .as-viewbar { margin: 0; } .as-nearme { display: inline-flex; align-items: center; gap: 10px; } .as-nearme-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ps-border); background:var(--ps-surface); color: var(--ps-heading); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s, box-shadow .15s, transform .15s; } .as-nearme-btn:hover { border-color: var(--ps-navy); box-shadow: 0 6px 16px rgba(15,23,42,.10); transform: translateY(-1px); } .as-nearme-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; } .as-nearme-status { font-size: 12px; color: #B4271F; } .as-nearme-status:empty { display: none; } .as-nearme-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--ps-navy); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; } .as-nearme-clear { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; text-decoration: none; font-size: 16px; line-height: 1; } .as-nearme-clear:hover { background: var(--ps-yellow); color: var(--ps-navy); } .as-loc-dist { display: block; font-size: 12px; font-weight: 700; color: var(--ps-teal); margin-top: 2px; } /* ── The list-view thumbnail — the ONE archive that shows it outside gallery. The shared rule hides .as-thumb in list view (archive.css); this page-scoped rule reveals it as a 56px rounded square. Gallery view (.is-grid) keeps the shared 4/3 card image because those rules carry the .is-grid class and win. */ .as-wrap--stones .as-list:not(.is-grid):not(.is-huddle) .as-thumb { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--ps-border); align-self: center; } .as-wrap--stones .as-list:not(.is-grid):not(.is-huddle) .as-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .as-wrap--stones .as-list:not(.is-grid):not(.is-huddle) .as-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 24px; } .as-col-thumb { min-width: 0; } /* ── Columns ──────────────────────────────────────────────────────────────── Ellipsis + min-width stay global (header AND rows); size/weight/colour are scoped to .as-row so they do not leak into the header, which keeps its own uniform 11px uppercase treatment. */ .as-col-num, .as-col-country, .as-col-date { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .as-row .as-col-num { font-weight: 800; color: var(--ps-heading); font-size: 14px; line-height: 1.35; } .as-col-loc { min-width: 0; } .as-row .as-col-country, .as-row .as-col-date { font-size: 14px; color: var(--ps-text-mid); line-height: 1.35; } .as-col-type, .as-col-status { font-size: 12px; } /* ── Badge colours ────────────────────────────────────────────────────────── Shape comes from `.as-badge` in archive.css. Colours are lifted from the theme's $type_config / $status_config; they are modifier classes here rather than the theme's inline style attributes — same palette, no per-row style strings. */ .as-badge--standard { background: #DBEAFE; color: #1E40AF; } .as-badge--golden { background: #FEF3C7; color: #92400E; } .as-badge--special { background: #EDE9FE; color: #4C1D95; } .as-badge--active { background: #D1FAE5; color: #065F46; } .as-badge--found { background: #FEF3C7; color: #92400E; } .as-badge--rehidden { background: #DBEAFE; color: #1E40AF; } .as-badge--lost { background: #FEE2E2; color: #991B1B; } /* ── Gallery view: which stone columns a card shows ───────────────────────── Same rows, reflowed — see archive.css. Only the per-column padding and the two columns a card drops live here. */ .as-list.is-grid .as-col-num { padding: 12px 14px 0; font-size: 13px; font-weight: 800; color: var(--ps-yellow); } .as-list.is-grid .as-col-loc { padding: 2px 14px 6px; } .as-list.is-grid .as-col-country { padding: 0 14px 6px; font-size: 12px; color: var(--ps-text-light); white-space: normal; overflow: visible; text-overflow: clip; } .as-list.is-grid .as-col-type { padding: 0 14px 14px; } .as-list.is-grid .as-col-date, .as-list.is-grid .as-col-status { display: none; } /* table-only columns */ /* ── Breakpoints ──────────────────────────────────────────────────────────── 760 / 600 / 420 are the theme's own archive breakpoints. archive.css already handles the shared half of each (card chrome, hidden header, mobile sortbar, two-up gallery, 16px inputs); what remains is this page's cell layout. ------------------------------------------------------------------------- */ @media (max-width: 760px) { /* Beats the desktop `grid-template-columns: var(--as-grid)` in archive.css purely on load order — equal specificity, this file second. */ /* ⚠️ The number sits with the badges, and the reason is not the number — it is the TYPE BADGE. The previous `auto 1fr` put "#1246" and "🐧 Standard" in the same track, so the badge (91px) sized that column for the three rows above it, while the number itself needs ~54px. The location was left 206px of a 375px screen. All three short items — number, type, status — now share the bottom row, so nothing gets a dedicated track and the text rows span the full width. Measured at 375px across the first 100 rows, which is why this shape and not one of the obvious alternatives: layout loc width rows wrapping list height original (num left col) 206px 83/100 17665px num right of location 237px 67/100 17042px num on its own row 311px 37/100 18942px THIS (num with badges) 311px 37/100 16252px Half as many wrapped locations as the original AND an 8% shorter list — the only arrangement that improves both. The cost is that the card now leads with the place rather than the number; the number stays bold and navy, and "find me stone N" is what the Stone # filter is for. */ .as-row { grid-template-columns: 56px auto auto 1fr; grid-template-areas: "thumb loc loc loc" "thumb country country country" "thumb date date date" "num num type status"; column-gap: 12px; } .as-wrap--stones .as-list:not(.is-grid):not(.is-huddle) .as-thumb { grid-area: thumb; align-self: start; } .as-col-num { grid-area: num; font-size: 15px; align-self: center; } .as-col-loc { grid-area: loc; } .as-col-country { grid-area: country; font-size: 13px; color: var(--ps-text-light); white-space: normal; overflow: visible; text-overflow: clip; } .as-col-type { grid-area: type; } .as-col-status { grid-area: status; justify-self: end; } .as-col-date { grid-area: date; font-size: 14px; color: var(--ps-text-mid); white-space: normal; overflow: visible; text-overflow: clip; } } /* ============================================================ HUDDLE VIEW (.as-list.is-huddle) — a wall of overlapping, slightly tilted photos, the way a colony stands. Borrowed from homeguin's trip huddle and fitting here for the obvious reason. ⚠️ SAME SINGLE RENDER as list and gallery: this shows each row's existing .as-thumb and hides the text columns. No second markup tree — see stones/_row.blade.php for why that rule is load-bearing. The tilt is by :nth-child, so it is stable per position rather than random on every paint (a wall that reshuffles when you sort is disorienting). Hover/focus straightens and lifts the tile — that is also what makes the stone number readable, so the label is not information you can only get by guessing. ============================================================ */ .as-wrap--stones .as-list.is-huddle { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; padding: 10px 0 6px; border: 0; background: none; } .as-wrap--stones .as-list.is-huddle .as-row { display: block; position: relative; width: clamp(92px, 11vw, 132px); aspect-ratio: 1; margin: -6px; padding: 0; border: 3px solid var(--ps-surface); border-radius: 12px; overflow: hidden; background: var(--ps-surface-2); box-shadow: 0 4px 14px rgba(15, 23, 42, .18); transition: transform .15s ease, box-shadow .15s ease; } .as-wrap--stones .as-list.is-huddle .as-row:nth-child(3n) { transform: rotate(2.5deg); } .as-wrap--stones .as-list.is-huddle .as-row:nth-child(3n+1) { transform: rotate(-2deg); } .as-wrap--stones .as-list.is-huddle .as-row:nth-child(7n) { transform: rotate(4deg) translateY(4px); } .as-wrap--stones .as-list.is-huddle .as-row:hover, .as-wrap--stones .as-list.is-huddle .as-row:focus-within { transform: scale(1.14) rotate(0deg); z-index: 5; box-shadow: 0 12px 28px rgba(15, 23, 42, .34); } /* The stretched link stays the whole target — one tile, one destination. */ .as-wrap--stones .as-list.is-huddle .as-row-link { position: absolute; inset: 0; z-index: 2; } .as-wrap--stones .as-list.is-huddle .as-thumb { display: block; width: 100%; height: 100%; border-radius: 0; margin: 0; } .as-wrap--stones .as-list.is-huddle .as-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .as-wrap--stones .as-list.is-huddle .as-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 26px; } /* Everything textual is hidden except the number, which becomes the strip. */ .as-wrap--stones .as-list.is-huddle .as-col-loc, .as-wrap--stones .as-list.is-huddle .as-col-country, .as-wrap--stones .as-list.is-huddle .as-col-date, .as-wrap--stones .as-list.is-huddle .as-col-type, .as-wrap--stones .as-list.is-huddle .as-col-status, .as-wrap--stones .as-list.is-huddle .as-col-thumb { display: none; } /* ⚠️ THE NUMBER SITS AT THE TOP OF THE TILE, AND THAT IS THE FIX, NOT A STYLE PREFERENCE. Bottom-aligned it was unreadable: tiles overlap by `margin: -6px`, so every row covers ~13px of the row above — exactly where the number was. Measured at 375px: row 1's tiles ended at y563 while row 2 began at y550. z-index cannot rescue it. Each tile carries `transform: rotate(...)`, which creates its OWN STACKING CONTEXT, so the label's z-index is local to its tile and later tiles in DOM order paint over earlier ones regardless. Top-aligning sidesteps stacking entirely: rows overlap DOWNWARD, so a tile's top edge is never covered by the tile that follows it. The gradient is flipped to match. Do not move this back to the bottom. */ .as-wrap--stones .as-list.is-huddle .as-col-num { position: absolute; left: 0; right: 0; top: 0; z-index: 1; margin: 0; padding: 4px 6px 3px; font-size: 11px; font-weight: 800; color: #fff; text-align: center; background: linear-gradient(rgba(0, 0, 0, .68), transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 600px) { .as-list.is-huddle .as-row { width: clamp(78px, 26vw, 110px); } /* FULL-BLEED ON PHONES. The huddle is a wall of photos, and a wall with a margin down each side is a rug. Two things were insetting it: the 12px gutter on .as-content, and the site-wide min(1600px, 92vw) content token on .as-content-inner — together 15px a side at 375px, which is one more tile per row lost on the narrowest screens. ⚠️ `calc(50% - 50vw)` RATHER THAN A -15px MARGIN. The inset is the sum of two ancestors' rules, one of which is a viewport percentage, so a fixed negative margin would be correct at exactly one width and wrong either side of it. This pins the list to the viewport regardless of what the ancestors do, and keeps working if either changes. ⚠️ SCOPED TO ≤600px, and it must stay that way: 100vw INCLUDES the scrollbar on desktop, so the same rule there would push the page ~15px wider than its own viewport and give every archive a horizontal scroll — the exact class of bug this project has a documented history of. The 6px side padding is not a gutter creeping back: tiles are rotated up to 4deg, and a rotated corner sitting exactly on the viewport edge gets clipped. */ .as-wrap--stones .as-list.is-huddle { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: 6px; padding-right: 6px; border-radius: 0; } }