better capsule (aka footnotes) positionning

This commit is contained in:
2026-07-08 14:47:55 +02:00
parent 015e3654fe
commit e2f4c717e6
4 changed files with 103 additions and 21 deletions

View File

@@ -750,21 +750,69 @@ footer[role="contentinfo"]{
// | |_ / _ \ / _ \| __| '_ \ / _ \| __/ _ \/ __|
// | _| (_) | (_) | |_| | | | (_) | || __/\__ \
// |_| \___/ \___/ \__|_| |_|\___/ \__\___||___/
div.footnote__citations-wrapper{
display: inline;
.footnote__citation{
display: inline;
text-decoration: underline;
text-decoration-style: dashed;
cursor: pointer;
.footnote__citation{
text-decoration: underline;
text-decoration-style: dashed;
cursor: pointer;
}
span.footnote-link{
display: inline-block;
$icon_wh:1em;
width: $icon_wh; height: $icon_wh;
text-indent: $icon_wh * 2;
overflow: hidden;
vertical-align:baseline;
aside.footnote-content{
display:none;
background-color: $rose;
// border: 1px solid red;
mask-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
&.forme-pyramide{
mask-image: url('/themes/custom/mathallo/assets/img/formes/pyramide.svg');
}
&.forme-prct{
mask-image: url('/themes/custom/mathallo/assets/img/formes/prct.svg');
}
&.forme-pi{
mask-image: url('/themes/custom/mathallo/assets/img/formes/pi.svg');
}
&.forme-infinite{
mask-image: url('/themes/custom/mathallo/assets/img/formes/infinite.svg');
}
&.forme-supeg{
mask-image: url('/themes/custom/mathallo/assets/img/formes/supeg.svg');
}
&.forme-cone{
mask-image: url('/themes/custom/mathallo/assets/img/formes/cone.svg');
}
&.forme-croissant{
mask-image: url('/themes/custom/mathallo/assets/img/formes/croissant.svg');
}
&.forme-cube{
mask-image: url('/themes/custom/mathallo/assets/img/formes/cube.svg');
}
&.forme-diamant{
mask-image: url('/themes/custom/mathallo/assets/img/formes/diamant.svg');
}
&.forme-cylindre{
mask-image: url('/themes/custom/mathallo/assets/img/formes/cylindre.svg');
}
}
}
// template.footnote-content{
// display:none;
// }
}
.fn-modale{
@include card;
// display: none;
opacity: 0;
transition: opacity 0.25s ease-in-out;
// transition-delay: ;
position: absolute;
@@ -773,6 +821,9 @@ aside.footnote-content{
max-width: 40em;
padding:1em 1.5em 1em 1em;
border: 1px dashed $bleu_site;
margin: 0;
opacity: 0;
&.visible{
// display: block;
opacity: 1;