🏳‍🌈Pride Logos🏳‍⚧

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);
    }
}

(none)

```
parade
```
```
warning
```
```
showcase
```

[[include :scp-wiki:component:pride-logos-base
|s10={$s10}
|s9={$s9}
|bhl={$bhl}
|bedrock={$bedrock}
|code={$code}
|code2={$code2} |code2=0
|code3={$code3} |code3=0
|custom={$custom}
|custom2={$custom2} |custom2=0
|custom3={$custom3} |custom3=0
|mask={$mask}
|mask2={$mask2}
|angle={$angle}
|header={$header}
]]

[[iftags +component]]

[[>]]
[[module Rate]]
[[/>]]

[[div class="parade"]]
[[size 300%]]**THE PRIDE NEVER ENDS**[[/size]]
[[/div]]

= **— Inspired by the [[[*component:pride-highlighter| Pride Highlighter]]] and the [[[*theme:scp-trans-pride| Trans Pride Theme]]] —**

[[div id="u-top"]]
[[/div]]

🌈To use this component, please read the instruction below and insert the corresponding code into the source code of your page.

----

++++ For Sigma-10 themes:

Sigma-10 is the current default [[[theme:site|site theme]]] on the English wiki. It's an updated version of Sigma-9. 

> [[include :scp-wiki:component:pride-logos **s10=-]**
> |###0a0|code=##**input the code**
> ]]

The "code" is a short name for pride flags, and can be found below in the table. Example:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##trans
> ]]

----

++++ For Sigma-9 themes:

Sigma-9 is the [*https://scp-wiki.wikidot.com/component:theme/noredirect/true former default] site theme. Some other language branches, sister sites, and sandboxes may still use it as default.

> [[include :scp-wiki:component:pride-logos **s9=-]**
> |###0a0|code=##**input the code**
> ]]

----

++++ For [[[theme:black-highlighter-theme | Black Highlighter]]] themes:

> [[include :scp-wiki:component:pride-logos **bhl=-]**
> |###0a0|code=##**input the code**
> ]]

----

++++ For [[[theme:bedrock|Bedrock]]] themes: (Experimental)

Bedrock-based themes include the well-known [[[theme:basalt|Basalt]]], and some aesthetic themes.

> [[include :scp-wiki:component:pride-logos **bedrock=-]**
> |###0a0|code=##**input the code**
> ]]

You need to place this code after the theme's **{{include}}**.

[[collapsible show="+ Combine Different Logos, Use Custom Logos, and More" hide="- Hide Customization options" hideLocation="both"]]

+++ 🌈Combine Two Logos

You can fuse/join two logos together, one half on the left side, another half on the right side by introducing a **{{code2}}** attribute:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##**code for the left half** 
> |##blue|code2=##**code for the right half**
> ]]

Example:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=## nonbinary 
> |##blue|code2=## pan
> ]]

This will put together the nonbinary flag and pan pride flag to make a whole logo, and might be useful for those who hope to display two identities.

~~~~
[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wikidot.com/local--files/component:pride-logos/join.png
|caption=Vertical
|width=100px
|align=center
]]
~~~~

If you think it looks better to join the two halves by a different angle, just add the **{{angle}}** attribute to change the division to non-vertical:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##**code for the first logo** 
> |##blue|code2=##**code for the second logo** 
> |##crimson|angle=##**The tilt angle of the seam, 0-360**
> ]]

At 0° it will be combined horizontally. The default angle is vertical (90°). The tilt angle starts from the left (negative x-axis) then rotates clockwise.

E.g. this will change the join angle to 60°：

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##nonbinary 
> |##blue|code2=##pan 
> |##crimson|angle=##60
> ]]

~~~~
[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wikidot.com/local--files/component:pride-logos/join2.png
|caption=Tilted
|width=100px
|align=center
]]
~~~~

----

+++ 🌈Combine Three Logos (Experimental)

If you want to combine 3 different flags in one logo, it will be displayed as a parallel collage. 

The **{{angle}}** attribute still apply. You can specify the third logo by **{{code3}}**.

Example:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##trans-alt3
> |##blue|code2=##nonbinary-alt3
> |##violet|code3=##genderfluid-alt3
> |##crimson|angle=##70
> ]]

~~~~
[[div style="display: flex;
align-items: center;
justify-content: center;"]]

[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wikidot.com/local--files/component:pride-logos/join3.png
|caption=Vertical
|width=100px
|align=center
]]

[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wikidot.com/local--files/component:pride-logos/join4.png
|caption=Tilted
|width=100px
|align=center
]]

[[/div]]
~~~~

**This option cannot be used on Bedrock themes. Bedrock only supports joining two logos.**

----

+++ 🌈Upload Your Own Image

If the ready-made logos listed below didn't satisfy you, this will assure you a chance to make your own pride! Just use the **{{custom}}** attribute to insert a URL:

> [[include :scp-wiki:component:pride-logos s10=-]
> |##darkorchid|custom=##url(**URL of your custom logo**)
> ]]

**You must include the {{url()}} brackets.**

The combination technique (including the angle option) still works. You can use this together with built-in codes, like:

> [[include :scp-wiki:component:pride-logos s10=-]
> |##darkorchid|code=##abro
> |##dodgerblue|custom2=##url(@@https://example.com/my-image.png@@)
> ]]

Or three (you can still use **{{code}}** and **{{custom}}** together):

> [[include :scp-wiki:component:pride-logos s10=-]
> |##darkorchid|custom=##url(**first custom logo**)
> |##dodgerblue|custom2=##url(**second custom logo**)
> |##teal|custom3=##url(**third custom logo**)
> ]]

Images with a equal width and height will work best, otherwise it will be scaled and stretched. 

[[div class="warning"]]

⚠ Due to a limitation of Sigma and BHL themes, when combining logos together, hollow logos (which inner part is transparent or semi-transparent, like the default site logo) do not display well. The first logo can be partly seen beneath other logos. However, Bedrock does not have this problem.

[[/div]]

----

+++ 🌈More Advanced Effects?

**//Q: Can I combine more than 3 logos?//**

Currently, no. If you want to, I recommend making it to a whole image in Photoshop or other software, then use the **{{custom}}** option.

**//Q: Can I animate the logos?//**

Currently, @keyframe animation cannot directly apply to the mask-image property. To animate the logo might be very complicated.

**//Q: How is the fading logo on this page made? Can I also use gradients?//**

Yes. 

This component uses [*https://www.w3schools.com/css//css3_masking.asp CSS mask] to display combined logos. CSS masks can blend two images, by displaying one of them only within the scope of the mask. 

The second logo is cut to a half, then it was put on the top of the first logo. By default, it is designed to cut at 50% sharp:

[[code type="css"]]
mask-image: linear-gradient(to right, transparent 50%, black 50%);
[[/code]]

This is a [*https://www.w3schools.com/css/css3_gradients.asp CSS gradient]. The logo will correspond with the mask's transparency pixel-by-pixel. You can change the color stops, and add a **{{mask}}** attribute to override the existing mask-image:

> [[include :scp-wiki:component:pride-logos s10=-]
> |##fuchsia|mask=##**gradients, svgs, or something else**
> ]]

For reference, the gradient logo for this page (rainbow fade-in) is coded as:

[[code type="css"]]
mask-image: linear-gradient(60deg, transparent 30%, black 60%);
[[/code]]

Only the **{{linear-gradient(60deg, transparent 30%, black 60%)}}** field is required. The former **{{angle}}** attribute will then be rendered invalid. 

It shall be written as:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###0a0|code=##default
> |##blue|code2=##pride
> |##fuchsia|mask=##linear-gradient(60deg, transparent 30%, black 60%)
> ]]

~~~~
[[include :scp-wiki:component:image-block
|name=https://scp-wiki.wikidot.com/local--files/component:pride-logos/blend.png
|caption=You can also make this
|width=70%
|align=center
]]
~~~~

For the 3 logos option, you can use another **{{mask2}}** for the third logo. However, the result might be a bit funky.

[[/collapsible]]

----

+++ 🌈Pride Header

If you would like to use only the animated rainbow header, insert this line of code:

> [[include :scp-wiki:component:pride-logos ###e70|header=##-]]]

This could coexist with the logo. For example, if you want to use both the logo and the header:

> [[include :scp-wiki:component:pride-logos s10=-]
> |###e70|header=## -]
> |###0a0|code=## phil
> |##blue|code2=## intersex
> ]]

Please notice that using this header will necessarily introduce the default Sigma header background to your page. This might overwrite other customized header backgrounds.

----

+++ 🌈Logos Available Now (In Alphabetical Order)：

[[div class="showcase"]]

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-black.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-white.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-mix.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-mix-alt.png]] ||
|| Black Transparent || White Transparent || Mixed Transparent || Mixed Transparent Alt ||
|| black || white || mix || mix-alt ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-default.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-inverse.png]] ||
|| Default || Inverse ||
|| default || inverse ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pride.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pride-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pride-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pride-alt3.png]] ||
|| Rainbow Pride |||||| Alternates ||
|| pride || pride-alt || pride-alt2 || pride-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-phil.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-phil-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-phil-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-phil-alt3.png]] ||
|| Philadelphia Pride |||||| Alternates ||
|| phil || phil-alt || phil-alt2 || phil-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-progress.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-progress-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-progress-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-progress-alt3.png]] ||
|| Progress Pride |||||| Alternates ||
|| progress || progress-alt || progress-alt2 || progress-alt3 ||

@@ @@

----

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-abro.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-abro-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-abro-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-abro-alt3.png]] ||
|| Abrosexual / Abroromantic Pride |||||| Alternates ||
|| abro || abro-alt || abro-alt2 || abro-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-agender.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-agender-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-agender-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-agender-alt3.png]] ||
|| Agender Pride |||||| Alternates ||
|| agender || agender-alt || agender-alt2 || agender-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aromantic.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aromantic-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aromantic-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aromantic-alt3.png]] ||
|| Aromantic Pride |||||| Alternates ||
|| aromantic || aromantic-alt || aromantic-alt2 || aromantic-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aroace.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aroace-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aroace-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-aroace-alt3.png]] ||
|| Aroace Pride |||||| Alternates ||
|| aroace || aroace-alt || aroace-alt2 || aroace-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-asexual.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-asexual-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-asexual-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-asexual-alt3.png]] ||
|| Asexual Pride |||||| Alternates ||
|| asexual || asexual-alt || asexual-alt2 || asexual-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-autosexual.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-autosexual-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-autosexual-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-autosexual-alt3.png]] ||
|| Autosexual Pride |||||| Alternates ||
|| autosexual || autosexual-alt || autosexual-alt2 || autosexual-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-auto.png]] ||
|| Auto-spectrum Pride ||
|| auto ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bi.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bi-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bi-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bi-alt3.png]] ||
|| Bisexual / Biromantic Pride |||||| Alternates ||
|| bi || bi-alt || bi-alt2 || bi-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bigender.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bigender-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bigender-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-bigender-alt3.png]] ||
|| Bigender Pride |||||| Alternates ||
|| bigender || bigender-alt || bigender-alt2 || bigender-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiboy.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiboy-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiboy-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiboy-alt3.png]] ||
|| Demiboy Pride |||||| Alternates ||
|| demiboy || demiboy-alt || demiboy-alt2 || demiboy-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demigirl.png]] ||  [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demigirl-alt.png]] ||  [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demigirl-alt2.png]] ||  [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demigirl-alt3.png]] || 
|| Demigirl Pride |||||| Alternates ||
|| demigirl || demigirl-alt || demigirl-alt2 || demigirl-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiromantic.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiromantic-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiromantic-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demiromantic-alt3.png]] ||
|| Demiromantic Pride |||||| Alternates ||
|| demiromantic || demiromantic-alt || demiromantic-alt2 || demiromantic-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demisexual.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demisexual-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demisexual-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-demisexual-alt3.png]] ||
|| Demisexual Pride |||||| Alternates ||
|| demisexual || demisexual-alt || demisexual-alt2 || demisexual-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-enbian.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-enbian-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-enbian-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-enbian-alt3.png]] ||
|| Enbian Pride |||||| Alternates ||
|| enbian || enbian-alt || enbian-alt2 || enbian-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-gay.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-gay-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-gay-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-gay-alt3.png]] ||
|| Gay Men Pride |||||| Alternates ||
|| gay || gay-alt || gay-alt2 || gay-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderfluid.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderfluid-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderfluid-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderfluid-alt3.png]] ||
|| Genderfluid Pride |||||| Alternates ||
|| genderfluid || genderfluid-alt || genderfluid-alt2 || genderfluid-alt3 ||
@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderflux.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderflux-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderflux-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderflux-alt3.png]] ||
|| Genderflux Pride |||||| Alternates ||
|| genderflux || genderflux-alt || genderflux-alt2 || genderflux-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderqueer.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderqueer-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderqueer-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-genderqueer-alt3.png]] ||
|| Genderqueer Pride |||||| Alternates ||
|| genderqueer || genderqueer-alt || genderqueer-alt2 || genderqueer-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayaroace.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayaroace-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayaroace-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayaroace-alt3.png]] ||
|| Grayaroace Pride |||||| Alternates ||
|| grayaroace || grayaroace-alt || grayaroace-alt2 || grayaroace-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayromantic.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayromantic-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayromantic-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-grayromantic-alt3.png]] ||
|| Grayromantic Pride |||||| Alternates ||
|| grayromantic || grayromantic-alt || grayromantic-alt2 || grayromantic-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-graysexual.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-graysexual-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-graysexual-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-graysexual-alt3.png]] ||
|| Graysexual Pride |||||| Alternates ||
|| graysexual || graysexual-alt || graysexual-alt2 || graysexual-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex-alt3.png]] ||
|| Intersex Pride |||||| Alternates ||
|| intersex || intersex-alt || intersex-alt2 || intersex-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex-re.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-intersex-re-alt.png]] ||
|| Intersex Pride Redesign || Alternate ||
|| intersex-re || intersex-re-alt ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-lesbian.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-lesbian-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-lesbian-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-lesbian-alt3.png]] ||
|| Lesbian Pride |||||| Alternates ||
|| lesbian || lesbian-alt || lesbian-alt2 || lesbian-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-neutrois.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-neutrois-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-neutrois-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-neutrois-alt3.png]] ||
|| Neutrois Pride |||||| Alternates ||
|| neutrois || neutrois-alt || neutrois-alt2 || neutrois-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-nonbinary.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-nonbinary-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-nonbinary-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-nonbinary-alt3.png]] ||
|| Nonbinary Pride |||||| Alternates ||
|| nonbinary || nonbinary-alt || nonbinary-alt2 || nonbinary-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-omni.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-omni-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-omni-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-omni-alt3.png]] ||
|| Omnisexual / Omniromantic Pride |||||| Alternates ||
|| omni || omni-alt || omni-alt2 || omni-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pan.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pan-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pan-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pan-alt3.png]] ||
|| Pansexual / Panromantic Pride |||||| Alternates ||
|| pan || pan-alt || pan-alt2 || pan-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pangender.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pangender-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pangender-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-pangender-alt3.png]] ||
|| Pangender Pride |||||| Alternates ||
|| pangender || pangender-alt || pangender-alt2 || pangender-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-poly.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-poly-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-poly-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-poly-alt3.png]] ||
|| Polysexual / Polyromantic Pride |||||| Alternates ||
|| poly || poly-alt || poly-alt2 || poly-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-queerplatonic.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-queerplatonic-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-queerplatonic-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-queerplatonic-alt3.png]] ||
|| Queerplatonic Pride |||||| Alternates ||
|| queerplatonic || queerplatonic-alt || queerplatonic-alt2 || queerplatonic-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-trans.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-trans-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-trans-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-trans-alt3.png]] ||
|| Transgender Pride |||||| Alternates ||
|| trans || trans-alt || trans-alt2 || trans-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transfem.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transfem-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transfem-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transfem-alt3.png]] ||
|| Transfeminine Pride |||||| Alternates ||
|| transfem || transfem-alt || transfem-alt2 || transfem-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transmasc.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transmasc-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transmasc-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transmasc-alt3.png]] ||
|| Transmasculine Pride |||||| Alternates ||
|| transmasc || transmasc-alt || transmasc-alt2 || transmasc-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transneutral.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transneutral-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transneutral-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-transneutral-alt3.png]] ||
|| Transneutral Pride |||||| Alternates ||
|| transneutral || transneutral-alt || transneutral-alt2 || transneutral-alt3 ||

@@ @@





[[collapsible show="+ Anarchism Logos" hide="- Hide"]]

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-ancom.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-ancom-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-ancom-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-ancom-alt3.png]] ||
|| Anarcho-Communism |||||| Alternates ||
|| ancom || ancom-alt || ancom-alt2 || ancom-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-antrans.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-antrans-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-antrans-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-antrans-alt3.png]] ||
|| Anarcho-Transhumanism |||||| Alternates ||
|| antrans || antrans-alt || antrans-alt2 || antrans-alt3 ||

@@ @@

|| [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-anqueer.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-anqueer-alt.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-anqueer-alt2.png]] || [[image https://scp-wiki.wikidot.com/local--files/component:pride-logos/scp-anqueer-alt3.png]] ||
|| Anarcho-Queer |||||| Alternates ||
|| anqueer || anqueer-alt || anqueer-alt2 || anqueer-alt3 ||

[[/collapsible]]
[[/div]]

----
[[=]]
+++ [#u-top ▲ Back to Top ▲]
[[/=]]
----
= [[[component:pride-logos-base | 🔗 View CSS Code 🎛️]]]
----

+++ Feel free to comment or message [[*user Dr Talcite]] to let me know if you encountered problems or bugs, or have any questions or suggestions, or want more logos added!

[[module CSS]]

/* 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);
    }
}
[[/module]]

[[/iftags]]

🏳‍🌈Pride Logos🏳‍⚧

Module Styles

Inline Styles

Includes

CSS Classes

Page Source