External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Compact study card · hide second example on mobile (Section 03 Row II)

Browse Source 
Two changes that lighten the vertical footprint of the Study row:

· On mobile (≤ 48 rem), only the first study example renders — the
  second is hidden via .study-card + .study-card { display: none }
  inside .skill-row__body--study. Two stacked DNA cards (image +
  10-row key/value table each) was eating most of a phone screen
  for one verb; one example carries the same point.

· Across all screens: image aspect-ratio 16/10 → 16/7 (shorter
  media slot), DNA panel padding md/lg/lg → sm/md/md (one step
  lighter), per-row padding-block sm → xs inside .study-card__dna
  (tighter row rhythm). Skill-row list panels keep their existing
  padding — only the study card gets the tightened density.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
2026-05-05 16:40:01 +01:00
co-authored by Claude Opus 4.7
parent 70dfe21464
commit 7257f10463
2 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/css/components.css
+9 -3
View File
@@ -3608,7 +3608,7 @@ html[data-theme="halo"] aside {
.study-card__media {
position: relative;
aspect-ratio: 16 / 10;
aspect-ratio: 16 / 7;
background: var(--color-paper-2);
border-block-end: var(--rule-card, 1px) solid var(--color-rule);
overflow: hidden;
@@ -3651,15 +3651,21 @@ html[data-theme="halo"] aside {
[data-theme="riso"] .study-card__badge { text-transform: lowercase; }
/* DNA panel — structured 10-field key/value table. */
/* DNA panel — structured 10-field key/value table. Tightened vertical
rhythm so the study card doesn't dominate the page: panel padding
one step lighter, per-row padding-block reduced from sm → xs. */
.study-card__dna {
list-style: none;
margin: 0;
padding: var(--space-md) var(--space-lg) var(--space-lg);
padding: var(--space-sm) var(--space-md) var(--space-md);
display: grid;
gap: 0;
}
.study-card__dna .dna__row {
padding-block: var(--space-xs);
}
.dna__row {
display: grid;
grid-template-columns: 8.5rem 1fr;
site/css/sections.css
+7
View File
@@ -656,6 +656,13 @@
grid-template-columns: 1fr;
}
/* Mobile — only show one study example. Two stacked DNA cards (image
+ 10-field key/value table each) eat too much vertical scroll on
phones; one example is enough to make the point. */
@media (max-width: 48rem) {
.skill-row__body--study .study-card + .study-card { display: none; }
}
.skill-row__demo {
position: relative;
margin: 0;