Mejores Notas al Pie

NO EDITES ESTO ÒwÓ

Esta es una página plantilla utilizada internamente por la Wiki.

NO TOQUES ESTA PÁGINA
SIN PERMISO DEL STAFF Y/O AUTOR


Mejor es subjetivo, por supuesto, pero lo que ves es lo que obtienes.

Esto es un componente que imita las notas al pie de página personalizadas que se ven en SCP-4485.

Ejemplos:

Text.Texto en nota al pie.
Text.Texto en nota al pie. y más texto.
Text.Texto en nota al pie.. Más texto. Texto no en una nota al pie.

Cómo usar:

Pon esto una vez:

[[include component:betterfootnotes]]

Copia la siguiente estructura para cada nota al pie:

[[span class="fnnum"]].[[/span]][[span class="fncon"]]Texto en nota al pie.[[/span]]

Nota:

- La clase fnnum contiene un punto ya que necesita al menos un carácter que no sea un espacio para posicionarse correctamente

- El color del superíndice de la nota al pie se personaliza con lo siguiente:

[[module CSS]]
:root {
--fnColor: COLOR AQUÍ;
}
[[/module]]

Si no, el color estándar será #E6283C.

- No hay una lista de notas a pie de página.

- Funciona con Sigma-9, pero podría no verse tan fluído.

- Agradecimientos especiales a WoedenazWoedenaz por su sentido del diseño impecable, y a Placeholder McDPlaceholder McD por wearme animarme a hacer esto.


Código Fuente:

:root {
    --posX: calc(50% - 358px - 12rem);
    --fnTransition: 0.3s;
    --fnLinger: 0.15s;
    --fnInteract: calc(var(--fnTransition) + var(--fnLinger));
}
 
/*--- Footnote Auto-counter --*/
#main-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    width: max-content;
    text-indent: -0.285ch;
    vertical-align: super;
    line-height: 80%;
    word-break: initial;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative;
    font-size: 80%;
    padding: .15em .1em .15em 0;
    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: normal;
    text-align: initial;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    transition:
        opacity 0.15s linear var(--fnLinger),
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
        visibility 0.01s linear var(--fnInteract);
}
.fnnum:hover + .fncon, .fncon:hover {
    opacity: 1;
    right: var(--posX);
    visibility: visible;
    transition:
        opacity 0.15s linear,
        right var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
}
 
.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: 0.18rem 0.32em 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 var(--fnLinger),
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger),
            visibility 0.01s linear var(--fnInteract);
    }
    .fnnum:hover + .fncon, .fncon:hover {
        left: 11%;
        transition:
            opacity 0.15s linear,
            left var(--fnTransition) cubic-bezier(.08,.72,.5,.94);
    }
}
Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License