fix(nav): fil d'échelle du groupe M replié sur sa pastille sous 400 px
Mesuré : 387 px dans 360 (Codev hors écran, sans indice de défilement). Accroche gardée pour les lecteurs d'écran. Passe /autofeedback de B10. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EBu7CSLy7PJgL4HJaV5oHP
This commit is contained in:
co-authored by
Claude Opus 5.5
parent
8d05873082
commit
5ce431d055
@@ -7,7 +7,7 @@
|
|||||||
de / perd ces 28 px à vue, jamais en dessous de la ligne de flottaison.
|
de / perd ces 28 px à vue, jamais en dessous de la ligne de flottaison.
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<nav v-if="courant" class="fil-echelle" aria-label="Échelle courante">
|
<nav v-if="courant" class="fil-echelle" :class="{ 'fil-echelle--long': voisins.length > 1 }" aria-label="Échelle courante">
|
||||||
<span class="fil-echelle__pastille">{{ courant.echelle }}</span>
|
<span class="fil-echelle__pastille">{{ courant.echelle }}</span>
|
||||||
<span class="fil-echelle__titre">{{ ECHELLES[courant.echelle].titre }}</span>
|
<span class="fil-echelle__titre">{{ ECHELLES[courant.echelle].titre }}</span>
|
||||||
<span class="fil-echelle__sep" aria-hidden="true">·</span>
|
<span class="fil-echelle__sep" aria-hidden="true">·</span>
|
||||||
@@ -76,6 +76,21 @@ const voisins = computed(() =>
|
|||||||
outline-offset: 1px;
|
outline-offset: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Groupe à trois onglets (M) sous 400 px : l'accroche se replie sur sa pastille
|
||||||
|
(lue quand même par les lecteurs d'écran), sinon « Codev » sort de l'écran. */
|
||||||
|
@media (max-width: 399px) {
|
||||||
|
.fil-echelle--long .fil-echelle__titre {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0);
|
||||||
|
}
|
||||||
|
.fil-echelle--long .fil-echelle__titre + .fil-echelle__sep {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.fil-echelle {
|
.fil-echelle {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user