skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move demo eyebrow inside .split-comparison for card-edge alignment

Browse Source 
The eyebrow ('Drag or hover to compare') was a sibling of
.split-comparison, sitting at the left edge of the outer .skill-demo
section. Because .split-comparison has 32px padding, the visible card
inside sat 32px to the right of the eyebrow, creating a visible
indentation mismatch. Move the eyebrow inside .split-comparison so it
inherits the same 32px offset and aligns with the card's left edge
(same as how .split-labels and .skill-demo-caption already align).

Note: the HTML order inside .split-comparison is now eyebrow -> container
-> labels -> caption, which matches the homepage's before/after demo
flow (card -> BEFORE/AFTER -> descriptive caption).
This commit is contained in:
Paul Bakaus
2026-04-08 11:38:32 -07:00
parent 0728eaadea
commit db4d533228
2 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/build-sub-pages.js
+1 -1
View File
@@ -39,8 +39,8 @@ function renderSkillDemo(skill) {
const { before, after, caption } = skill.demo;
return `
<section class="skill-demo" aria-label="Before and after demo">
<p class="skill-demo-eyebrow">Drag or hover to compare</p>
<div class="split-comparison" data-demo="skill-${skill.id}">
<p class="skill-demo-eyebrow">Drag or hover to compare</p>
<div class="split-container">
<div class="split-before">
<div class="split-content">${before}</div>