Class Header Source

HOLD THY HORSES

This is a template page used internally by the Topiary.

PLEASE DO NOT TOUCH THIS PAGE
WITHOUT STAFF PERMISSION
UwU

---

[[module css]]
/* CLASSIFICATION HEADER */
 div.classification-header{
   display: flex;
   height: 5em;
   justify-content: center;
     color: rgb(12, 12, 12);
}
 .classification-header span{
     word-break: unset;
}
 div.classification-header > div{
   flex-basis: 50%;
     width: 50%;
     max-width: 50%;
}
 div.classification-header div.side-left{
   display: flex;
   flex-direction: column;
   justify-content: center;
     font-size: 125%;
     text-transform: uppercase;
}
 div.classification-header div.side-right{
   display: flex;
   justify-content: flex-end;
     font-size: 125%;
     font-weight: 900;
     text-transform: uppercase;
     padding-left: .5em;
}
 div.side-left > div > span:nth-child(1){
     font-weight: 900;
     color: {$class-text-color};
}
 div.side-left > div:nth-child(2){
     line-height: 1.4em;
     color: {$altbody-text-color};
}
 div.side-left > div:nth-child(2) > span:nth-child(1){
     display: inline-block;
     height: 1.4em;
}
 div.side-right > div.clearance-container{
   display: flex;
   flex-direction: row-reverse;
   align-self: center;
     transform: skew(15deg);
     padding: 0 .5em 0 .25em;
     height: 100%;
}
 div.side-right > div.leveltext-container{
   display: flex;
   flex-direction: column;
   align-self: center;
   justify-content: center;
     line-height: 1.4em;
     height: 100%;
     text-align: right;
     color: {$class-text-color};
}
 div.side-right > div.clearance-container > div.clearance{
     width: 0.5em;
     height: 100%;
     margin: 0 .1em;
     overflow: hidden;
     background: {$clearance-bg-color};
}
/* CLEARANCE BARS */
 div.side-right > div.clearance-container > div.clearance.full{
     opacity: 1;
}
 div.side-right > div.clearance-container > div.clearance.half{
     opacity: 0.5;
}
 div.side-right > div.clearance-container > div.clearance.none{
     opacity: 0;
     display: none;
}
/* MOBILE MEDIA FILTER */
 @media (max-width: 767px){
     div.classification-header{ height: 5em; }
     div.classification-header div.side-left,
     div.classification-header div.side-right{ font-size: 110%; }
}
[[/module]]

[[div_ class="classification-header"]]
  [[div_ class="side-left"]]
    [[div_ ]]
[[span]]Item Number:[[/span]] [[span style="color: {$altbody-text-color};"]]SCP-{$item-num}[[/span]]
    [[/div]]
    [[div_ ]]
[[span]]Containment Class:[[/span]] [[span style="color: {$altbody-text-color};"]]{$cont-class}[[/span]]
    [[/div]]
  [[/div]]
  [[div_ class="side-right"]]
    [[div_ class="clearance-container"]]
      [[div_ class="clearance {$clearance-one}"]]
      [[/div]]
      [[div_ class="clearance {$clearance-two}"]]
      [[/div]]
      [[div_ class="clearance {$clearance-three}"]]
      [[/div]]
      [[div_ class="clearance {$clearance-four}"]]
      [[/div]]
      [[div_ class="clearance {$clearance-five}"]]
      [[/div]]
      [[div_ class="clearance {$clearance-six}"]]
      [[/div]]
    [[/div]]
    [[div_ class="leveltext-container"]]
      [[div_ ]]
LEVEL {$level}/{$item-num}
      [[/div]]
      [[div_ ]]
{$clearance}
      [[/div]]
    [[/div]]
  [[/div]]
[[/div]]