xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: fade the exit plate in over 160 ms under reduced motion

Browse Source
This commit is contained in:
LucaP
2026-10-11 01:25:53 +03:00
parent 863a44e65b
commit 6f8449d39b
2 changed files with 11 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/JourneyHud.vue
View File

@@ -20,10 +20,13 @@ const next = computed(() =>
a route rule that fills along its lower edge. */ a route rule that fills along its lower edge. */
const route = computed(() => Math.min(1, Math.max(0, props.journey.routeProgress))); const route = computed(() => Math.min(1, Math.max(0, props.journey.routeProgress)));
const routePercent = computed(() => `${Math.round(route.value * 100)}%`); 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> </script>
<template> <template>
<aside <aside
:key="journey.activeSectionId"
class="journey-hud" class="journey-hud"
aria-hidden="true" aria-hidden="true"
:data-exit="exit" :data-exit="exit"

8
src/styles/gantry.css
View File

@@ -821,6 +821,14 @@ html[data-expressway='live'] .portfolio-section[data-layout='project-stage'] {
html .journey-hud, html .journey-hud,
html .site-navigation li::after { transition: none; } 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) { @media (forced-colors: active) {
html .site-navigation::before { background: Canvas; } html .site-navigation::before { background: Canvas; }
html .site-navigation::after { color: CanvasText; } html .site-navigation::after { color: CanvasText; }