giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

landing: lift screenshots off the page; align feature thumbnails

Browse source 
Two fixes after a visual review:

1. Drop-shadow on every `.shot` so screenshots read as raised elements,
   not part of the page chrome. Soft slate shadow in light mode; deeper
   pure-black shadow + accent-tinted glow on hover in dark mode (the slate
   shadow disappears against the near-black background). The hover state
   also nudges the card up 1px so the lift is felt, not just seen.

2. Vertical alignment of the news / macro / hourly thumbnails inside the
   three feature cards. The cards are already equal-height (grid row,
   default stretch); now `.feature-card__body { flex-grow: 1 }` plus
   `display:flex; flex-direction:column` on the card pushes the body
   text to fill the column, which lands every thumbnail at the same y
   regardless of how much copy sits above it. Fixed 18px gap between
   body text and thumbnail.
This commit is contained in:
Giorgio Gilestro 2026-05-26 00:29:51 +02:00
parent 4ded3632e9
commit 77b867c924
1 changed files with 46 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

55
app/static/css/cassandra.css
View file

@ -1570,6 +1570,11 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
border-radius: 4px;
padding: 22px 22px 24px;
background: var(--surface);
/* Flex column so the screenshot thumbnail can dock to the bottom via
margin-top:auto — that's what lines the three thumbnails up across
cards regardless of body-text length. */
display: flex;
flex-direction: column;
}
.feature-card__tag {
font-family: var(--font-mono);
@ -1590,6 +1595,10 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
line-height: 1.6;
color: var(--muted);
margin: 0;
/* Grow to fill the flex column so the thumbnail below docks to the
bottom of the card. With grid-stretched equal-height cards, this is
what aligns the thumbnails across the three cards. */
flex-grow: 1;
}
/* --- Section primitives reused across pricing/about/legal ---------- */
@ -1731,11 +1740,12 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
strip, and a <dialog>-based lightbox. See app/templates/landing.html. */
/* All clickable screenshots are <button>s — reset the default chrome so they
read as image cards, not form controls. */
read as image cards, not form controls. The shadow is the main "this is a
screenshot, not part of the page" signal; the border alone blends in. */
.shot {
appearance: none;
-webkit-appearance: none;
background: transparent;
background: var(--surface);
border: 1px solid var(--border);
padding: 0;
margin: 0;
@ -1744,16 +1754,39 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
cursor: zoom-in;
border-radius: 4px;
overflow: hidden;
transition: border-color 120ms ease, transform 120ms ease;
transition: border-color 120ms ease, transform 120ms ease,
box-shadow 160ms ease;
position: relative;
box-shadow: 0 6px 22px rgba(15, 23, 42, 0.18),
0 2px 6px rgba(15, 23, 42, 0.10);
}
.shot:hover,
.shot:focus-visible {
.shot:hover {
border-color: var(--accent);
outline: none;
transform: translateY(-1px);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22),
0 4px 10px rgba(15, 23, 42, 0.14);
}
.shot:focus-visible {
box-shadow: 0 0 0 2px var(--accent);
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent),
0 6px 22px rgba(15, 23, 42, 0.18);
}
/* Dark mode: the soft slate shadow disappears against the near-black bg.
Use a deeper, slightly accent-tinted glow so the cards still lift. */
[data-theme="dark"] .shot {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .shot:hover {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65),
0 0 0 1px rgba(0, 217, 255, 0.20);
}
@media (prefers-color-scheme: dark) {
.shot {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.35);
}
}
.shot img {
display: block;
@ -1783,9 +1816,13 @@ a.btn-secondary:hover { color: var(--accent); border-color: var(--accent); }
pointer-events: none;
}
/* Thumbnail tucked at the bottom of each feature card. */
/* Thumbnail at the bottom of each feature card. Vertical alignment across
the three cards is achieved by `.feature-card__body { flex-grow: 1 }`
above, which lets the body fill all available space inside the
equal-height grid cell — the thumbnail then sits at the same y across
cards. The fixed margin-top keeps a predictable gap above. */
.feature-card__shot {
margin-top: 16px;
margin-top: 18px;
}
.feature-card__shot img {
max-height: 200px;