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

Improve split comparison: add before/after badges, extend slider range

Browse Source 
Adds floating corner badges to clarify which side is before/after,
removes the "With Skills" divider label, and extends the slider range
to account for the skewed divider so it can fully reveal each side.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-04 09:39:05 -08:00
co-authored by Claude Opus 4.6
parent fd99c1f391
commit 98f5d839fd
7 changed files with 78 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/problem-section.css
+27
View File
@@ -79,6 +79,33 @@
transition: transform var(--duration-fast) var(--ease-spring);
}
/* Floating corner badges */
.split-badge {
position: absolute;
top: 10px;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
z-index: 5;
pointer-events: none;
}
.split-badge--before {
left: 10px;
color: var(--color-ash);
background: var(--color-paper);
border: 1px solid var(--color-mist);
}
.split-badge--after {
right: 10px;
color: var(--color-paper);
background: var(--color-accent);
}
/* Mobile adjustments */
@media (hover: none) {
.split-container::after {