Synchronise les contenus glossaire et ajoute les scripts de conversion DOCX/MDX
This commit is contained in:
@@ -219,6 +219,80 @@ const prolongerLinks = [
|
||||
heroMoreId="archi-hero-more"
|
||||
heroToggleId="archi-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
@@ -278,4 +352,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.archi-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.archi-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -91,7 +91,7 @@ const pageItems = [
|
||||
{ href: "#six-concepts", label: "Les six concepts cardinaux" },
|
||||
{ href: "#distinctions-decisives", label: "Distinctions décisives" },
|
||||
{ href: "#ordre-lecture", label: "Ordre conseillé de lecture" },
|
||||
{ href: "#prolonger-lecture", label: "Prolonger la lecture" },
|
||||
{ href: "#prolonger-la-lecture", label: "Prolonger la lecture" },
|
||||
];
|
||||
|
||||
const usefulLinks = [
|
||||
@@ -333,22 +333,36 @@ const prolongerLinks = [
|
||||
|
||||
<style>
|
||||
.cf-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.cf-page,
|
||||
.cf-map,
|
||||
.cf-map__stage,
|
||||
.cf-map__roots,
|
||||
.cf-cards,
|
||||
.cf-comparisons,
|
||||
.cf-steps,
|
||||
.cf-card,
|
||||
.cf-step{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cf-map{
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
padding: 16px 18px 18px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
gap: var(--portal-block-gap, 18px);
|
||||
margin-top: 12px;
|
||||
padding:
|
||||
var(--portal-focus-pad-y, 18px)
|
||||
var(--portal-focus-pad-x, 20px);
|
||||
border: 1px solid rgba(127,127,127,0.20);
|
||||
border-radius: var(--portal-focus-radius, 18px);
|
||||
background: rgba(127,127,127,0.04);
|
||||
}
|
||||
|
||||
.cf-map__stage{
|
||||
width: min(580px, 100%);
|
||||
width: min(610px, 100%);
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
gap: 10px;
|
||||
@@ -357,41 +371,47 @@ const prolongerLinks = [
|
||||
.cf-map__title{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 1.02rem;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.01em;
|
||||
font-size: clamp(1rem, 1.35vw, 1.12rem);
|
||||
line-height: 1.2;
|
||||
font-weight: 790;
|
||||
letter-spacing: -.012em;
|
||||
opacity: .96;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.cf-map__roots{
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
gap: var(--portal-grid-gap, 12px);
|
||||
}
|
||||
|
||||
.cf-node{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 48px;
|
||||
min-height: 50px;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid rgba(127,127,127,0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
color: var(--glossary-accent, #00d9ff);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .05em;
|
||||
line-height: 1.2;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
line-height: 1.18;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
background 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.cf-node:hover{
|
||||
transform: translateY(-1px);
|
||||
background: rgba(127,127,127,0.08);
|
||||
border-color: rgba(0,217,255,0.18);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@@ -401,29 +421,34 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.cf-map__arrow{
|
||||
font-size: 18px;
|
||||
font-size: 1.45rem;
|
||||
line-height: 1;
|
||||
opacity: .65;
|
||||
opacity: .68;
|
||||
}
|
||||
|
||||
.cf-cards,
|
||||
.cf-comparisons{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--portal-grid-gap, 12px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.cf-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding:
|
||||
var(--portal-card-pad-y, 14px)
|
||||
var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
background 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.cf-card:hover{
|
||||
@@ -434,20 +459,21 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.cf-card strong{
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.26;
|
||||
color: var(--glossary-accent, #00d9ff);
|
||||
}
|
||||
|
||||
.cf-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
opacity: .92;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .93;
|
||||
}
|
||||
|
||||
.cf-card small{
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.35;
|
||||
opacity: .74;
|
||||
}
|
||||
|
||||
.cf-card--text{
|
||||
@@ -461,7 +487,7 @@ const prolongerLinks = [
|
||||
.cf-steps{
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.cf-step{
|
||||
@@ -469,9 +495,11 @@ const prolongerLinks = [
|
||||
grid-template-columns: 64px minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
align-items: start;
|
||||
padding: 14px 16px;
|
||||
padding:
|
||||
var(--portal-panel-pad-y, 16px)
|
||||
var(--portal-panel-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-panel-radius, 18px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -480,6 +508,7 @@ const prolongerLinks = [
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
border: 1px solid rgba(127,127,127,0.28);
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
@@ -489,29 +518,224 @@ const prolongerLinks = [
|
||||
|
||||
.cf-step__body h3{
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.3;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.28;
|
||||
}
|
||||
|
||||
.cf-step__body p{
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
@media (max-width: 720px){
|
||||
@media (max-width: 980px){
|
||||
.cf-map{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cf-map__stage{
|
||||
width: 100%;
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.cf-map__title{
|
||||
font-size: 1rem;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.cf-node{
|
||||
min-height: 46px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.cf-cards,
|
||||
.cf-comparisons{
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.cf-page{
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.cf-map{
|
||||
gap: 12px;
|
||||
margin-top: 10px;
|
||||
padding: 13px 13px 14px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cf-map__stage{
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.cf-map__title{
|
||||
font-size: .9rem;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.cf-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.cf-node{
|
||||
min-height: 40px;
|
||||
padding: 8px 10px;
|
||||
font-size: .83rem;
|
||||
line-height: 1.12;
|
||||
letter-spacing: .04em;
|
||||
}
|
||||
|
||||
.cf-map__arrow{
|
||||
font-size: 1rem;
|
||||
opacity: .62;
|
||||
}
|
||||
|
||||
.cf-cards,
|
||||
.cf-comparisons{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 9px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cf-card{
|
||||
gap: 6px;
|
||||
padding: 12px 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cf-card strong{
|
||||
font-size: 13.5px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.cf-card span{
|
||||
font-size: 12.5px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.cf-steps{
|
||||
gap: 9px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cf-step{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
padding: 12px 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.cf-step__num{
|
||||
width: fit-content;
|
||||
min-width: 64px;
|
||||
min-width: 58px;
|
||||
min-height: 36px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cf-step__body h3{
|
||||
font-size: 13.5px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
.cf-step__body p{
|
||||
margin-top: 6px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.cf-page{
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.cf-map{
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
padding: 10px 10px 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cf-map__stage{
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.cf-map__title{
|
||||
font-size: .8rem;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.cf-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.cf-node{
|
||||
min-height: 32px;
|
||||
padding: 6px 8px;
|
||||
font-size: .74rem;
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.cf-map__arrow{
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
.cf-cards,
|
||||
.cf-comparisons{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.cf-card{
|
||||
gap: 5px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cf-card strong{
|
||||
font-size: 12.5px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.cf-card span{
|
||||
font-size: 11.5px;
|
||||
line-height: 1.24;
|
||||
}
|
||||
|
||||
.cf-steps{
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.cf-step{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.cf-step__num{
|
||||
min-width: 52px;
|
||||
min-height: 30px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.cf-step__body h3{
|
||||
font-size: 12.5px;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.cf-step__body p{
|
||||
margin-top: 5px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.22;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -336,11 +336,84 @@ const prolongerLinks = [
|
||||
heroMoreId="dyna-hero-more"
|
||||
heroToggleId="dyna-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.dyna-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.dyna-focus-grid{
|
||||
@@ -351,9 +424,9 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.dyna-focus-card{
|
||||
padding: 18px 20px;
|
||||
padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--portal-focus-radius, 18px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -368,8 +441,8 @@ const prolongerLinks = [
|
||||
|
||||
.dyna-focus-card h3{
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
line-height: 1.15;
|
||||
font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
|
||||
line-height: var(--portal-local-h3-lh, 1.15);
|
||||
}
|
||||
|
||||
.dyna-focus-card h3 a{
|
||||
@@ -410,18 +483,18 @@ const prolongerLinks = [
|
||||
|
||||
.dyna-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.dyna-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
@@ -438,18 +511,18 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.dyna-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.dyna-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.dyna-card small{
|
||||
font-size: 12px;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
@@ -478,4 +551,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.dyna-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.dyna-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -252,6 +252,9 @@ const prolongerLinks = [
|
||||
const LETTERS_DOCKED_CLASS = "gic-letters-docked";
|
||||
const ACTIVE_CLASS = "is-active";
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const EXTRA_GAP = 12;
|
||||
const MAX_CORRECTION_PASSES = 8;
|
||||
@@ -262,8 +265,30 @@ const prolongerLinks = [
|
||||
|
||||
body.classList.add(BODY_CLASS);
|
||||
|
||||
const forceHideGlobalFollowOnCompactViewport = () => {
|
||||
if (!isCompactViewport()) {
|
||||
follow.style.display = "";
|
||||
return;
|
||||
}
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
setAnchorOffset(0);
|
||||
};
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const computeFollowOn = () =>
|
||||
!mqMobile.matches &&
|
||||
!isCompactViewport() &&
|
||||
follow.classList.contains("is-on") &&
|
||||
follow.style.display !== "none" &&
|
||||
follow.getAttribute("aria-hidden") !== "true";
|
||||
@@ -475,6 +500,7 @@ const prolongerLinks = [
|
||||
if (raf) return;
|
||||
raf = requestAnimationFrame(() => {
|
||||
raf = 0;
|
||||
forceHideGlobalFollowOnCompactViewport();
|
||||
syncFollowLettersTop();
|
||||
syncLettersDockState();
|
||||
syncActiveLetter();
|
||||
@@ -507,10 +533,10 @@ const prolongerLinks = [
|
||||
document.fonts.ready.then(schedule).catch(() => {});
|
||||
}
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", schedule);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(schedule);
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", schedule);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(schedule);
|
||||
}
|
||||
|
||||
if (reducedMotion.addEventListener) {
|
||||
@@ -520,6 +546,7 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
setAnchorOffset(0);
|
||||
forceHideGlobalFollowOnCompactViewport();
|
||||
schedule();
|
||||
|
||||
if (window.location.hash.startsWith("#letter-")) {
|
||||
@@ -543,68 +570,69 @@ const prolongerLinks = [
|
||||
<style>
|
||||
.gic-page{
|
||||
--gic-follow-letters-offset: 0px;
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.gic-aside-stack{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.gic-aside__block{
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 15px;
|
||||
padding: 11px 12px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
.gic-aside__heading{
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
margin: 0 0 8px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.25;
|
||||
font-weight: 800;
|
||||
opacity: .9;
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.gic-aside__pills{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.gic-aside__pill{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 9px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid rgba(127,127,127,0.24);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.04);
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.25;
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.gic-aside__note{
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
line-height: 1.45;
|
||||
opacity: .78;
|
||||
margin: 8px 0 0;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.4;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.gic-letters{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
gap: 7px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gic-letters a,
|
||||
.gic-follow-letters a{
|
||||
min-width: 34px;
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(127,127,127,0.24);
|
||||
border-radius: 10px;
|
||||
padding: 5px 8px;
|
||||
border-radius: 9px;
|
||||
padding: 4px 7px;
|
||||
text-decoration: none;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
@@ -644,15 +672,15 @@ const prolongerLinks = [
|
||||
z-index: 59;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 8px 12px 10px;
|
||||
gap: 7px;
|
||||
padding: 7px 10px 9px;
|
||||
border: 1px solid rgba(127,127,127,.20);
|
||||
border-top: 0;
|
||||
border-radius: 0 0 14px 14px;
|
||||
border-radius: 0 0 12px 12px;
|
||||
background: rgba(255,255,255,.86);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
box-shadow: 0 10px 22px rgba(0,0,0,.06);
|
||||
box-shadow: 0 8px 18px rgba(0,0,0,.06);
|
||||
opacity: 0;
|
||||
transform: translateY(-6px);
|
||||
pointer-events: none;
|
||||
@@ -673,7 +701,7 @@ const prolongerLinks = [
|
||||
.gic-groups{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 28px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.gic-group{
|
||||
@@ -683,18 +711,18 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.gic-section{
|
||||
margin-top: 34px;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.gic-section__head{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 8px;
|
||||
scroll-margin-top: calc(
|
||||
var(--sticky-offset-px, 96px) + 28px + var(--gic-follow-letters-offset, 0px)
|
||||
var(--sticky-offset-px, 96px) + 24px + var(--gic-follow-letters-offset, 0px)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -713,60 +741,61 @@ const prolongerLinks = [
|
||||
|
||||
.gic-list{
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gic-item{
|
||||
border: 1px solid rgba(127,127,127,0.20);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 15px;
|
||||
padding: 13px 14px;
|
||||
background: rgba(127,127,127,0.04);
|
||||
}
|
||||
|
||||
.gic-term{
|
||||
display: inline-block;
|
||||
font-weight: 800;
|
||||
font-size: 1.04rem;
|
||||
line-height: 1.3;
|
||||
font-size: 1rem;
|
||||
line-height: 1.28;
|
||||
text-decoration: none;
|
||||
margin-bottom: 6px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.gic-def{
|
||||
margin: 0 0 8px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 7px;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.46;
|
||||
opacity: .94;
|
||||
}
|
||||
|
||||
.gic-meta{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-size: 11.5px;
|
||||
opacity: .78;
|
||||
}
|
||||
|
||||
.gic-meta span{
|
||||
border: 1px solid rgba(127,127,127,0.20);
|
||||
border-radius: 999px;
|
||||
padding: 2px 8px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
.gic-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--portal-grid-gap, 12px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gic-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
@@ -780,13 +809,13 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.gic-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.gic-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
@@ -794,6 +823,160 @@ const prolongerLinks = [
|
||||
.gic-follow-letters{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gic-aside-stack{
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.gic-aside__block{
|
||||
border-radius: 14px;
|
||||
padding: 10px 11px;
|
||||
}
|
||||
|
||||
.gic-aside__heading{
|
||||
margin-bottom: 7px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.gic-aside__pill{
|
||||
padding: 3px 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.gic-aside__note{
|
||||
font-size: 11px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.gic-letters{
|
||||
gap: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.gic-letters a{
|
||||
min-width: 30px;
|
||||
padding: 4px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.gic-groups{
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.gic-section{
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
.gic-item{
|
||||
border-radius: 14px;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
.gic-term{
|
||||
font-size: .96rem;
|
||||
}
|
||||
|
||||
.gic-def{
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.gic-meta{
|
||||
gap: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.gic-meta span{
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.gic-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.gic-follow-letters{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gic-aside-stack{
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.gic-aside__block{
|
||||
border-radius: 13px;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
|
||||
.gic-aside__heading{
|
||||
margin-bottom: 6px;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
|
||||
.gic-aside__pill{
|
||||
padding: 2px 7px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.gic-aside__note{
|
||||
font-size: 10.5px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.gic-letters{
|
||||
gap: 5px;
|
||||
margin-top: 9px;
|
||||
}
|
||||
|
||||
.gic-letters a{
|
||||
min-width: 28px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 8px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
|
||||
.gic-groups{
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.gic-section{
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.gic-section__head{
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.gic-item{
|
||||
border-radius: 13px;
|
||||
padding: 10px 11px;
|
||||
}
|
||||
|
||||
.gic-term{
|
||||
font-size: .93rem;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.gic-def{
|
||||
margin-bottom: 6px;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.gic-meta{
|
||||
gap: 4px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.gic-meta span{
|
||||
padding: 1px 6px;
|
||||
}
|
||||
|
||||
.gic-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
@@ -824,4 +1007,38 @@ const prolongerLinks = [
|
||||
rgba(255,255,255,0.06);
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-index-complet-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-index-complet-page #reading-follow),
|
||||
:global(body.is-index-complet-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-index-complet-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-index-complet-page #reading-follow),
|
||||
:global(body.is-index-complet-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-index-complet-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -286,151 +286,198 @@ const approfondirPortalItems = [
|
||||
</section>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const header = document.querySelector("header");
|
||||
const hero = document.getElementById("glossary-hero");
|
||||
const follow = document.getElementById("glossary-hero-follow");
|
||||
const headings = Array.from(document.querySelectorAll("[data-follow-section]"));
|
||||
(() => {
|
||||
const header = document.querySelector("header");
|
||||
const hero = document.getElementById("glossary-hero");
|
||||
const follow = document.getElementById("glossary-hero-follow");
|
||||
const intro = document.getElementById("glossary-hero-intro");
|
||||
const toggle = document.getElementById("glossary-hero-toggle");
|
||||
const headings = Array.from(document.querySelectorAll("[data-follow-section]"));
|
||||
|
||||
if (!header || !hero || !follow || headings.length === 0) return;
|
||||
if (!header || !hero || !follow || !intro || !toggle || headings.length === 0) return;
|
||||
|
||||
let raf = 0;
|
||||
let activeHeading = null;
|
||||
let clearTimer = 0;
|
||||
let raf = 0;
|
||||
let activeHeading = null;
|
||||
let clearTimer = 0;
|
||||
|
||||
function syncStickyTop() {
|
||||
const headerHeight = header.getBoundingClientRect().height || 0;
|
||||
document.documentElement.style.setProperty(
|
||||
"--glossary-sticky-top",
|
||||
`${Math.round(headerHeight + 8)}px`
|
||||
);
|
||||
}
|
||||
function syncStickyTop() {
|
||||
const headerHeight = header.getBoundingClientRect().height || 0;
|
||||
document.documentElement.style.setProperty(
|
||||
"--glossary-sticky-top",
|
||||
`${Math.round(headerHeight + 8)}px`
|
||||
);
|
||||
}
|
||||
|
||||
function applyHeadingMetrics(fromEl, toEl) {
|
||||
const cs = window.getComputedStyle(fromEl);
|
||||
function applyHeadingMetrics(fromEl, toEl) {
|
||||
const cs = window.getComputedStyle(fromEl);
|
||||
|
||||
const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
|
||||
const sourceLineHeight =
|
||||
Number.parseFloat(cs.lineHeight) ||
|
||||
Math.round(sourceFontSize * 1.06 * 100) / 100;
|
||||
const sourceFontSize = Number.parseFloat(cs.fontSize) || 40;
|
||||
const sourceLineHeight =
|
||||
Number.parseFloat(cs.lineHeight) ||
|
||||
Math.round(sourceFontSize * 1.06 * 100) / 100;
|
||||
|
||||
const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
|
||||
const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
|
||||
const scaledFontSize = Math.max(28, sourceFontSize * 0.9);
|
||||
const scaledLineHeight = Math.max(scaledFontSize * 1.04, sourceLineHeight * 0.92);
|
||||
|
||||
toEl.style.fontSize = `${scaledFontSize}px`;
|
||||
toEl.style.lineHeight = `${scaledLineHeight}px`;
|
||||
toEl.style.fontWeight = cs.fontWeight;
|
||||
toEl.style.letterSpacing = cs.letterSpacing;
|
||||
toEl.style.fontFamily = cs.fontFamily;
|
||||
toEl.style.fontSize = `${scaledFontSize}px`;
|
||||
toEl.style.lineHeight = `${scaledLineHeight}px`;
|
||||
toEl.style.fontWeight = cs.fontWeight;
|
||||
toEl.style.letterSpacing = cs.letterSpacing;
|
||||
toEl.style.fontFamily = cs.fontFamily;
|
||||
|
||||
document.documentElement.style.setProperty(
|
||||
"--glossary-follow-height",
|
||||
`${Math.ceil(scaledLineHeight)}px`
|
||||
);
|
||||
}
|
||||
document.documentElement.style.setProperty(
|
||||
"--glossary-follow-height",
|
||||
`${Math.ceil(scaledLineHeight)}px`
|
||||
);
|
||||
}
|
||||
|
||||
function getCurrentHeading() {
|
||||
const heroRect = hero.getBoundingClientRect();
|
||||
let candidate = null;
|
||||
function getCurrentHeading() {
|
||||
const heroRect = hero.getBoundingClientRect();
|
||||
const heroBottom = heroRect.bottom;
|
||||
let candidate = null;
|
||||
|
||||
for (const heading of headings) {
|
||||
const rect = heading.getBoundingClientRect();
|
||||
const trigger = heroRect.bottom - Math.min(rect.height * 0.42, 18);
|
||||
for (const heading of headings) {
|
||||
const rect = heading.getBoundingClientRect();
|
||||
const trigger =
|
||||
heroBottom - Math.min(Math.max(rect.height * 0.55, 18), 34);
|
||||
|
||||
if (rect.top <= trigger) {
|
||||
candidate = heading;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return candidate;
|
||||
}
|
||||
|
||||
function hideFollow() {
|
||||
if (!follow.classList.contains("is-visible")) return;
|
||||
|
||||
follow.classList.remove("is-visible");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
|
||||
window.clearTimeout(clearTimer);
|
||||
clearTimer = window.setTimeout(() => {
|
||||
if (!follow.classList.contains("is-visible")) {
|
||||
follow.textContent = "";
|
||||
}
|
||||
}, 260);
|
||||
}
|
||||
|
||||
function showFollow(heading) {
|
||||
const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
|
||||
if (!nextText) {
|
||||
hideFollow();
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeHeading !== heading) {
|
||||
activeHeading = heading;
|
||||
follow.textContent = nextText;
|
||||
applyHeadingMetrics(heading, follow);
|
||||
}
|
||||
|
||||
window.clearTimeout(clearTimer);
|
||||
|
||||
if (!follow.classList.contains("is-visible")) {
|
||||
requestAnimationFrame(() => {
|
||||
follow.classList.add("is-visible");
|
||||
follow.setAttribute("aria-hidden", "false");
|
||||
});
|
||||
if (rect.top <= trigger) {
|
||||
candidate = heading;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return candidate;
|
||||
}
|
||||
|
||||
function hideFollow() {
|
||||
if (!follow.classList.contains("is-visible")) return;
|
||||
|
||||
follow.classList.remove("is-visible");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
|
||||
window.clearTimeout(clearTimer);
|
||||
clearTimer = window.setTimeout(() => {
|
||||
if (!follow.classList.contains("is-visible")) {
|
||||
follow.textContent = "";
|
||||
}
|
||||
}, 260);
|
||||
}
|
||||
|
||||
function showFollow(heading) {
|
||||
const nextText = (heading.dataset.followSection || heading.textContent || "").trim();
|
||||
if (!nextText) {
|
||||
hideFollow();
|
||||
return;
|
||||
}
|
||||
|
||||
if (activeHeading !== heading) {
|
||||
activeHeading = heading;
|
||||
follow.textContent = nextText;
|
||||
applyHeadingMetrics(heading, follow);
|
||||
}
|
||||
|
||||
window.clearTimeout(clearTimer);
|
||||
|
||||
if (!follow.classList.contains("is-visible")) {
|
||||
requestAnimationFrame(() => {
|
||||
follow.classList.add("is-visible");
|
||||
follow.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function updateFollow() {
|
||||
syncStickyTop();
|
||||
|
||||
const active = getCurrentHeading();
|
||||
|
||||
if (!active) {
|
||||
activeHeading = null;
|
||||
hideFollow();
|
||||
return;
|
||||
}
|
||||
|
||||
const heroRect = hero.getBoundingClientRect();
|
||||
const activeRect = active.getBoundingClientRect();
|
||||
const showThreshold = heroRect.bottom - Math.min(activeRect.height * 0.34, 14);
|
||||
const shouldShow = activeRect.top <= showThreshold;
|
||||
|
||||
if (!shouldShow) {
|
||||
activeHeading = null;
|
||||
hideFollow();
|
||||
return;
|
||||
}
|
||||
|
||||
showFollow(active);
|
||||
}
|
||||
|
||||
function schedule() {
|
||||
if (raf) return;
|
||||
raf = requestAnimationFrame(() => {
|
||||
raf = 0;
|
||||
updateFollow();
|
||||
});
|
||||
} else {
|
||||
follow.setAttribute("aria-hidden", "false");
|
||||
}
|
||||
}
|
||||
|
||||
function collapseIntro() {
|
||||
if (!document.body.classList.contains("glossary-home-follow-on")) return;
|
||||
|
||||
if (document.body.classList.contains("glossary-home-hero-expanded")) return;
|
||||
|
||||
intro.setAttribute("aria-hidden", "true");
|
||||
toggle.hidden = false;
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
function expandIntro() {
|
||||
document.body.classList.add("glossary-home-hero-expanded");
|
||||
intro.setAttribute("aria-hidden", "false");
|
||||
toggle.hidden = true;
|
||||
toggle.setAttribute("aria-expanded", "true");
|
||||
}
|
||||
|
||||
function resetIntro() {
|
||||
document.body.classList.remove("glossary-home-hero-expanded");
|
||||
intro.setAttribute("aria-hidden", "false");
|
||||
toggle.hidden = true;
|
||||
toggle.setAttribute("aria-expanded", "false");
|
||||
}
|
||||
|
||||
function updateFollow() {
|
||||
syncStickyTop();
|
||||
|
||||
const heroRect = hero.getBoundingClientRect();
|
||||
const active = getCurrentHeading();
|
||||
|
||||
const stickyTop =
|
||||
parseFloat(
|
||||
getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--glossary-sticky-top")
|
||||
) || 64;
|
||||
|
||||
const hasStartedScrolling = (window.scrollY || window.pageYOffset || 0) > 8;
|
||||
const heroDocked = Math.abs(heroRect.top - stickyTop) <= 6;
|
||||
const heroOut = hasStartedScrolling && heroDocked;
|
||||
|
||||
document.body.classList.toggle("glossary-home-follow-on", heroOut);
|
||||
|
||||
if (!active) {
|
||||
activeHeading = null;
|
||||
hideFollow();
|
||||
resetIntro();
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener("scroll", schedule, { passive: true });
|
||||
window.addEventListener("resize", schedule);
|
||||
const activeRect = active.getBoundingClientRect();
|
||||
const showThreshold =
|
||||
heroRect.bottom - Math.min(Math.max(activeRect.height * 0.58, 18), 34);
|
||||
|
||||
if (document.fonts?.ready) {
|
||||
document.fonts.ready.then(schedule).catch(() => {});
|
||||
const shouldShow = heroOut && activeRect.top <= showThreshold;
|
||||
|
||||
if (!shouldShow) {
|
||||
activeHeading = null;
|
||||
hideFollow();
|
||||
resetIntro();
|
||||
return;
|
||||
}
|
||||
|
||||
schedule();
|
||||
})();
|
||||
</script>
|
||||
collapseIntro();
|
||||
showFollow(active);
|
||||
}
|
||||
|
||||
<style>
|
||||
function schedule() {
|
||||
if (raf) return;
|
||||
raf = requestAnimationFrame(() => {
|
||||
raf = 0;
|
||||
updateFollow();
|
||||
});
|
||||
}
|
||||
|
||||
toggle.addEventListener("click", expandIntro);
|
||||
|
||||
window.addEventListener("scroll", schedule, { passive: true });
|
||||
window.addEventListener("resize", schedule);
|
||||
|
||||
if (document.fonts?.ready) {
|
||||
document.fonts.ready.then(schedule).catch(() => {});
|
||||
}
|
||||
|
||||
schedule();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--glossary-accent: #00d9ff;
|
||||
--glossary-bg-soft: rgba(127,127,127,0.05);
|
||||
@@ -441,22 +488,32 @@ const approfondirPortalItems = [
|
||||
--glossary-follow-height: 2.5rem;
|
||||
}
|
||||
|
||||
.glossary-home-shell__main,
|
||||
.glossary-home-shell__aside{
|
||||
grid-column: auto;
|
||||
.glossary-home{
|
||||
min-width: 0;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.glossary-home-shell__aside-inner{
|
||||
position: static;
|
||||
.glossary-home > *{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-map-block,
|
||||
.glossary-section,
|
||||
.glossary-map,
|
||||
.glossary-map__stage,
|
||||
.glossary-map__roots,
|
||||
.glossary-map__node{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-map-block__head h2,
|
||||
.glossary-section h2{
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 3vw, 2.55rem);
|
||||
font-size: clamp(1.8rem, 3vw, 2.55rem);
|
||||
line-height: 1.06;
|
||||
letter-spacing: -.03em;
|
||||
font-weight: 800;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.glossary-map-block{
|
||||
@@ -472,6 +529,7 @@ const approfondirPortalItems = [
|
||||
font-size: 1rem;
|
||||
line-height: 1.55;
|
||||
opacity: .94;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.glossary-map{
|
||||
@@ -496,6 +554,7 @@ const approfondirPortalItems = [
|
||||
font-weight: 800;
|
||||
letter-spacing: -.01em;
|
||||
opacity: .96;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.glossary-map__roots{
|
||||
@@ -520,7 +579,11 @@ const approfondirPortalItems = [
|
||||
font-size: .99rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .04em;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
line-height: 1.2;
|
||||
transition:
|
||||
transform 120ms ease,
|
||||
background 120ms ease,
|
||||
border-color 120ms ease;
|
||||
}
|
||||
|
||||
.glossary-map__node:hover{
|
||||
@@ -562,12 +625,33 @@ const approfondirPortalItems = [
|
||||
}
|
||||
|
||||
@media (max-width: 980px){
|
||||
.glossary-home-shell{
|
||||
grid-template-columns: 1fr;
|
||||
.glossary-map-block{
|
||||
padding: 16px 16px 18px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.glossary-home-shell__aside-inner{
|
||||
position: static;
|
||||
.glossary-map-block__head h2,
|
||||
.glossary-section h2{
|
||||
font-size: clamp(1.8rem, 5vw, 2.3rem);
|
||||
line-height: 1.04;
|
||||
}
|
||||
|
||||
.glossary-map-block__head p,
|
||||
.glossary-intro{
|
||||
font-size: .96rem;
|
||||
line-height: 1.44;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-cards,
|
||||
.glossary-home .glossary-portals{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
.glossary-home .glossary-portal-card{
|
||||
padding: 13px 14px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -577,18 +661,133 @@ const approfondirPortalItems = [
|
||||
padding: 12px 14px 16px;
|
||||
}
|
||||
|
||||
.glossary-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
.glossary-map-block{
|
||||
padding: 16px 16px 18px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.glossary-map-block__head h2,
|
||||
.glossary-section h2{
|
||||
font-size: clamp(1.5rem, 7vw, 1.95rem);
|
||||
line-height: 1.04;
|
||||
letter-spacing: -.022em;
|
||||
}
|
||||
|
||||
.glossary-map-block__head p,
|
||||
.glossary-intro{
|
||||
font-size: .9rem;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.glossary-section__head{
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.glossary-cta{
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.glossary-map{
|
||||
gap: 7px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.glossary-map__stage{
|
||||
gap: 7px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.glossary-map__title{
|
||||
font-size: .9rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glossary-map__roots{
|
||||
grid-template-columns: 1fr;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
min-height: 38px;
|
||||
padding: 8px 10px;
|
||||
font-size: .84rem;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.glossary-map__arrow{
|
||||
font-size: 1rem;
|
||||
opacity: .62;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.glossary-map-block{
|
||||
padding: 10px 10px 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.glossary-map-block__head h2,
|
||||
.glossary-section h2{
|
||||
font-size: clamp(1.2rem, 3.8vw, 1.55rem);
|
||||
line-height: 1.02;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
.glossary-map-block__head p,
|
||||
.glossary-intro{
|
||||
font-size: .82rem;
|
||||
line-height: 1.24;
|
||||
}
|
||||
|
||||
.glossary-section{
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.glossary-section__head{
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.glossary-map{
|
||||
gap: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.glossary-map__stage{
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.glossary-map__title{
|
||||
font-size: .8rem;
|
||||
line-height: 1.12;
|
||||
}
|
||||
|
||||
.glossary-map__node{
|
||||
min-height: 32px;
|
||||
padding: 6px 8px;
|
||||
font-size: .74rem;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
.glossary-home .glossary-portal-card{
|
||||
padding: 10px 11px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card strong,
|
||||
.glossary-home .glossary-portal-card strong{
|
||||
font-size: .9rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card span,
|
||||
.glossary-home .glossary-portal-card span,
|
||||
.glossary-home .glossary-portal-card small{
|
||||
font-size: .8rem;
|
||||
line-height: 1.22;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
@@ -605,6 +804,112 @@ const approfondirPortalItems = [
|
||||
.glossary-cta:hover{
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================================
|
||||
LOT 17.A.5 — Recalage follow + densité mobile finale
|
||||
========================================================= */
|
||||
|
||||
.glossary-home{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-cards,
|
||||
.glossary-home .glossary-portals{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
.glossary-home .glossary-portal-card{
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.glossary-section{
|
||||
margin-top: 30px;
|
||||
scroll-margin-top: calc(var(--glossary-sticky-top) + 108px);
|
||||
}
|
||||
|
||||
.glossary-section__head{
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-cards,
|
||||
.glossary-home .glossary-portals{
|
||||
gap: 9px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
.glossary-home .glossary-portal-card{
|
||||
padding: 12px 13px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card strong,
|
||||
.glossary-home .glossary-portal-card strong{
|
||||
font-size: .98rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card span,
|
||||
.glossary-home .glossary-portal-card span{
|
||||
font-size: .92rem;
|
||||
line-height: 1.36;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-portal-card small{
|
||||
font-size: .82rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.glossary-cta{
|
||||
min-height: 36px;
|
||||
padding: 6px 12px;
|
||||
font-size: .92rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.glossary-section{
|
||||
margin-top: 20px;
|
||||
scroll-margin-top: calc(var(--glossary-sticky-top) + 84px);
|
||||
}
|
||||
|
||||
.glossary-section__head{
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-cards,
|
||||
.glossary-home .glossary-portals{
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card,
|
||||
.glossary-home .glossary-portal-card{
|
||||
padding: 9px 10px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card strong,
|
||||
.glossary-home .glossary-portal-card strong{
|
||||
font-size: .86rem;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.glossary-home .glossary-card span,
|
||||
.glossary-home .glossary-portal-card span,
|
||||
.glossary-home .glossary-portal-card small{
|
||||
font-size: .76rem;
|
||||
line-height: 1.16;
|
||||
}
|
||||
|
||||
.glossary-cta{
|
||||
min-height: 30px;
|
||||
padding: 4px 10px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</GlossaryLayout>
|
||||
@@ -663,18 +663,91 @@ const usefulLinks = [
|
||||
heroMoreId="pa-hero-more"
|
||||
heroToggleId="pa-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.pa-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.pa-focus-card{
|
||||
margin-top: 14px;
|
||||
padding: 18px 20px;
|
||||
.pa-focus-card{
|
||||
margin-top: 12px;
|
||||
padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--portal-focus-radius, 18px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -689,8 +762,8 @@ const usefulLinks = [
|
||||
|
||||
.pa-focus-card h3{
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
line-height: 1.15;
|
||||
font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
|
||||
line-height: var(--portal-local-h3-lh, 1.15);
|
||||
}
|
||||
|
||||
.pa-focus-card h3 a{
|
||||
@@ -722,14 +795,14 @@ const usefulLinks = [
|
||||
}
|
||||
|
||||
.pa-block{
|
||||
margin-top: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.pa-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--portal-grid-gap, 12px);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.pa-card,
|
||||
@@ -737,9 +810,9 @@ const usefulLinks = [
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -757,19 +830,19 @@ const usefulLinks = [
|
||||
|
||||
.pa-card strong,
|
||||
.pa-note-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.pa-card span,
|
||||
.pa-note-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.pa-card small{
|
||||
font-size: 12px;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
@@ -782,14 +855,14 @@ const usefulLinks = [
|
||||
|
||||
.pa-theory-hub{
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
padding: 18px 20px;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
padding: 16px 18px;
|
||||
border: 1px solid rgba(127,127,127,0.20);
|
||||
border-radius: 22px;
|
||||
border-radius: 20px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.04)),
|
||||
radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.06), transparent 62%),
|
||||
linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.035)),
|
||||
radial-gradient(700px 180px at 12% 0%, rgba(0,217,255,0.055), transparent 62%),
|
||||
rgba(127,127,127,0.04);
|
||||
}
|
||||
|
||||
@@ -797,13 +870,13 @@ const usefulLinks = [
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pa-theory-hub__head{
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.pa-theory-hub__eyebrow{
|
||||
@@ -816,19 +889,19 @@ const usefulLinks = [
|
||||
|
||||
.pa-theory-hub h3{
|
||||
margin: 0;
|
||||
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
|
||||
line-height: 1.2;
|
||||
font-size: clamp(1.02rem, 1.45vw, 1.22rem);
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.pa-theory-hub__count{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 0 11px;
|
||||
min-height: 26px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.04);
|
||||
font-size: 12px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.2;
|
||||
opacity: .82;
|
||||
white-space: nowrap;
|
||||
@@ -836,9 +909,9 @@ const usefulLinks = [
|
||||
|
||||
.pa-theory-hub__intro{
|
||||
margin: 0;
|
||||
max-width: 78ch;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
max-width: 76ch;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.5;
|
||||
opacity: .94;
|
||||
}
|
||||
|
||||
@@ -846,25 +919,25 @@ const usefulLinks = [
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pa-theory-hub__chips{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.pa-chip{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: 0 11px;
|
||||
min-height: 28px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 999px;
|
||||
background: rgba(127,127,127,0.05);
|
||||
font-size: 12px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.2;
|
||||
opacity: .9;
|
||||
white-space: nowrap;
|
||||
@@ -908,8 +981,33 @@ const usefulLinks = [
|
||||
|
||||
@media (max-width: 720px){
|
||||
.pa-theory-hub{
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
gap: 8px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.pa-theory-hub__top{
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pa-theory-hub h3{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.pa-theory-hub__intro{
|
||||
font-size: 13px;
|
||||
line-height: 1.44;
|
||||
}
|
||||
|
||||
.pa-theory-hub__chips{
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.pa-chip{
|
||||
min-height: 26px;
|
||||
padding: 0 9px;
|
||||
font-size: 11px;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -939,4 +1037,72 @@ const usefulLinks = [
|
||||
background: rgba(0,217,255,0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.pa-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.pa-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pa-theory-hub{
|
||||
gap: 7px;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.pa-theory-hub h3{
|
||||
font-size: .96rem;
|
||||
line-height: 1.14;
|
||||
}
|
||||
|
||||
.pa-theory-hub__intro{
|
||||
font-size: 12.5px;
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
.pa-chip{
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -212,11 +212,84 @@ const prolongerLinks = [
|
||||
heroMoreId="theo-hero-more"
|
||||
heroToggleId="theo-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.theo-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.theo-overview{
|
||||
@@ -248,18 +321,18 @@ const prolongerLinks = [
|
||||
|
||||
.theo-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.theo-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
@@ -273,18 +346,18 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.theo-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.theo-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.theo-card small{
|
||||
font-size: 12px;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
@@ -305,4 +378,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.theo-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.theo-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -314,18 +314,91 @@ const prolongerLinks = [
|
||||
heroMoreId="scene-hero-more"
|
||||
heroToggleId="scene-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.scene-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.scene-focus-card{
|
||||
margin-top: 14px;
|
||||
padding: 18px 20px;
|
||||
padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 18px;
|
||||
border-radius: var(--portal-focus-radius, 18px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -340,8 +413,8 @@ const prolongerLinks = [
|
||||
|
||||
.scene-focus-card h3{
|
||||
margin: 0 0 10px;
|
||||
font-size: clamp(1.35rem, 2vw, 1.7rem);
|
||||
line-height: 1.15;
|
||||
font-size: var(--portal-local-h3-size, clamp(1.35rem, 2vw, 1.7rem));
|
||||
line-height: var(--portal-local-h3-lh, 1.15);
|
||||
}
|
||||
|
||||
.scene-focus-card h3 a{
|
||||
@@ -378,18 +451,18 @@ const prolongerLinks = [
|
||||
|
||||
.scene-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.scene-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
@@ -406,18 +479,18 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.scene-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.scene-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.scene-card small{
|
||||
font-size: 12px;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
@@ -438,4 +511,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.scene-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.scene-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -341,18 +341,91 @@ const prolongerLinks = [
|
||||
heroMoreId="tir-hero-more"
|
||||
heroToggleId="tir-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.tir-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.tir-note-card{
|
||||
margin-top: 14px;
|
||||
padding: 16px 18px;
|
||||
padding: var(--portal-focus-pad-y, 18px) var(--portal-focus-pad-x, 20px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-focus-radius, 18px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
}
|
||||
|
||||
@@ -426,18 +499,18 @@ const prolongerLinks = [
|
||||
|
||||
.tir-link-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.tir-link-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
text-decoration: none;
|
||||
transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
|
||||
@@ -451,18 +524,18 @@ const prolongerLinks = [
|
||||
}
|
||||
|
||||
.tir-link-card strong{
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tir-link-card span{
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.45);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
.tir-link-card small{
|
||||
font-size: 12px;
|
||||
font-size: var(--portal-card-meta-size, 12px);
|
||||
line-height: 1.4;
|
||||
opacity: .72;
|
||||
}
|
||||
@@ -479,4 +552,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.tir-link-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.tir-link-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -328,27 +328,100 @@ const prolongerLinks = [
|
||||
heroMoreId="verbs-hero-more"
|
||||
heroToggleId="verbs-hero-toggle"
|
||||
/>
|
||||
|
||||
<script is:inline>
|
||||
(() => {
|
||||
const boot = () => {
|
||||
const body = document.body;
|
||||
const root = document.documentElement;
|
||||
const follow = document.getElementById("reading-follow");
|
||||
|
||||
if (!body || !root || !follow) return;
|
||||
|
||||
body.classList.add("is-glossary-portal-page");
|
||||
|
||||
const mqMobile = window.matchMedia("(max-width: 860px)");
|
||||
const mqSmallLandscape = window.matchMedia(
|
||||
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
|
||||
);
|
||||
|
||||
const isCompactViewport = () =>
|
||||
mqMobile.matches || mqSmallLandscape.matches;
|
||||
|
||||
const disableFollow = () => {
|
||||
if (!isCompactViewport()) return;
|
||||
|
||||
follow.classList.remove("is-on");
|
||||
follow.setAttribute("aria-hidden", "true");
|
||||
follow.style.display = "none";
|
||||
follow.innerHTML = "";
|
||||
|
||||
root.style.setProperty("--followbar-h", "0px");
|
||||
root.style.setProperty(
|
||||
"--sticky-offset-px",
|
||||
"calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px))"
|
||||
);
|
||||
};
|
||||
|
||||
const enableFollow = () => {
|
||||
if (isCompactViewport()) return;
|
||||
follow.style.display = "";
|
||||
};
|
||||
|
||||
const sync = () => {
|
||||
if (isCompactViewport()) {
|
||||
disableFollow();
|
||||
} else {
|
||||
enableFollow();
|
||||
}
|
||||
};
|
||||
|
||||
if (mqMobile.addEventListener) {
|
||||
mqMobile.addEventListener("change", sync);
|
||||
} else if (mqMobile.addListener) {
|
||||
mqMobile.addListener(sync);
|
||||
}
|
||||
|
||||
if (mqSmallLandscape.addEventListener) {
|
||||
mqSmallLandscape.addEventListener("change", sync);
|
||||
} else if (mqSmallLandscape.addListener) {
|
||||
mqSmallLandscape.addListener(sync);
|
||||
}
|
||||
|
||||
window.addEventListener("resize", sync);
|
||||
window.addEventListener("pageshow", sync);
|
||||
|
||||
sync();
|
||||
};
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", boot, { once: true });
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</GlossaryLayout>
|
||||
|
||||
<style>
|
||||
.verbs-page{
|
||||
padding: 8px 0 24px;
|
||||
padding: var(--portal-page-pad-top, 8px) 0 var(--portal-page-pad-bottom, 24px);
|
||||
}
|
||||
|
||||
.verbs-cards{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.verbs-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 14px 16px;
|
||||
padding: var(--portal-card-pad-y, 14px) var(--portal-card-pad-x, 16px);
|
||||
border: 1px solid rgba(127,127,127,0.22);
|
||||
border-radius: 16px;
|
||||
border-radius: var(--portal-card-radius, 16px);
|
||||
background: rgba(127,127,127,0.05);
|
||||
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
||||
}
|
||||
@@ -374,15 +447,15 @@ const prolongerLinks = [
|
||||
|
||||
.verbs-card h3{
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-size: var(--portal-card-title-size, 15px);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.verbs-card__definition,
|
||||
.verbs-card__example{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
font-size: var(--portal-card-text-size, 14px);
|
||||
line-height: var(--portal-card-text-lh, 1.5);
|
||||
opacity: .92;
|
||||
}
|
||||
|
||||
@@ -395,4 +468,50 @@ const prolongerLinks = [
|
||||
background: rgba(255,255,255,0.07);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 760px){
|
||||
.verbs-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
.verbs-cards{
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page #reading-follow){
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (max-width: 860px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
|
||||
:global(body.is-glossary-portal-page #reading-follow),
|
||||
:global(body.is-glossary-portal-page #reading-follow .reading-follow__inner){
|
||||
display: none !important;
|
||||
opacity: 0 !important;
|
||||
visibility: hidden !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
:global(body.is-glossary-portal-page){
|
||||
--followbar-h: 0px !important;
|
||||
--sticky-offset-px: calc(var(--sticky-header-h, 0px) + var(--page-gap, 12px)) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user