Polish glossary home sticky hero on mobile and tablet
This commit is contained in:
@@ -540,4 +540,209 @@ const {
|
||||
line-height: 1.08;
|
||||
}
|
||||
}
|
||||
/* =========================================================
|
||||
Glossaire home — sticky compact mobile/tablette avec H2 local
|
||||
========================================================= */
|
||||
|
||||
@media (max-width: 980px){
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero{
|
||||
position: sticky !important;
|
||||
top: calc(var(--sticky-header-h, 0px) + 8px) !important;
|
||||
z-index: 8 !important;
|
||||
transform: none !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
|
||||
padding: 8px 10px 9px !important;
|
||||
row-gap: 4px !important;
|
||||
border-radius: 16px !important;
|
||||
margin-bottom: 10px !important;
|
||||
box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-kicker{
|
||||
font-size: 9px !important;
|
||||
line-height: 1.05 !important;
|
||||
letter-spacing: .11em !important;
|
||||
opacity: .72 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
|
||||
font-size: clamp(1.35rem, 5.1vw, 1.72rem) !important;
|
||||
line-height: 1.02 !important;
|
||||
letter-spacing: -.03em !important;
|
||||
white-space: normal !important;
|
||||
overflow: visible !important;
|
||||
text-overflow: clip !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
|
||||
display: -webkit-box !important;
|
||||
-webkit-box-orient: vertical !important;
|
||||
-webkit-line-clamp: 2 !important;
|
||||
line-clamp: 2 !important;
|
||||
max-height: calc(2 * 1.12em) !important;
|
||||
overflow: hidden !important;
|
||||
white-space: normal !important;
|
||||
text-overflow: clip !important;
|
||||
font-size: .72rem !important;
|
||||
line-height: 1.12 !important;
|
||||
opacity: .78 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero__toggle{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero-follow{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-height: 0 !important;
|
||||
margin-top: 4px !important;
|
||||
padding-top: 6px !important;
|
||||
border-top: 1px solid rgba(127,127,127,.18) !important;
|
||||
opacity: .98 !important;
|
||||
transform: none !important;
|
||||
filter: none !important;
|
||||
white-space: normal !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: clip !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 761px) and (max-width: 980px){
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
|
||||
padding: 10px 14px 11px !important;
|
||||
row-gap: 5px !important;
|
||||
border-radius: 18px !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
|
||||
font-size: clamp(1.65rem, 3.4vw, 2.1rem) !important;
|
||||
line-height: 1.02 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
|
||||
font-size: .82rem !important;
|
||||
line-height: 1.18 !important;
|
||||
max-height: calc(2 * 1.18em) !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
|
||||
margin-top: 5px !important;
|
||||
padding-top: 7px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
|
||||
top: calc(var(--sticky-header-h, 0px) + 6px) !important;
|
||||
padding: 6px 9px 7px !important;
|
||||
row-gap: 3px !important;
|
||||
border-radius: 13px !important;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-kicker{
|
||||
font-size: 8px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero h1{
|
||||
font-size: clamp(1.08rem, 3.2vw, 1.34rem) !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
|
||||
-webkit-line-clamp: 1 !important;
|
||||
line-clamp: 1 !important;
|
||||
max-height: 1.08em !important;
|
||||
font-size: .64rem !important;
|
||||
line-height: 1.08 !important;
|
||||
opacity: .72 !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
|
||||
margin-top: 3px !important;
|
||||
padding-top: 4px !important;
|
||||
font-size: .86rem !important;
|
||||
line-height: 1.04 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
Glossaire home — polish premium fluidité sticky
|
||||
========================================================= */
|
||||
|
||||
@media (max-width: 980px){
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero{
|
||||
transition:
|
||||
padding 180ms ease,
|
||||
border-radius 180ms ease,
|
||||
box-shadow 180ms ease,
|
||||
background 180ms ease,
|
||||
margin-bottom 180ms ease;
|
||||
will-change: padding, border-radius, box-shadow;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) !important;
|
||||
background: rgba(0,0,0,.92) !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero h1,
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-kicker,
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero p#glossary-hero-intro{
|
||||
transition:
|
||||
font-size 180ms ease,
|
||||
line-height 180ms ease,
|
||||
opacity 180ms ease,
|
||||
max-height 180ms ease;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"]) .glossary-hero-follow{
|
||||
display: block !important;
|
||||
max-height: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
border-top: 0 !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
overflow: hidden !important;
|
||||
transform: translateY(-4px) !important;
|
||||
transition:
|
||||
max-height 180ms ease,
|
||||
opacity 180ms ease,
|
||||
transform 180ms ease,
|
||||
padding-top 180ms ease,
|
||||
margin-top 180ms ease;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
|
||||
max-height: 3.2em !important;
|
||||
opacity: .98 !important;
|
||||
visibility: visible !important;
|
||||
transform: translateY(0) !important;
|
||||
border-top: 1px solid rgba(127,127,127,.18) !important;
|
||||
}
|
||||
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero{
|
||||
background: rgba(0,0,0,.96) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body[data-edition-key="glossaire"][data-sticky-mode="glossary-home"].glossary-home-follow-on) .glossary-hero-follow.is-visible{
|
||||
max-height: 2.4em !important;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user