Quantumfootnotes

FERMATI SUBITO

Questa è una pagina template utilizzata dal sito della Fondazione SCP.

PER FAVORE, NON TOCCARE QUESTA PAGINA
SENZA IL PERMESSO DELLO STAFF

---

Quantum is subjective of course, but what you see is what you get.

Questo component, opera di QuantumCryptographer, è una variante di BetterFootnotes di EstrellaYoshte.

Esempi:

Testo.Testo in footnote.
Testo.Testo in footnote. ed altro testo.
Testo.Testo footnote.. Altro testo.
Testo non in footnote.

Esempi di resize automatico:

Breve.Lorem Ipsum.

Media.Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lunga.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Come usarlo:

Mettere questo a inizio pagina:

[[include :fondazionescp:component:quantumfootnotes]]

Copiare quanto segue per ogni footnote che si desidera mettere:

[[span class="fnnum"]].[[/span]][[span class="fncon"]]Text in footnote.[[/span]]

Note:

- Lo span fnnum class contiene un punto, dato che ha bisogno di almeno un carattere che non sia lo spazio vuoto per funzionare correttamente.

- Il colore del superscript della nota è customizzabile col seguente codice:

[[module CSS]]
:root {
--fnColor: COLORE QUI;
}
[[/module]]

Altrimenti, sarà di default come #E6283C.

- Non c'è alcuna lista finale di footnote, che può però essere creata manualmente.

---

Codice Sorgente:

/*--- Footnote Auto-counter --*/
#page-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    width: min-content;
    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: fixed;
    left: 25vw;
    line-height: 1.2;
    padding: 0.82rem;
    width: auto;
    margin-left: 5vw;
    margin-right: 7vw;
    background: white;
    color: black;
    border: 2px solid #666;
    font-weight: initial;
    font-style: initial;
    text-align: initial;
    pointer-events: none;
    opacity: 0;
    z-index: 9;
    bottom: calc(5% - 100px);
    transition: opacity 0.15s linear, bottom 0.3s cubic-bezier(.08,.72,.5,.94);
}
.fnnum:hover + .fncon {
    opacity: 1;
    bottom: 5%;
}
.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;
}
 
/* No-SideBar Media Query */
@media only screen and (max-width: 767px) {
   .fncon{
      left: 0;
   }
}