Archicratia/archicratie-edition
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish glossary home responsive aside and map density
All checks were successful
SMOKE / smoke (push) Successful in 15s
Details
CI / build-and-anchors (push) Successful in 43s
Details
CI / build-and-anchors (pull_request) Successful in 48s
Details

Browse Source
This commit is contained in:
Archicratia
2026-05-07 13:59:05 +02:00
parent 4bab188df7
commit 40ab10b8e8
3 changed files with 223 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
src/components/GlossaryHomeAside.astro
View File

@@ -192,120 +192,47 @@ const {
word-break: break-word;
}
@media (max-width: 860px){
.glossary-home-aside{
gap: 10px;
}
.glossary-home-aside__block{
border-radius: 14px;
}
.glossary-home-aside__block--intro{
padding: 12px;
}
.glossary-home-aside__title{
font-size: 19px;
line-height: 1.18;
}
.glossary-home-aside__meta{
margin-top: 6px;
font-size: 12px;
line-height: 1.32;
}
.glossary-home-aside__pills{
gap: 6px;
margin-top: 9px;
}
.glossary-home-aside__pill{
padding: 4px 9px;
font-size: 12px;
line-height: 1.28;
}
.glossary-home-aside__summary{
padding: 12px;
}
.glossary-home-aside__heading{
font-size: 17px;
line-height: 1.2;
}
.glossary-home-aside__panel{
padding: 0 12px 12px;
}
.glossary-home-aside__list li{
margin: 5px 0;
}
.glossary-home-aside__list a{
font-size: 14px;
line-height: 1.34;
}
.glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
display: none;
}
}
@media (max-width: 860px){
.glossary-home-aside__disclosure{
background: rgba(127,127,127,0.045);
}
.glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
border-bottom: 1px solid rgba(127,127,127,0.12);
}
}
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
@media (max-width: 980px){
.glossary-home-aside{
gap: 8px;
margin-bottom: 12px;
}
.glossary-home-aside__block{
border-radius: 12px;
border-radius: 13px;
}
.glossary-home-aside__block--intro{
padding: 10px 11px;
padding: 10px 12px;
}
.glossary-home-aside__title{
font-size: 16px;
line-height: 1.14;
font-size: 15px;
line-height: 1.15;
}
.glossary-home-aside__meta{
font-size: 11px;
line-height: 1.26;
margin-top: 5px;
display: none;
}
.glossary-home-aside__pills{
gap: 5px;
margin-top: 8px;
margin-top: 7px;
}
.glossary-home-aside__pill{
padding: 3px 8px;
font-size: 11px;
line-height: 1.2;
line-height: 1.18;
}
.glossary-home-aside__summary{
padding: 10px 11px;
padding: 9px 11px;
}
.glossary-home-aside__heading{
font-size: 15px;
line-height: 1.16;
font-size: 14px;
line-height: 1.15;
}
.glossary-home-aside__panel{
@@ -320,9 +247,80 @@ const {
font-size: 13px;
line-height: 1.28;
}
.glossary-home-aside__disclosure:not([open]) .glossary-home-aside__panel{
display: none;
}
}
@media (min-width: 861px){
@media (max-width: 980px){
.glossary-home-aside__disclosure{
background: rgba(127,127,127,0.045);
}
.glossary-home-aside__disclosure[open] .glossary-home-aside__summary{
border-bottom: 1px solid rgba(127,127,127,0.12);
}
}
@media (orientation: landscape) and (max-width: 920px) and (max-height: 520px){
.glossary-home-aside{
gap: 7px;
margin-bottom: 10px;
}
.glossary-home-aside__block{
border-radius: 12px;
}
.glossary-home-aside__block--intro{
padding: 9px 10px;
}
.glossary-home-aside__title{
font-size: 14px;
line-height: 1.12;
}
.glossary-home-aside__meta{
display: none;
}
.glossary-home-aside__pills{
gap: 4px;
margin-top: 6px;
}
.glossary-home-aside__pill{
padding: 2px 7px;
font-size: 10.5px;
line-height: 1.16;
}
.glossary-home-aside__summary{
padding: 8px 10px;
}
.glossary-home-aside__heading{
font-size: 13px;
line-height: 1.12;
}
.glossary-home-aside__panel{
padding: 0 10px 9px;
}
.glossary-home-aside__list li{
margin: 3px 0;
}
.glossary-home-aside__list a{
font-size: 12px;
line-height: 1.22;
}
}
@media (min-width: 981px){
.glossary-home-aside__summary{
cursor: default;
}
@@ -346,28 +344,32 @@ const {
<script is:inline>
(() => {
let wasCompact = null;
const syncMobileDisclosure = () => {
const mobile = window.matchMedia("(max-width: 860px)").matches;
const stackedLayout = window.matchMedia("(max-width: 980px)").matches;
const smallLandscape = window.matchMedia(
"(orientation: landscape) and (max-width: 920px) and (max-height: 520px)"
).matches;
const compact = mobile || smallLandscape;
const compact = stackedLayout || smallLandscape;
const enteringCompact = compact && wasCompact !== true;
document
.querySelectorAll(".glossary-home-aside__disclosure")
.forEach((el, index) => {
.forEach((el) => {
if (!(el instanceof HTMLDetailsElement)) return;
if (compact) {
if (!el.dataset.mobileInit) {
el.open = index === 0;
el.dataset.mobileInit = "true";
if (enteringCompact) {
el.open = false;
}
} else {
el.open = true;
}
});
wasCompact = compact;
};
if (document.readyState === "loading") {

115
src/components/GlossaryHomeHero.astro
View File

@@ -458,85 +458,86 @@ const {
}
}
/* =========================================================
Glossaire home — follow hero sans troncature
/* =========================================================
Glossaire home — états du hero sticky
========================================================= */
/*
Le follow du hero doit rester affiché, mais ne doit jamais
être traité comme une ligne compacte à ellipsis.
On neutralise donc localement les règles de compression :
nowrap, overflow hidden, text-overflow, line-clamp.
Principe :
- le follow peut respirer sans ellipsis brutal ;
- l’intro reste strictement clampée en mode collapsed ;
- l’intro ne redevient complète qu’en mode expanded ;
- mobile/tablette <= 860px reste neutralisé plus haut.
*/
.glossary-hero{
overflow: visible;
}
.glossary-hero-follow{
height: auto;
max-height: none;
max-width: min(100%, 34ch);
overflow: visible;
white-space: normal !important;
text-overflow: clip !important;
}
.glossary-hero-follow,
.glossary-hero-follow *{
min-width: 0;
}
.glossary-hero-follow h1,
.glossary-hero-follow p,
.glossary-hero-follow .glossary-hero__collapsible,
.glossary-hero-follow .glossary-hero__toggle{
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
display: block;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: unset !important;
white-space: normal;
text-overflow: clip;
line-height: 1.08;
}
:global(body.glossary-home-follow-on) .glossary-hero{
min-height: auto;
height: auto;
max-height: none;
overflow: visible;
}
:global(body.glossary-home-follow-on) .glossary-hero h1{
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
display: block;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: unset !important;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
:global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
display: block;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
-webkit-box-orient: unset !important;
/*
État collapsed :
l’intro DOIT rester compactée. Cette règle doit gagner contre
les anciennes règles anti-troncature du follow.
*/
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero p#glossary-hero-intro{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
max-height: calc(2 * 1.34em);
overflow: hidden;
white-space: normal;
text-overflow: clip;
}
@media (max-width: 760px){
:global(body.glossary-home-follow-on:not(.glossary-home-hero-expanded)) .glossary-hero__toggle{
display: inline-flex;
margin-top: 2px;
align-self: start;
}
/*
État expanded :
l’utilisateur a explicitement demandé à lire la suite,
donc l’intro redevient complète.
*/
:global(body.glossary-home-hero-expanded) .glossary-hero p#glossary-hero-intro{
display: block;
-webkit-line-clamp: unset;
line-clamp: unset;
-webkit-box-orient: unset;
max-height: none;
overflow: visible;
white-space: normal;
text-overflow: clip;
}
:global(body.glossary-home-hero-expanded) .glossary-hero__toggle{
display: none !important;
}
@media (min-width: 861px) and (max-width: 1240px){
.glossary-hero-follow{
max-height: none;
overflow: visible;
}
:global(body.glossary-home-follow-on) .glossary-hero h1,
:global(body.glossary-home-follow-on) .glossary-hero p#glossary-hero-intro{
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
overflow: visible !important;
max-width: min(100%, 36ch);
font-size: clamp(1.55rem, 3.1vw, 2.05rem);
line-height: 1.08;
}
}
</style>