Meilleures notes de bas de page

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.

---

La notion de "meilleur" est bien sûr subjective, mais le résultat est devant vos yeux.

Ce component imite les notes de bas de page personnalisées présentes dans SCP-4485.

Exemples :

Texte.Texte contenu dans une note de bas de page.
Texte.Texte contenu dans une note de bas de page. et plus de texte.
Texte.Texte contenu dans une note de bas de page.. Plus de texte.
Texte qui n'est pas contenu dans une note de bas de page.

Comment l'utiliser :

Mettez ça une seule fois dans votre article :

[[include component:betterfootnotes]]

Copiez la syntaxe uivante pour chaque note de bas de page :

[[span class="fnnum"]].[[/span]][[span class="fncon"]]]Texte contenu dans une note de bas de page.[[/span]]

Note :

- La classe span fnnum contient un point, car elle a besoin d'au moins un caractère (qui n'est pas un espace) pour être correctement interprétée.

- La couleur des numéros des notes de bas de page est personnalisable en utilisant ceci :

[[module CSS]]
:root {
--fnColor: METTRE LA COULEUR ICI;
}
[[/module]]

La valeur par défaut est #E6283C.

- Il n'y a pas de liste de notes de bas de page.

- Fonctionne avec Sigma-9, mais ne s'intègre peut-être pas aussi bien dans son esthétique que dans celle du BHL.

- Un grand merci à Woedenaz pour son sens aigu du design et à Placeholder McD pour m'avoir harcelé encouragé pour faire ce component.

---

Code source :

:root {
    --posX: calc(50% - 358px - 12rem);
}
 
/*--- Footnote Auto-counter --*/
#page-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    text-indent: calc(-1% - 0.1em);
    overflow: hidden;
    line-height: 83%;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative; top: -0.25em; font-size: 82%;
    padding: .15em calc(.21em - 0.4px) .12em calc(.11em - 1px);
    margin-left: -0.06em;
    margin-right: -0.25em;
    counter-increment: megacount;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.2;
    padding: 0.82rem;
    width: 10.3rem;
    background: white;
    border: 2px solid black;
    font-weight: initial;
    font-style: initial;
    text-align: initial;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s linear, right 0.3s cubic-bezier(.08,.72,.5,.94);
    z-index: 9;
}
.fnnum:hover + .fncon {
    opacity: 1;
    right: var(--posX);
}
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding-left: 0.32em; padding-right: 0.32em;
    padding-top: 0.18rem; padding-bottom: 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.3rem;
        left: calc(11% - 50px);
        width: 70%;
        transition: opacity 0.15s linear, left 0.3s cubic-bezier(.08,.72,.5,.94);
    }
    .fnnum:hover + .fncon {
        left: 11%;
     }
}