9kcon Boss Fight

Link to article: 9kcon Boss Fight.

Module Styles

• 
  @import url('https://fonts.bunny.net/css2?family=Jersey+10&display=swap');
  
  :root {
      --header-font: 'Sans Normalcy', 'Nanum Gothic', Arial, sans-serif;
      --hdh1-size-mob: 150%;
      --hdh2-size-mob: 110%;
      --header-title: "SCP Foundation";
      --header-subtitle: "STRUCTURES, CONSTRUCTS, PATTERNS";
      --scene-width: calc(150px + 35vw);
  }
  
  div.page-rate-widget-box .rate-points {
      border: none;
  }
  
  .fight,
  .fight-data {
      border: calc(0.03 * var(--scene-width)) ridge rgb(23, 23, 51);
      overflow: hidden;
      margin: 0 auto;
      line-height: 1.2;
  }
  
  .fight {
      width: var(--scene-width);
      aspect-ratio: 3 / 2;
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/bg.webp');
      background-size: contain;
      background-repeat: no-repeat;
      position: relative;
  }
  
  .hover-wrap {
      position: absolute;
      top: calc(0.1 * var(--scene-width));
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: space-between;
  }
  
  
  .fractal-hover,
  .trench-hover,
  .file-hover {
      opacity: 0;
      display: inline-block;
      height: 100%;
      width: 32%;
  
      color: aliceblue;
      text-align: center;
      font-family: "Jersey 10", Arial, Helvetica, sans-serif;
      font-size: calc(0.04 * var(--scene-width));
      text-shadow: calc(0.004 * var(--scene-width)) calc(0.004 * var(--scene-width)) black,
                             calc(-0.004 * var(--scene-width)) calc(-0.004 * var(--scene-width)) black,
                             calc(-0.004 * var(--scene-width)) calc(0.004 * var(--scene-width)) black,
                             calc(0.004 * var(--scene-width)) calc(-0.004 * var(--scene-width)) black,
                             0 0 20px black, 0 0 10px black;
  
      transition: opacity 0.3s ease-out;
  }
  
  :is(.fractal-hover,
  .trench-hover,
  .file-hover):hover {
      opacity: 1;
  }
  
  
  .fight-data {
      width: var(--scene-width);
      height: calc(0.2 * var(--scene-width));
      background-image: linear-gradient(to bottom, rgb(74, 140, 255), rgb(27, 27, 137));
  
      color: aliceblue;
      font-family: "Jersey 10", Arial, Helvetica, sans-serif;
      font-size: calc(0.06 * var(--scene-width));
      text-shadow: calc(0.008 * var(--scene-width)) calc(0.008 * var(--scene-width)) black;
      border-top: none !important;
  
      display: grid;
      grid-template-areas: "trench fractal"
                                          "trench file";
      grid-template-columns: 47% 1fr;
      grid-template-rows: 1fr 1fr;
  }
  
  .fight-data a {
      color: aliceblue;
  }
  
  .fight-data a:hover {
      text-decoration: underline;
  }
  
  .list-pages-box p {
      margin-block: 0;
  }
  
  .boss0 {
      grid-area: trench;
      font-size: 120%;
      border-right: calc(0.02 * var(--scene-width)) ridge aliceblue;
  }
  
  .boss1 {
      grid-area: fractal;
      border-bottom: calc(0.015 * var(--scene-width)) ridge aliceblue;
  }
  
  .boss2 {
      grid-area: file;
      font-size: 90%;
  }
  
  .boss0,
  .boss1,
  .boss2 {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      box-shadow: inset calc(0.006 * var(--scene-width)) calc(0.006 * var(--scene-width)) 0px black;
  }
  
  .hp-box {
      display: inline-block;
  }
  
  .hp-box.large {
      border: calc(0.012 * var(--scene-width)) ridge aliceblue;
      width: calc(0.15 * var(--scene-width));
      height: calc(0.045 * var(--scene-width));
      margin-bottom: calc(-0.02 * var(--scene-width));
  }
  
  .hp-box.small {
      border: calc(0.01 * var(--scene-width)) ridge aliceblue;
      width: calc(0.1 * var(--scene-width));
      height: calc(0.033 * var(--scene-width));
      margin-bottom: calc(-0.015 * var(--scene-width));
  }
  
  .hp-line {
      height: 100%;
      background-image: linear-gradient(to right, green, lightgreen);
  }
  
  .trench-wrap,
  .fractal-wrap,
  .file-wrap {
      position: absolute;
  }
  
  .trench,
  .fractal,
  .file {
      position: relative;
      width: 100%;
      height: 100%;
  }
  
  .trench0,
  .trench1,
  .trench2,
  .fractal0,
  .fractal1,
  .fractal1-shadow,
  .fractal2,
  .file0,
  .file1,
  .file1-shadow {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: contain;
      background-repeat: no-repeat;
  }
  
  .trench-wrap {
      top: 19%;
      left: 8%;
      right: 8%;
      bottom: 0;
  }
  
  .trench0 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench0.webp');
  }
  
  .trench1 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench1.webp');
      animation: sway 3s ease-in-out infinite;
  }
  
  .trench2 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench2.webp');
      animation: move 7s ease-in-out 0.5s infinite;
      mix-blend-mode: hard-light;
  }
  
  .fractal-wrap {
      top: 18%;
      left: 0;
      bottom: 0;
      right: 0;
  }
  
  .fractal0 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal0.webp');
      filter: saturate(3);
  }
  
  .fractal1 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal1.webp');
      animation: move 3s ease-in-out 1s infinite;
  }
  
  .fractal1-shadow {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal1-shadow.webp');
      animation: move 3s ease-in-out 1s infinite;
      mix-blend-mode: darken;
      filter: blur(5px) brightness(0.5);
  }
  
  .fractal2 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal2.webp');
      filter: saturate(7);
  }
  
  .file-wrap {
      top: 10%;
      left: 10%;
      right: 0;
      bottom: 0;
  }
  
  .file0 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file0.webp');
  }
  
  .file1 {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file1.webp');
      animation: move 4s ease-in-out infinite;
      filter: saturate(1.2) contrast(1.2);
  }
  
  .file1-shadow {
      background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file1-shadow.webp');
      animation: move 4s ease-in-out infinite;
      mix-blend-mode: darken;
      filter: blur(5px) brightness(0.8);
  }
  
  @keyframes sway {
      0% {
          transform: rotate(2deg);
      }
  
      50% {
          transform: rotate(-2deg);
      }
  
      100% {
          transform: rotate(2deg);
      }
  }
  
  @keyframes move {
      0% {
          transform: translateY(0%);
      }
  
      50% {
          transform: translateY(5%);
      }
  
      100% {
          transform: translateY(0%);
      }
  }
  

Inline Styles

• width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;

• width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;

• width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;

Includes

• :scp-wiki-cn:theme:black-highlighter-theme
• :scp-wiki-cn:theme:brokedown-database

CSS Classes

• fight

• trench-wrap

• trench

• trench0

• trench1

• trench2

• fractal-wrap

• fractal

• fractal0

• fractal1-shadow

• fractal1

• fractal2

• file-wrap

• file

• file0

• file1-shadow

• file1

• hover-wrap

• fractal-hover

• trench-hover

• file-hover

• fight-data

• boss0

• hp-box

• large

• hp-line

• boss1

• hp-box

• small

• hp-line

• boss2

• hp-box

• small

• hp-line

Page Source

[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[include :scp-wiki-cn:theme:brokedown-database]]

[[=]]
[[module Rate]]
[[/=]]

@@@@
@@@@

[[div_ class="fight"]]
        [[div_ class="trench-wrap"]]
            [[div_ class="trench"]]
                [[div_ class="trench0"]]
                [[/div]]
                [[div_ class="trench1"]]
                [[/div]]
                [[div_ class="trench2"]]
                [[/div]]
            [[/div]]
        [[/div]]

        [[div_ class="fractal-wrap"]]
            [[div_ class="fractal"]]
                [[div_ class="fractal0"]]
                [[/div]]
                [[div_ class="fractal1-shadow"]]
                [[/div]]
                [[div_ class="fractal1"]]
                [[/div]]
                [[div_ class="fractal2"]]
                [[/div]]
            [[/div]]
        [[/div]]

        [[div_ class="file-wrap"]]
            [[div_ class="file"]]
                [[div_ class="file0"]]
                [[/div]]
                [[div_ class="file1-shadow"]]
                [[/div]]
                [[div_ class="file1"]]
                [[/div]]
            [[/div]]
        [[/div]]

        [[div_ class="hover-wrap"]]
                [[div_ class="fractal-hover"]]
                "...Now she knew where god resided, and she was destined to meet it some day."
                [[/div]]
                [[div_ class="trench-hover"]]
                You look at those eyes, you know that he loves this shit.
                [[/div]]
                [[div_ class="file-hover"]]
                You know that systems are just somebody else's ideal.
                [[/div]]
        [[/div]]

[[/div]]




[[div_ class="fight-data"]]


[[div_ class="boss0"]]
[[module ListPages separate="no" fullname="scp-9000" limit="1" category="*"]]

[[[scp-9000 |The Trench]]]

[[div class="hp-box large"]]
[[div class="hp-line" style="width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;"]]
[[/div]]
[[/div]] [[size 70%]][[#expr (%%rating_votes%%+%%rating%%)/2]] / %%rating_votes%%[[/size]]

[[/module]]
[[/div]]




[[div_ class="boss1"]]
[[module ListPages separate="no" fullname="scp-9001" limit="1" category="*"]]

[[[scp-9001 |Fractal]]] [[div class="hp-box small"]]
[[div class="hp-line" style="width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;"]]
[[/div]]
[[/div]]  [[size 65%]][[#expr (%%rating_votes%%+%%rating%%)/2]] / %%rating_votes%%[[/size]]

[[/module]]
[[/div]]


[[div_ class="boss2"]]
[[module ListPages separate="no" fullname="scp-9900" limit="1" category="*"]]

[[[scp-9900 |Single File]]] [[div class="hp-box small"]]
[[div class="hp-line" style="width: [[#expr (%%rating_votes%%+%%rating%%)/2/%%rating_votes%%*100]]%;"]]
[[/div]]
[[/div]]  [[size 60%]][[#expr (%%rating_votes%%+%%rating%%)/2]] / %%rating_votes%%[[/size]]

[[/module]]
[[/div]]



[[/div]]






[[module CSS]]

@import url('https://fonts.bunny.net/css2?family=Jersey+10&display=swap');

:root {
    --header-font: 'Sans Normalcy', 'Nanum Gothic', Arial, sans-serif;
    --hdh1-size-mob: 150%;
    --hdh2-size-mob: 110%;
    --header-title: "SCP Foundation";
    --header-subtitle: "STRUCTURES, CONSTRUCTS, PATTERNS";
    --scene-width: calc(150px + 35vw);
}

div.page-rate-widget-box .rate-points {
    border: none;
}

.fight,
.fight-data {
    border: calc(0.03 * var(--scene-width)) ridge rgb(23, 23, 51);
    overflow: hidden;
    margin: 0 auto;
    line-height: 1.2;
}

.fight {
    width: var(--scene-width);
    aspect-ratio: 3 / 2;
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/bg.webp');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
}

.hover-wrap {
    position: absolute;
    top: calc(0.1 * var(--scene-width));
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
}


.fractal-hover,
.trench-hover,
.file-hover {
    opacity: 0;
    display: inline-block;
    height: 100%;
    width: 32%;

    color: aliceblue;
    text-align: center;
    font-family: "Jersey 10", Arial, Helvetica, sans-serif;
    font-size: calc(0.04 * var(--scene-width));
    text-shadow: calc(0.004 * var(--scene-width)) calc(0.004 * var(--scene-width)) black,
                           calc(-0.004 * var(--scene-width)) calc(-0.004 * var(--scene-width)) black,
                           calc(-0.004 * var(--scene-width)) calc(0.004 * var(--scene-width)) black,
                           calc(0.004 * var(--scene-width)) calc(-0.004 * var(--scene-width)) black,
                           0 0 20px black, 0 0 10px black;

    transition: opacity 0.3s ease-out;
}

:is(.fractal-hover,
.trench-hover,
.file-hover):hover {
    opacity: 1;
}


.fight-data {
    width: var(--scene-width);
    height: calc(0.2 * var(--scene-width));
    background-image: linear-gradient(to bottom, rgb(74, 140, 255), rgb(27, 27, 137));

    color: aliceblue;
    font-family: "Jersey 10", Arial, Helvetica, sans-serif;
    font-size: calc(0.06 * var(--scene-width));
    text-shadow: calc(0.008 * var(--scene-width)) calc(0.008 * var(--scene-width)) black;
    border-top: none !important;

    display: grid;
    grid-template-areas: "trench fractal"
                                        "trench file";
    grid-template-columns: 47% 1fr;
    grid-template-rows: 1fr 1fr;
}

.fight-data a {
    color: aliceblue;
}

.fight-data a:hover {
    text-decoration: underline;
}

.list-pages-box p {
    margin-block: 0;
}

.boss0 {
    grid-area: trench;
    font-size: 120%;
    border-right: calc(0.02 * var(--scene-width)) ridge aliceblue;
}

.boss1 {
    grid-area: fractal;
    border-bottom: calc(0.015 * var(--scene-width)) ridge aliceblue;
}

.boss2 {
    grid-area: file;
    font-size: 90%;
}

.boss0,
.boss1,
.boss2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: inset calc(0.006 * var(--scene-width)) calc(0.006 * var(--scene-width)) 0px black;
}

.hp-box {
    display: inline-block;
}

.hp-box.large {
    border: calc(0.012 * var(--scene-width)) ridge aliceblue;
    width: calc(0.15 * var(--scene-width));
    height: calc(0.045 * var(--scene-width));
    margin-bottom: calc(-0.02 * var(--scene-width));
}

.hp-box.small {
    border: calc(0.01 * var(--scene-width)) ridge aliceblue;
    width: calc(0.1 * var(--scene-width));
    height: calc(0.033 * var(--scene-width));
    margin-bottom: calc(-0.015 * var(--scene-width));
}

.hp-line {
    height: 100%;
    background-image: linear-gradient(to right, green, lightgreen);
}

.trench-wrap,
.fractal-wrap,
.file-wrap {
    position: absolute;
}

.trench,
.fractal,
.file {
    position: relative;
    width: 100%;
    height: 100%;
}

.trench0,
.trench1,
.trench2,
.fractal0,
.fractal1,
.fractal1-shadow,
.fractal2,
.file0,
.file1,
.file1-shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.trench-wrap {
    top: 19%;
    left: 8%;
    right: 8%;
    bottom: 0;
}

.trench0 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench0.webp');
}

.trench1 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench1.webp');
    animation: sway 3s ease-in-out infinite;
}

.trench2 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/trench2.webp');
    animation: move 7s ease-in-out 0.5s infinite;
    mix-blend-mode: hard-light;
}

.fractal-wrap {
    top: 18%;
    left: 0;
    bottom: 0;
    right: 0;
}

.fractal0 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal0.webp');
    filter: saturate(3);
}

.fractal1 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal1.webp');
    animation: move 3s ease-in-out 1s infinite;
}

.fractal1-shadow {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal1-shadow.webp');
    animation: move 3s ease-in-out 1s infinite;
    mix-blend-mode: darken;
    filter: blur(5px) brightness(0.5);
}

.fractal2 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/fractal2.webp');
    filter: saturate(7);
}

.file-wrap {
    top: 10%;
    left: 10%;
    right: 0;
    bottom: 0;
}

.file0 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file0.webp');
}

.file1 {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file1.webp');
    animation: move 4s ease-in-out infinite;
    filter: saturate(1.2) contrast(1.2);
}

.file1-shadow {
    background-image: url('https://scp-wiki.wikidot.com/local--files/art:9kcon-boss-fight/file1-shadow.webp');
    animation: move 4s ease-in-out infinite;
    mix-blend-mode: darken;
    filter: blur(5px) brightness(0.8);
}

@keyframes sway {
    0% {
        transform: rotate(2deg);
    }

    50% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

@keyframes move {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(5%);
    }

    100% {
        transform: translateY(0%);
    }
}

[[/module]]