style: fade the exit plate in over 160 ms under reduced motion
This commit is contained in:
@@ -20,10 +20,13 @@ const next = computed(() =>
|
||||
a route rule that fills along its lower edge. */
|
||||
const route = computed(() => Math.min(1, Math.max(0, props.journey.routeProgress)));
|
||||
const routePercent = computed(() => `${Math.round(route.value * 100)}%`);
|
||||
/* The plate is keyed by chapter, so a new chapter is a new element: under
|
||||
reduced motion it fades in over 160 ms (gantry.css) instead of swapping. */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside
|
||||
:key="journey.activeSectionId"
|
||||
class="journey-hud"
|
||||
aria-hidden="true"
|
||||
:data-exit="exit"
|
||||
|
||||
@@ -821,6 +821,14 @@ html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
|
||||
html .journey-hud,
|
||||
html .site-navigation li::after { transition: none; }
|
||||
}
|
||||
/* No sign flies in under reduced motion, so the plate itself carries the
|
||||
change of chapter: a 160 ms opacity fade, no movement. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html .journey-hud { animation: plate-swap 160ms ease-out both; }
|
||||
}
|
||||
@keyframes plate-swap {
|
||||
from { opacity: 0; }
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
html .site-navigation::before { background: Canvas; }
|
||||
html .site-navigation::after { color: CanvasText; }
|
||||
|
||||
Reference in New Issue
Block a user