BetterFootnotes

HOLD THY HORSES

This is a template page used internally by the Topiary.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU

---

On the SCP Wiki

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

This is a component that mimics the custom footnotes as seen in SCP-4485.

Examples:

Text.Text in footnote.
Text.Text in footnote. and more text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text not in footnote.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.
Text.Text in footnote.. More text.

How to use:

Put this in once:

[[include :scp-wiki:component:betterfootnotes]]

Copy the following structure for each footnote:

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

Note:

- The fnnum span class contains a period, as it needs at least one non-space character to properly parse.

- The color of the footnote superscript is customizable with the following:

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

Otherwise defaults to #E6283C.

- There is no bottom footnote list.

- Works with Sigma-9, but might not be as seamless.

- Special thanks to Woedenaz for their impeccable design sense, and Placeholder McD for pestering encouraging me to make this.

---

Source Code:

: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;
}
.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%;
     }
}