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:
12
CHANGELOG.md
12
CHANGELOG.md
@@ -1,5 +1,17 @@
|
|||||||
# Peptide Starter Theme - Changelog
|
# 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
|
## [2.1.4] - 2026-04-26 — B2: Coming soon badges on inactive tool cards
|
||||||
|
|
||||||
### Added
|
### Added
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ Theme URI: https://github.com/peptiderepo/peptide-starter
|
|||||||
Description: Premium, accessible WordPress theme for scientific peptide reference database
|
Description: Premium, accessible WordPress theme for scientific peptide reference database
|
||||||
Author: Peptide Repo
|
Author: Peptide Repo
|
||||||
Author URI: https://peptiderepo.com
|
Author URI: https://peptiderepo.com
|
||||||
Version: 2.1.4
|
Version: 2.1.5
|
||||||
License: GPL v2 or later
|
License: GPL v2 or later
|
||||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||||
Text Domain: peptide-starter
|
Text Domain: peptide-starter
|
||||||
@@ -1439,7 +1439,7 @@ input[type="radio"] {
|
|||||||
.hero-featured-verdicts__grid {
|
.hero-featured-verdicts__grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: var(--spacing-xl);
|
gap: var(--spacing-2xl);
|
||||||
max-width: var(--container-xl);
|
max-width: var(--container-xl);
|
||||||
margin: 0 auto var(--spacing-xl);
|
margin: 0 auto var(--spacing-xl);
|
||||||
}
|
}
|
||||||
@@ -1469,7 +1469,10 @@ input[type="radio"] {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: var(--text-primary, var(--color-text-primary));
|
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;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user