Link to article: 🏳🌈Pride Logos🏳⚧.
/* Include the rainbow header */
@import url("https://scp-wiki.wdfiles.com/local--code/component:pride-logos-base/1");
/* Warning blocks */
#page-content div.warning {
margin: 1em 0;
padding: 0 1em;
background-color: #fffaaa;
border: 1px solid black;
}
/* Teletype code text */
tt {
font-size: 90%;
padding: 0.1em 0.2em;
background-color: #eee;
border-radius: 5px;
}
/* Make collapsibles' text larger */
#page-content a.collapsible-block-link {
font-weight: bold;
font-size: 120%;
}
/* Model the logo-displaying table */
.showcase tbody {
background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 15px, transparent 15px, transparent 30px);
}
.showcase table.wiki-content-table {margin: 0 auto;}
.showcase tr, .showcase td {
text-align: center;
font-weight: bold;
border: 2px solid black;
max-width: 12vw;
min-width: 12vw;
}
/* Animated rainbow-colored text */
.parade {
margin: 0.5em auto;
text-align: center;
font-family: 'Comic Sans MS', 'Comic Sans', cursive;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(45deg,
rgb(255,0,0),
rgb(255,128,0),
rgb(255,255,0),
rgb(128,255,0),
rgb(0,255,0),
rgb(0,255,128),
rgb(0,255,255),
rgb(0,128,255),
rgb(0,0,255),
rgb(128,0,255),
rgb(255,0,255),
rgb(255,0,128),
rgb(255,0,0));
background-size: 300%;
-webkit-animation: rainbow 5s linear infinite;
-moz-animation: rainbow 5s linear infinite;
-o-animation: rainbow 5s linear infinite;
animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
0% {background-position: 0 0;}
100% {background-position: 300% 0;}
}
/* Sample logo copied from the source code */
div#header {
background-image: url("https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-default.png");
}
#header::before{
position: absolute;
content: '';
width: 100%;
height: 100%;
background-image: url("https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pride.png");
background-repeat: no-repeat;
background-position: inherit;
background-size: inherit;
-webkit-mask-image: linear-gradient(60deg, transparent 30%, black 60%);
mask-image: linear-gradient(60deg, transparent 30%, black 60%);
-webkit-mask-position: 10px 40px;
mask-position: 10px 40px;
-webkit-mask-size: 100px 100px;
mask-size: 100px 100px;
}
@media (max-width: 767px) {
#header::before {
-webkit-mask-position: 8px 64%;
mask-position: 8px 64%;
-webkit-mask-size: calc(48px + 5%) calc(48px + 5vw);
mask-size: calc(48px + 5%) calc(48px + 5vw);
}
}
:scp-wiki:component:pride-logos-base
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:image-block
[info]
:scp-wiki:component:image-block
[info]
parade
warning
showcase