더 좋은 각주

잠깐 정지!!

SCP 위키 내부에서 사용되는 템플릿 페이지입니다.

운영진의 허가없이
이 페이지를 만지지 마세요

---

• 

  close

  정보

  ---

  X

  더 좋은 각주
  원작: https://scp-wiki.wikidot.com/component:betterfootnotes
  저자: EstrellaYoshte
  역자: Meiden

  
  

더 좋다는 건 물론 주관적인 감상이지만, 보이는 그대로의 각주입니다.

SCP-4485에 나온 커스텀 각주를 흉내내는 구성요소입니다.

예시:

텍스트.각주 안의 텍스트.
텍스트.각주 안의 텍스트. 그리고 더 많은 텍스트.
텍스트.각주 안의 텍스트.. 더 많은 텍스트.
각주 바깥 텍스트.

사용법:

아래 내용을 먼저 한번만 넣어주세요.

[[include :scpko:component:betterfootnotes]]

각주를 넣을 때마다 아래와 같은 구조를 사용하세요.

[[span class="fnnum"]].[[/span]][[span class="fncon"]]각주 안 텍스트.[[/span]]

기타사항:

- fnnum span class가 제대로 동작하려면 공백이 아닌 글자가 하나 이상 있어야 하기 때문에 온점이 들어갑니다.

- 각주 윗첨자의 색깔은 아래와 같이 설정할 수 있습니다.

[[module CSS]]
:root {
--fnColor: 색상코드;
}
[[/module]]

설정하지 않을 경우 기본값은 #E6283C입니다.

- 하단 각주 목록은 없습니다.

- 시그마-9와 호환 가능하지만 이만큼 매끄럽게 작동하지는 않을지도 모릅니다.

- 흠잡을 데 없는 디자인 센스를 가진 Woedenaz와 제가 이걸 만들게끔 들볶은 독려해준 Placeholder McD에게 특별한 감사를 전합니다.

---

소스 코드:

: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);
    }
}