SCP-6689

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

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

Con đường phía trước là nơi để bạn đi.

Nó chắc chắn sẽ dẫn tới đâu đó: từ nơi này đến nơi khác.

Bạn đặt niềm tin của mình vào những người đi trước.

Sau cùng thì, việc bước đi trên con đường này, cũng là do tự bạn quyết định mà thôi.

‡ Giấy Phép / Ghi Công

Trích dẫn:

"SCP-6689" bởi DodoDevil, từ Wiki SCP.
Nguồn: http://www.scp-wiki.wikidot.com/scp-6689.

Dịch bởi Welpermander, từ Wiki SCP-VN.
Nguồn bản dịch: http://scp-vn.wikidot.com/scp-6689.

Xuất bản dưới giấy phép CC-BY-SA

Để biết thêm thông tin, xem Hướng Dẫn Giấy Phép.
Hiện Giấy Phép

Tên file: UniPath.gif
Tên: Triple-Spiral-Labyrinth-animated-2
Tác giả: AnonMoos
Giấy phép: Public Domain
Nguồn: https://commons.wikimedia.org/wiki/File:Triple-Spiral-Labyrinth-animated-2.gif

Tên file: CircleMaze-Complex.png
Tên: Circle Maze
Tác giả: FunBlocks
Giấy phép: Creative Commons Attribution-Share Alike 3.0
Nguồn: https://commons.wikimedia.org/wiki/File:Circle_Maze.png

Tên file: Bird3.png
Tên: Ruit met een vogel op een tak
Nguồn: Ẩn danh
Giấy phép: Public Domain
Nguồn: http://hdl.handle.net/10934/RM0001.COLLECT.54033

Tên file: Maze.png
Tên: Ordinary]-e-[
Tác giả: ⊙ ☂︎♙₪୬〰⋀ℵ⊃△ ⊙
Giấy phép: Attribution 2.0 Generic (CC BY 2.0)
Nguồn: https://www.flickr.com/photos/chrstphre/5915885385/

Tên file: Garden-4.png
Tên: Schelpen
Tác giả: Onchi Kôshirô
Giấy phép: Public Domain
Nguồn: http://hdl.handle.net/10934/RM0001.COLLECT.47590

Tên file: Dennenbos
Tên: forest.png
Tác giả: Maurits van der Valk
Giấy phép: Public Domain
Nguồn: http://hdl.handle.net/10934/RM0001.COLLECT.304557

Tên file: Path2.png
Tên: Jongen loopt over een bergpad
Tác giả: Willem Wenckebach
Giấy phép: Public Domain
Nguồn: http://hdl.handle.net/10934/RM0001.COLLECT.638878

Tên file: Corn.png
Tên: The Unicorn in Captivity
Tác giả: Không rõ tác giả
Giấy phép: Public Domain
Nguồn: https://commons.wikimedia.org/wiki/File:The_Unicorn_in_Captivity_-_Google_Art_Project.jpg

Tên file: O5-Out.png
Tên: Logo.png
Tác giả: Không rõ
Giấy phép: CC-BY-SA 3.0
Nguồn: https://scp-vn.wikidot.com/theme:the-way-out

Tên file: Dots!.gif
Tên: Dots!
Tác giả: RIDC NeuroMat
Giấy phép: Creative Commons BY-SA 4.0
Nguồn: https://commons.wikimedia.org/wiki/File:Izhikevich_-_Low_Resolution.gif

Tên file: Distort.jpg
Tên: Le transformisme
Tác giả: Louis Ducos du Hauron
Giấy phép: Public Domain
Nguồn: http://hdl.handle.net/10934/RM0001.COLLECT.694840

Để biết thêm thông tin về nội dung trên wiki, ghé thăm Danh Sách Giấy Phép.