fix(css): featured verdicts vertical-rhythm — tighten badge→title, widen inter-card gap (v2.1.5)

Issue 1: badge→title gap tightened from 16px to 8px.
  Verdict badge is a label for the peptide name; card's uniform gap: --spacing-md
  made them look like separate paragraphs. Fix: margin-top offset on __title.

Issue 2: inter-card gap increased from --spacing-xl (32px) to --spacing-2xl (48px).
  Cards were visually merging into a single block. Card-to-card gap must clearly
  exceed within-card gaps to maintain the three-card hierarchy.

No functional or template changes — CSS-only.
This commit is contained in:
peptiderepo
2026-04-27 01:46:12 +00:00
parent fdaea84d72
commit dbc3c01bc4
2 changed files with 18 additions and 3 deletions

View File

@@ -1,5 +1,17 @@
# Peptide Starter Theme - Changelog
## [2.1.5] - 2026-04-27 — Featured verdicts vertical-rhythm fix
### Changed
- `.hero-featured-verdicts__grid`: grid `gap` increased from `--spacing-xl` (32px) to
`--spacing-2xl` (48px). Cards were too close together, making the three verdict cards
read as a single visual block rather than three distinct entries.
- `.hero-verdict-card__title`: `margin-top: calc(var(--spacing-sm) - var(--spacing-md))`
added (−8px offset). The verdict badge and title are a label/heading pair; the uniform
card `gap: --spacing-md` (16px) created too much separation between them. Effective
badge→title gap is now 8px; title→summary gap remains 16px.
## [2.1.4] - 2026-04-26 — B2: Coming soon badges on inactive tool cards
### Added

View File

@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
Description: Premium, accessible WordPress theme for scientific peptide reference database
Author: Peptide Repo
Author URI: https://peptiderepo.com
Version: 2.1.4
Version: 2.1.5
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptide-starter
@@ -1439,7 +1439,7 @@ input[type="radio"] {
.hero-featured-verdicts__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
gap: var(--spacing-2xl);
max-width: var(--container-xl);
margin: 0 auto var(--spacing-xl);
}
@@ -1469,7 +1469,10 @@ input[type="radio"] {
font-weight: 700;
font-size: 20px;
color: var(--text-primary, var(--color-text-primary));
margin: 0;
/* Pull title closer to badge — badge is conceptually a label for the title.
Card uses gap: --spacing-md (16px); this offsets by --spacing-sm (8px)
so effective badge→title gap = 16 - 8 = 8px. */
margin: calc(var(--spacing-sm) - var(--spacing-md)) 0 0;
line-height: 1.3;
}