41 lines
1.5 KiB
CSS
41 lines
1.5 KiB
CSS
 
|
/* ============================================================================
|
||
|
|
FOOTER - the sitemap link's hover
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
The design draft moves a hovered footer link along ONE axis and eases it:
|
||
|
|
|
||
|
|
transition: color .2s ease, transform .25s ease;
|
||
|
|
:hover { color: #4DAA93; transform: translateX(4px); }
|
||
|
|
|
||
|
|
Two reasons this is CSS rather than Tailwind utilities:
|
||
|
|
|
||
|
|
1. `translate-x-*` compiles to the two-value form
|
||
|
|
`translate: var(--tw-translate-x) var(--tw-translate-y)`, so whatever Y
|
||
|
|
translate happens to be in scope rides along and the link drifts
|
||
|
|
diagonally. `translate: 4px 0` pins the second axis at zero.
|
||
|
|
2. The movement has to be in the transition list. A `transition-[color]`
|
||
|
|
utility animates the colour and snaps the offset.
|
||
|
|
|
||
|
|
The direction is physical because `translate` has no logical form, so the
|
||
|
|
RTL rule mirrors it - the link always moves toward the reading edge.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
@layer theme, base, components, utilities;
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.sh-footer-link {
|
||
|
|
transition:
|
||
|
|
color var(--motion-duration-fast) var(--motion-ease-standard),
|
||
|
|
translate var(--motion-duration-base) var(--motion-ease-standard);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (hover: hover) {
|
||
|
|
.sh-footer-link:hover {
|
||
|
|
translate: 4px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .sh-footer-link:hover {
|
||
|
|
translate: -4px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|