Polish glossary home responsive aside and map density
This commit is contained in:
@@ -192,120 +192,47 @@ const {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
.glossary-home-aside{
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block{
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block--intro{
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__title{
|
||||
font-size: 19px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.glossary-home-aside__meta{
|
||||
margin-top: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pills{
|
||||
gap: 6px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pill{
|
||||
padding: 4px 9px;
|
||||
font-size: 12px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.glossary-home-aside__summary{
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__heading{
|
||||
font-size: 17px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glossary-home-aside__panel{
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list li{
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list a{
|
||||
font-size: 14px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
.glossary-home-aside__disclosure{
|
||||
background: rgba(127,127,127,0.045);
|
||||
}
|
||||
|
||||
.glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
|
||||
border-bottom: 1px solid rgba(127,127,127,0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
@media (max-width: 980px){
|
||||
.glossary-home-aside{
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block{
|
||||
border-radius: 12px;
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block--intro{
|
||||
padding: 10px 11px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__title{
|
||||
font-size: 16px;
|
||||
line-height: 1.14;
|
||||
font-size: 15px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.glossary-home-aside__meta{
|
||||
font-size: 11px;
|
||||
line-height: 1.26;
|
||||
margin-top: 5px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pills{
|
||||
gap: 5px;
|
||||
margin-top: 8px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pill{
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.glossary-home-aside__summary{
|
||||
padding: 10px 11px;
|
||||
padding: 9px 11px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__heading{
|
||||
font-size: 15px;
|
||||
line-height: 1.16;
|
||||
font-size: 14px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.glossary-home-aside__panel{
|
||||
@@ -320,9 +247,80 @@ const {
|
||||
font-size: 13px;
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 861px){
|
||||
@media (max-width: 980px){
|
||||
.glossary-home-aside__disclosure{
|
||||
background: rgba(127,127,127,0.045);
|
||||
}
|
||||
|
||||
.glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
|
||||
border-bottom: 1px solid rgba(127,127,127,0.12);
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.glossary-home-aside{
|
||||
gap: 7px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block{
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__block--intro{
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__title{
|
||||
font-size: 14px;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.glossary-home-aside__meta{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pills{
|
||||
gap: 4px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__pill{
|
||||
padding: 2px 7px;
|
||||
font-size: 10.5px;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.glossary-home-aside__summary{
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__heading{
|
||||
font-size: 13px;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.glossary-home-aside__panel{
|
||||
padding: 0 10px 9px;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list li{
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.glossary-home-aside__list a{
|
||||
font-size: 12px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 981px){
|
||||
.glossary-home-aside__summary{
|
||||
cursor: default;
|
||||
}
|
||||
@@ -346,28 +344,32 @@ const {
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
let wasCompact = null;
|
||||
|
||||
const syncMobileDisclosure = () => {
|
||||
const mobile = window.matchMedia("(max-width: 860px)").matches;
|
||||
const stackedLayout = window.matchMedia("(max-width: 980px)").matches;
|
||||
const smallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
).matches;
|
||||
|
||||
const compact = mobile || smallLandscape;
|
||||
const compact = stackedLayout || smallLandscape;
|
||||
const enteringCompact = compact && wasCompact !== true;
|
||||
|
||||
document
|
||||
.querySelectorAll(".glossary-home-aside__disclosure")
|
||||
.forEach((el, index) => {
|
||||
.forEach((el) => {
|
||||
if (!(el instanceof HTMLDetailsElement)) return;
|
||||
|
||||
if (compact) {
|
||||
if (!el.dataset.mobileInit) {
|
||||
el.open = index === 0;
|
||||
el.dataset.mobileInit = "true";
|
||||
if (enteringCompact) {
|
||||
el.open = false;
|
||||
}
|
||||
} else {
|
||||
el.open = true;
|
||||
}
|
||||
});
|
||||
|
||||
wasCompact = compact;
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
|
||||
@@ -458,85 +458,86 @@ const {
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Glossaire home — follow hero sans troncature
|
||||
/* =========================================================
|
||||
Glossaire home — états du hero sticky
|
||||
========================================================= */
|
||||
|
||||
/*
|
||||
Le follow du hero doit rester affiché, mais ne doit jamais
|
||||
être traité comme une ligne compacte à ellipsis.
|
||||
On neutralise donc localement les règles de compression :
|
||||
nowrap, overflow hidden, text-overflow, line-clamp.
|
||||
Principe :
|
||||
- le follow peut respirer sans ellipsis brutal ;
|
||||
- l’intro reste strictement clampée en mode collapsed ;
|
||||
- l’intro ne redevient complète qu’en mode expanded ;
|
||||
- mobile/tablette <= 860px reste neutralisé plus haut.
|
||||
*/
|
||||
|
||||
.glossary-hero{
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.glossary-hero-follow{
|
||||
height: auto;
|
||||
max-height: none;
|
||||
max-width: min(100%, 34ch);
|
||||
overflow: visible;
|
||||
white-space: normal !important;
|
||||
text-overflow: clip !important;
|
||||
}
|
||||
|
||||
.glossary-hero-follow,
|
||||
.glossary-hero-follow *{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-hero-follow h1,
|
||||
.glossary-hero-follow p,
|
||||
.glossary-hero-follow .glossary-hero__collapsible,
|
||||
.glossary-hero-follow .glossary-hero__toggle{
|
||||
white-space: normal !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset !important;
|
||||
line-clamp: unset !important;
|
||||
-webkit-box-orient: unset !important;
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
:global(body.glossary-home-follow-on) .glossary-hero{
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:global(body.glossary-home-follow-on) .glossary-hero h1{
|
||||
white-space: normal !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset !important;
|
||||
line-clamp: unset !important;
|
||||
-webkit-box-orient: unset !important;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
:global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
|
||||
white-space: normal !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset !important;
|
||||
line-clamp: unset !important;
|
||||
-webkit-box-orient: unset !important;
|
||||
/*
|
||||
État collapsed :
|
||||
l’intro DOIT rester compactée. Cette règle doit gagner contre
|
||||
les anciennes règles anti-troncature du follow.
|
||||
*/
|
||||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
max-height: calc(2 * 1.34em);
|
||||
overflow: hidden;
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero__toggle{
|
||||
display: inline-flex;
|
||||
margin-top: 2px;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
/*
|
||||
État expanded :
|
||||
l’utilisateur a explicitement demandé à lire la suite,
|
||||
donc l’intro redevient complète.
|
||||
*/
|
||||
:global(body.glossary-home-hero-expanded) .glossary-hero p#glossary-hero-intro{
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
white-space: normal;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
:global(body.glossary-home-hero-expanded) .glossary-hero__toggle{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 861px) and (max-width: 1240px){
|
||||
.glossary-hero-follow{
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:global(body.glossary-home-follow-on) .glossary-hero h1,
|
||||
:global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
|
||||
-webkit-line-clamp: unset !important;
|
||||
line-clamp: unset !important;
|
||||
overflow: visible !important;
|
||||
max-width: min(100%, 36ch);
|
||||
font-size: clamp(1.55rem, 3.1vw, 2.05rem);
|
||||
line-height: 1.08;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -569,7 +569,7 @@ const approfondirPortalItems = [
|
||||
}
|
||||
|
||||
.glossary-map-block{
|
||||
padding: 18px 18px 20px;
|
||||
padding: 16px 18px 18px;
|
||||
border: 1px solid var(--glossary-border);
|
||||
border-radius: 24px;
|
||||
background: rgba(127,127,127,0.04);
|
||||
@@ -577,9 +577,9 @@ const approfondirPortalItems = [
|
||||
|
||||
.glossary-map-block__head p{
|
||||
max-width: 76ch;
|
||||
margin: 12px 0 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
margin: 9px 0 0;
|
||||
font-size: .98rem;
|
||||
line-height: 1.46;
|
||||
opacity: .94;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
@@ -587,28 +587,56 @@ const approfondirPortalItems = [
|
||||
.glossary-map{
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 18px;
|
||||
gap: 6px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.glossary-map__stage{
|
||||
width: min(580px, 100%);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.glossary-map__title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.25;
|
||||
font-size: .98rem;
|
||||
line-height: 1.16;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.01em;
|
||||
opacity: .96;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 42px;
|
||||
padding: 8px 14px;
|
||||
border: 1px solid var(--glossary-border-strong);
|
||||
border-radius: 999px;
|
||||
background: var(--glossary-bg-soft);
|
||||
color: var(--glossary-accent);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: .94rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .04em;
|
||||
line-height: 1.16;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
background 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.glossary-map__arrow{
|
||||
font-size: 1.18rem;
|
||||
line-height: .9;
|
||||
opacity: .68;
|
||||
}
|
||||
|
||||
.glossary-map__roots{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
@@ -616,28 +644,6 @@ const approfondirPortalItems = [
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 50px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid var(--glossary-border-strong);
|
||||
border-radius: 999px;
|
||||
background: var(--glossary-bg-soft);
|
||||
color: var(--glossary-accent);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: .99rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .04em;
|
||||
line-height: 1.2;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
background 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.glossary-map__node:hover{
|
||||
background: var(--glossary-bg-soft-strong);
|
||||
border-color: rgba(0,217,255,0.22);
|
||||
@@ -650,12 +656,6 @@ const approfondirPortalItems = [
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.glossary-map__arrow{
|
||||
font-size: 1.45rem;
|
||||
line-height: 1;
|
||||
opacity: .72;
|
||||
}
|
||||
|
||||
.glossary-portal-card strong{
|
||||
color: var(--glossary-accent);
|
||||
font-size: 1.08rem;
|
||||
@@ -720,11 +720,17 @@ const approfondirPortalItems = [
|
||||
|
||||
.glossary-map-block__head h2,
|
||||
.glossary-section h2{
|
||||
font-size: clamp(1.5rem, 7vw, 1.95rem);
|
||||
line-height: 1.04;
|
||||
font-size: clamp(1.42rem, 6.3vw, 1.82rem);
|
||||
line-height: 1.03;
|
||||
letter-spacing: -.022em;
|
||||
}
|
||||
|
||||
.glossary-map-block__head h2{
|
||||
hyphens: none;
|
||||
word-break: normal;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.glossary-map-block__head p,
|
||||
.glossary-intro{
|
||||
font-size: .9rem;
|
||||
@@ -742,35 +748,36 @@ const approfondirPortalItems = [
|
||||
}
|
||||
|
||||
.glossary-map{
|
||||
gap: 7px;
|
||||
margin-top: 12px;
|
||||
gap: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.glossary-map__stage{
|
||||
gap: 7px;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.glossary-map__title{
|
||||
font-size: .9rem;
|
||||
line-height: 1.2;
|
||||
font-size: .82rem;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.glossary-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
font-size: .84rem;
|
||||
line-height: 1.15;
|
||||
min-height: 32px;
|
||||
padding: 6px 10px;
|
||||
font-size: .78rem;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.glossary-map__arrow{
|
||||
font-size: 1rem;
|
||||
opacity: .62;
|
||||
font-size: .92rem;
|
||||
line-height: .8;
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -804,23 +811,28 @@ const approfondirPortalItems = [
|
||||
}
|
||||
|
||||
.glossary-map{
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
gap: 3px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.glossary-map__stage{
|
||||
gap: 5px;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.glossary-map__title{
|
||||
font-size: .8rem;
|
||||
line-height: 1.12;
|
||||
font-size: .74rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
min-height: 32px;
|
||||
padding: 6px 8px;
|
||||
font-size: .74rem;
|
||||
min-height: 28px;
|
||||
padding: 5px 8px;
|
||||
font-size: .7rem;
|
||||
}
|
||||
|
||||
.glossary-map__arrow{
|
||||
font-size: .82rem;
|
||||
line-height: .75;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
|
||||
Reference in New Issue
Block a user