V173 - CONTAINMENT BREACH

Link to article: V173 - CONTAINMENT BREACH.

Module Styles

•  :root {
      /* = THESE VARIABLES MAY BE CHANGED = */
      --accentColor: hsl(354, 90%, 45%);
      --accentColorLite: hsla(354, 90%, 45%, .5);
      --hue: 325deg;
   
      --titleColor: var(--bgColor);
      --subtitleColor: var(--bgColor);
   
      --bgColor: #FFFFFF;
      background: var(--bgColor);
      --fgColor: #F5F5F5;
      --gradientColor: hsla(354, 90%, 45%, 1);
      /* == */
   
      /* = THESE VARIABLES SHOULD NOT BE CHANGED = */
      --tint: calc(var(--hue) - 40deg);
   
      --alphaColor: hsl(0, 0%, 100%);
      --keyColor: hsl(0, 0%, 5%);
      --bright-red: hsl(360, 89%, 62%);
      --strong-lime-green: hsl(120, 80%, 40%);
      --dark-grayish-blue: hsl(212, 15%, 63%);
   
      --textColorHigh: var(--textColor);
      --textColorMid: var(--textColorAlt);
      --textColorLow: hsla(0, 0%, 0%, .68);
      --textColorIdle: hsla(0, 0%, 0%, .34);
      /* == */
   
      /* = DEPRECATED = */
      --textColor: hsla(0, 0%, 0%, .8);
      --textColorAlt: hsla(0, 0%, 0%, .74);
      /* == */
   
      /* = LOGO = */
      --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png);
   
      /* = FONTS = */
      --header-font: "Montserrat", sans-serif;
      --body-font: "Inter", sans-serif;
      --glyphs: "case", "ss01", "ss04";
      --script-font: "Comic Neue", cursive;
   
      /* = MISCELLANEOUS = */
      /**
       *    Courtesy of EstrellaYoshte
      **/
   
      --side-bar-width: 17em;
      --content-wrap-width: 1080px;
      scroll-behavior: smooth;
      scrollbar-color: var(--accentColor) var(--fgColor);
  }
   
   body {
      accent-color: var(--gradientColor);
      color: var(--textColor);
      background-color: var(--bgColor);
      background-image:
         linear-gradient(
          var(--gradientColor) 0 90px,
          var(--bgColor) 225px 100%);
      background-repeat: no-repeat;
   
      font-family: var(--body-font);
      font-size: 15px;
      overflow-wrap: break-word;
      text-rendering: optimizeLegibility;
  }
   #top-bar,
   #top-bar a {
      color: var(--bgColor);
      transition: 0;
  }
  
  /* == LOGIN == */
   
   #login-status {
      top: 1.1em;
      right: initial;
   
      color: var(--bgColor);
      z-index: 1;
  }
   
   @media (max-width: 767px) {
       #login-status{
          top: 0;
          right: 0;
   
          z-index: 20;
      }
  }
   
   #login-status a {
      color: var(--bgColor);
  }
   
   #login-status ul a {
      color: var(--textColorAlt);
      background: var(--fgColor);
  }
   
   #login-status ul a:hover {
      color: var(--accentColor);
      background: var(--bgColor);
  }
   
   @media (max-width: 767px) {
       #header .printuser{
          font-size: 0;
      }
  }
   
   .printuser a {
      margin: 0;
  }
   
   .printuser img.small {
      width: 18px;
      height: 18px;
      padding: 1px 4px 0 0;
   
      background-image: none !important;
  }
   
   @media (max-width: 767px) {
       #header .printuser img.small{
          transform: translate(0, 4px);
      }
  }
   
   #my-account {
      display: none;
  }
   
   #account-topbutton {
      padding: 0 3px;
   
      border-color: var(--bgColor);
   
      font-size: 1.067em;
  }
   
   @media (max-width: 767px) {
       #account-topbutton {
          margin: 0 0 0 5px;
      }
  }
   
   #account-topbutton:hover {
      color: var(--accentColor);
      background: var(--bgColor);

Inline Styles

• display: none;

• border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;

• border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;

• width:100%;height:100%

Includes

• :scp-wiki:theme:flopstyle-dark [info]
• :scp-wiki:info:start [info]
• :scp-wiki:component:ratio-bar [info]
• :scp-wiki:info:end [info]
• :scp-wiki:component:license-box [info]
• :scp-wiki:component:license-box-end [info]

CSS Classes

• meta-title

• sidebox

• authorbox

Page Source

[[div class="meta-title"]]
V173 - //CONTAINMENT BREACH//
[[/div]]

[[div style="display: none;"]]
[[include :scp-wiki:theme:flopstyle-dark]]
[[/div]]

[[module CSS]]
 :root {
    /* = THESE VARIABLES MAY BE CHANGED = */
    --accentColor: hsl(354, 90%, 45%);
    --accentColorLite: hsla(354, 90%, 45%, .5);
    --hue: 325deg;
 
    --titleColor: var(--bgColor);
    --subtitleColor: var(--bgColor);
 
    --bgColor: #FFFFFF;
    background: var(--bgColor);
    --fgColor: #F5F5F5;
    --gradientColor: hsla(354, 90%, 45%, 1);
    /* == */
 
    /* = THESE VARIABLES SHOULD NOT BE CHANGED = */
    --tint: calc(var(--hue) - 40deg);
 
    --alphaColor: hsl(0, 0%, 100%);
    --keyColor: hsl(0, 0%, 5%);
    --bright-red: hsl(360, 89%, 62%);
    --strong-lime-green: hsl(120, 80%, 40%);
    --dark-grayish-blue: hsl(212, 15%, 63%);
 
    --textColorHigh: var(--textColor);
    --textColorMid: var(--textColorAlt);
    --textColorLow: hsla(0, 0%, 0%, .68);
    --textColorIdle: hsla(0, 0%, 0%, .34);
    /* == */
 
    /* = DEPRECATED = */
    --textColor: hsla(0, 0%, 0%, .8);
    --textColorAlt: hsla(0, 0%, 0%, .74);
    /* == */
 
    /* = LOGO = */
    --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aflopstyle-dark/alt_logo_bw.png);
 
    /* = FONTS = */
    --header-font: "Montserrat", sans-serif;
    --body-font: "Inter", sans-serif;
    --glyphs: "case", "ss01", "ss04";
    --script-font: "Comic Neue", cursive;
 
    /* = MISCELLANEOUS = */
    /**
     *    Courtesy of EstrellaYoshte
    **/
 
    --side-bar-width: 17em;
    --content-wrap-width: 1080px;
    scroll-behavior: smooth;
    scrollbar-color: var(--accentColor) var(--fgColor);
}
 
 body {
    accent-color: var(--gradientColor);
    color: var(--textColor);
    background-color: var(--bgColor);
    background-image:
       linear-gradient(
        var(--gradientColor) 0 90px,
        var(--bgColor) 225px 100%);
    background-repeat: no-repeat;
 
    font-family: var(--body-font);
    font-size: 15px;
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
}
 #top-bar,
 #top-bar a {
    color: var(--bgColor);
    transition: 0;
}

/* == LOGIN == */
 
 #login-status {
    top: 1.1em;
    right: initial;
 
    color: var(--bgColor);
    z-index: 1;
}
 
 @media (max-width: 767px) {
     #login-status{
        top: 0;
        right: 0;
 
        z-index: 20;
    }
}
 
 #login-status a {
    color: var(--bgColor);
}
 
 #login-status ul a {
    color: var(--textColorAlt);
    background: var(--fgColor);
}
 
 #login-status ul a:hover {
    color: var(--accentColor);
    background: var(--bgColor);
}
 
 @media (max-width: 767px) {
     #header .printuser{
        font-size: 0;
    }
}
 
 .printuser a {
    margin: 0;
}
 
 .printuser img.small {
    width: 18px;
    height: 18px;
    padding: 1px 4px 0 0;
 
    background-image: none !important;
}
 
 @media (max-width: 767px) {
     #header .printuser img.small{
        transform: translate(0, 4px);
    }
}
 
 #my-account {
    display: none;
}
 
 #account-topbutton {
    padding: 0 3px;
 
    border-color: var(--bgColor);
 
    font-size: 1.067em;
}
 
 @media (max-width: 767px) {
     #account-topbutton {
        margin: 0 0 0 5px;
    }
}
 
 #account-topbutton:hover {
    color: var(--accentColor);
    background: var(--bgColor);
[[/module]]


[[include :scp-wiki:info:start]]
[[div class="sidebox"]]
[[div style="border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;"]]
[[size 50%]]@@ @@[[/size]]
[[include :scp-wiki:component:ratio-bar pie=--]]
[[size 5%]]@@ @@[[/size]]
[[/div]]
[[/div]]
[[div class="authorbox"]]
[[div style="border:1px solid #000000; border-radius:3px; background-color:#FFFFFF;"]]
[[size 50%]]@@ @@[[/size]]
[[=]]
+++ Critique Credit
-----
My **brother**, **my wife**, and my **music-performing friend**.

And everyone in the discussion threads!
[[/=]]
[[size 5%]]@@ @@[[/size]]
[[/div]]
[[/div]]
**[https://scp-wiki.wikidot.com/art:v173-containment-breach V173 - CONTAINMENT BREACH]**
**Author:** [[*user V173]]
//I'm a Christian who makes stuff and loves his wife.//
-----
Made it as a little project by myself a few months ago and forgot I could actually add it to the site. Not my proudest work; when it comes on in my own playlists, I skip over it. Though I thought I'd post it anyway, since it's at least a cool novelty that I made a song, I guess. Plus, you get my spinning PFP animation as a bonus.

My self-taught, guitar-shredding brother said that it was "not bad" for my first song, especially considering I have no prior experience making music or music theory in general.

In case you were curious, I use this recolor of Flopstyle: Dark because I much prefer the color scheme of Sigma-10. Additionally, Flopstyle: Lite, to my understanding, doesn't have as many features as Flopstyle: Dark and I //hate// how Black Highlighter looks.

I've got a new (better) song on the way soon.
[[include :scp-wiki:info:end]]

[[html]]
<video style="width:100%;height:100%" controls>
<source src="http://scp-wiki.wikidot.com/local--files/art:v173-containment-breach/V173%20-%20CONTAINMENT%20BREACH.mp4" type="video/mp4">
</video>
[[/html]]

[[include :scp-wiki:component:license-box
|author=V173]]
> **Filename:** V173 - CONTAINMENT BREACH.mp4
> **Author:** V173
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-wiki.wikidot.com/art:v173-containment-breach
[[include :scp-wiki:component:license-box-end]]