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]]
page revision: 59, last edited: 20 Jan 2020 08:28