Pride Logos Base

Link to article: Pride Logos Base.

/* First logo */

#header {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code}.png");
    background-image: {$custom};
}

/* The second logo is created by a pseudo-element atop the first one */

#header::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disable clicking event */
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: inherit;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code2}.png");
    background-image: {$custom2};

/* 0. Default mask position and size on desktop */

    -webkit-mask-position: 10px 40px;
    mask-position: 10px 40px;
    -webkit-mask-size: 100px 100px;
    mask-size: 100px 100px;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
    mask-image: linear-gradient(to right, transparent 50%, black 50%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}


/* Parallel collage of three logos */

#header::before {

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 35%, black 35%, black 65%, transparent 65%);
    mask-image: linear-gradient(to right, transparent 35%, black 35%, black 65%, transparent 65%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 35%, black 35%, black 65%, transparent 65%);
    mask-image: linear-gradient({$angle}deg, transparent 35%, black 35%, black 65%, transparent 65%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}

/* The third logo is created by ::after */

#header::after {
    position: absolute;
    content: '';
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: inherit;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code3}.png");
    background-image: {$custom3}; 


/* 0. Default mask position and size on desktop */

    -webkit-mask-position: 10px 40px;
    mask-position: 10px 40px;
    -webkit-mask-size: 100px 100px;
    mask-size: 100px 100px;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 65%, black 65%);
    mask-image: linear-gradient(to right, transparent 65%, black 65%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 65%, black 65%);
    mask-image: linear-gradient({$angle}deg, transparent 65%, black 65%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask2};
    mask-image: {$mask2};
}

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/1");

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/2");

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/3");

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/4");

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/5");

:root {
    --header-logo: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code}.png");
}

#header h1 a::before {
    background-image: {$custom};
}

@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/6");
#header h1 a::before {

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%),
                        linear-gradient(white, white);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%),
                linear-gradient(white, white);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask},
                                         linear-gradient(white, white);
    mask-image: {$mask},
                           linear-gradient(white, white);
}

#header h1 a::after {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code2}.png");
    background-image: {$custom2};

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}


tt {
    font-size: 90%;
    padding: 0.1em 0.2em;
    background-color: #eee;
    border-radius: 5px;
}

```
display: none;
```

(none)

(none)

[[div style="display: none;"]]
[[module CSS]]
/* First logo */

#header {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code}.png");
    background-image: {$custom};
}

/* The second logo is created by a pseudo-element atop the first one */

#header::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    pointer-events: none; /* Disable clicking event */
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: inherit;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code2}.png");
    background-image: {$custom2};

/* 0. Default mask position and size on desktop */

    -webkit-mask-position: 10px 40px;
    mask-position: 10px 40px;
    -webkit-mask-size: 100px 100px;
    mask-size: 100px 100px;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
    mask-image: linear-gradient(to right, transparent 50%, black 50%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}
[[/module]]

[!-- [[#if {$code3} | --] |  ]][[#if {$custom3} | --] |  ]]
[[module CSS]]

/* Parallel collage of three logos */

#header::before {

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 35%, black 35%, black 65%, transparent 65%);
    mask-image: linear-gradient(to right, transparent 35%, black 35%, black 65%, transparent 65%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 35%, black 35%, black 65%, transparent 65%);
    mask-image: linear-gradient({$angle}deg, transparent 35%, black 35%, black 65%, transparent 65%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}

/* The third logo is created by ::after */

#header::after {
    position: absolute;
    content: '';
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: inherit;
    background-size: inherit;
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code3}.png");
    background-image: {$custom3}; 


/* 0. Default mask position and size on desktop */

    -webkit-mask-position: 10px 40px;
    mask-position: 10px 40px;
    -webkit-mask-size: 100px 100px;
    mask-size: 100px 100px;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 65%, black 65%);
    mask-image: linear-gradient(to right, transparent 65%, black 65%);

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 65%, black 65%);
    mask-image: linear-gradient({$angle}deg, transparent 65%, black 65%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask2};
    mask-image: {$mask2};
}

[[/module]]
[!-- --]

[!-- -{$header}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/1");
[[/module]]
[!-- --]

[!-- -{$s10}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/2");
[[/module]]
[!-- --]

[!-- -{$s9}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/3");
[[/module]]
[!-- --]

[!-- -{$bhl}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/4");
[[/module]]
[!-- --]

[!-- -{$bedrock}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/5");

:root {
    --header-logo: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code}.png");
}

#header h1 a::before {
    background-image: {$custom};
}
[[/module]]
[!-- --]

[!-- [[#if {$code2} | - |  ]][[#if {$custom2} | - |  ]]{$bedrock}
[[module CSS]]
@import url("https://scp-wiki.wdfiles.com/local--code/component%3Apride-logos-base/6");
#header h1 a::before {

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%),
                        linear-gradient(white, white);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%),
                linear-gradient(white, white);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask},
                                         linear-gradient(white, white);
    mask-image: {$mask},
                           linear-gradient(white, white);
}

#header h1 a::after {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/component%3Apride-logos/scp-{$code2}.png");
    background-image: {$custom2};

/* 2. Angled (non-vertical) divider */

    -webkit-mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);
    mask-image: linear-gradient({$angle}deg, transparent 50%, black 50%);

/* 3. User-customizable mask */

    -webkit-mask-image: {$mask};
    mask-image: {$mask};
}
[[/module]]
[!-- --]
[[/div]]


[[iftags +component-backend]]

[[module CSS]]

tt {
    font-size: 90%;
    padding: 0.1em 0.2em;
    background-color: #eee;
    border-radius: 5px;
}

[[/module]]

<< [[[component:pride-logos|]]]
----

Because Wikidot parameters cannot be passed into code blocks, some of the code is not shown here in code blocks. You may click "Page Source" to view the full source code.

++ Streaming Rainbow Header

This header has limited usability on complex themes, or any themes with custom sizing of **{{#container}}** or other elements. But it's generally okay to use on most default Sigma-theme pages.

[[code type="CSS"]]
/* Rainbow-colored header modified from the SCP Trans Pride Theme Animated header by Orison */

div#container-wrap {
    background-image: url("https://scp-wiki.wdfiles.com/local--files/theme%3Ascp-trans-pride/Trans-CSS-File.png");
}

#container {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 400px, rgba(255,255,255,1) 400px);
}

#container-wrap-wrap {
    background-image: linear-gradient(to right, 
rgba(255,0,0,.5),
rgba(255,128,0,.5),
rgba(255,255,0,.5),
rgba(128,255,0,.5),
rgba(0,255,0,.5),
rgba(0,255,128,.5),
rgba(0,255,255,.5),
rgba(0,128,255,.5),
rgba(0,0,255,.5),
rgba(128,0,255,.5),
rgb(255,0,255,.5),
rgb(255,0,128,.5),
rgb(255,0,0,.5));
    background-size: 300% 100%;
    -webkit-animation: tint 10s linear infinite;
    -moz-animation: tint 10s linear infinite;
    -o-animation: tint 10s linear infinite;
    animation: tint 10s linear infinite;
}

@keyframes tint {
    0% {background-position: 0% 0;}
    100% {background-position: 300% 0;}
}
[[/code]]


++ Sigma-10 Responsive Mask Sizing

All of these codes and following ones are the result of CSS cannot pass one property to another, in this case, pass **{{background-size}}** to **{{mask-size}}**, and **{{background-position}}** to **{{mask-position}}**, because the pseudo-elements (**{{#header::before}}** and **{{#header::after}}**) can inherit their **{{background-size}}** and **{{-position}}** from their parent element **{{#header}}**, without requiring manual configuration. But the **{{mask-size}}** and **{{-position}}** won't default to be the same as **{{background-size}}** and **{{-position}}**. This makes it necessary to copy all the rules defining **{{background-size}}** and **{{-position}}** from respective themes, and all the codes need to be manually updated to keep in sync if the said themes are updated.

Sigma-10 uses a smooth **{{calc()}}** function to adjust the header logo size, which is neat.

[[code type="CSS"]]
/* Due to a bug, two hyphens "--" have a chance to be translated to a whole dash "—" in Wikidot, which will result in a code malfunction. Hence, here does not use "--]" to disable the comment code, but "-]" instead. */

/* Sigma-10 responsive sizing */

@media (max-width: 767px) {
    #header::before,
    #header::after {
        -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);
    }
}
[[/code]]


++ Sigma-9 Responsive Mask Sizing

However, Sigma-9 uses an old-school multi-grade sizing, and this makes the code very long.

[[code type="CSS"]]

/* Sigma-9 responsive sizing */

@media (max-width: 479px) {
    #header::before,
    #header::after {
        -webkit-mask-position: 0 5.5em;
        mask-position: 0 5.5em;
        -webkit-mask-size: 55px 55px;
        mask-size: 55px 55px;
    }
}
@media (min-width: 480px) and (max-width: 580px) {
    #header::before,
    #header::after {
        -webkit-mask-position: 0.5em 4.5em;
        mask-position: 0.5em 4.5em;
        -webkit-mask-size: 66px 66px;
        mask-size: 66px 66px;
    }
}
@media (min-width: 581px) and (max-width: 767px) {
    #header::before,
    #header::after {
        -webkit-mask-position: 1em 4em;
        mask-position: 1em 4em;
        -webkit-mask-size: 77px 77px;
        mask-size: 77px 77px;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    #header::before,
    #header::after {
        -webkit-mask-position: 1em 4em;
        mask-position: 1em 4em;
        -webkit-mask-size: 88px 88px;
        mask-size: 88px 88px;
    }
}
@media (min-width: 979px) {
    div#header {
        background-size: 100px 100px;
    }
    #header::before,
    #header::after {
        -webkit-mask-position: 10px 40px;
        mask-position: 10px 40px;
        -webkit-mask-size: 100px 100px;
        mask-size: 100px 100px;
    }
}
[[/code]]


++ Black Highlighter Responsive Mask Sizing

BHL uses a lot of variables, and its source code is over 10,000 lines. There's even a small problem in the original code that is missing a space between two **{{calc()}}** values (width and height), but the browser can interpret it properly. This is fixed in the code below.

[[code type="CSS"]]

/* Black Highlighter responsive sizing */

#header::before,
#header::after {
    -webkit-mask-position: .75rem 1.1875rem;
    mask-position: .75rem 1.1875rem;
    -webkit-mask-size: calc(var(--header-height-on-desktop) - 2rem) calc(var(--header-height-on-desktop) - 2rem);
    mask-size: calc(var(--header-height-on-desktop) - 2rem) calc(var(--header-height-on-desktop) - 2rem);
}

@media only screen and (max-width: 56.25rem) {
    #header::before,
    #header::after {
        -webkit-mask-position: calc((var(--header-height-on-mobile) - .75rem) - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
        mask-position: calc((var(--header-height-on-mobile) - .75rem) - var(--size)) calc(((var(--size)*-1) + var(--header-height-on-mobile) + var(--y-offset))/2);
        -webkit-mask-size: var(--size) var(--size);
        mask-size: var(--size) var(--size);
    }
}
[[/code]]


++ Bedrock Configuration

Bedrock uses a completely different logic to lay out the header, and it does not rely on the **{{background-image}}** of **{{#header}}** to be the logo. This has created the possibility to apply a mask to the bottom layer of logo, which has mostly solved the see-through problem on Sigma and BHL. 

On Sigma and BHL, there is no way to crop only the logo but not affect the other pseudo-elements, because pseudo-elements are practically children elements of **{{#header}}**, which will be cropped altogether. However, **{{#header::before}}** and **{{#header::after}}** are sibling elements, so they can use separate masks to avoid invisible overlapping.

[[code type="CSS"]]

/* Unset the header background image, because Bedrock does not use this to display logo */

#header {
    background-image: linear-gradient(0deg, rgba(var(--header-background-color), 0.85) 0%, rgb(var(--header-background-color)) 100%);
}

#header::before {
    background-image: none;
    display: none;
}

[[/code]]

+++ Bedrock Responsive Mask Sizing

Here a **{{mask-composite}}** property is used to invert the mask applied to the second logo, which makes the two combined logos always be the completion of each other.

First, a pure layer of solid white mask is placed; then comes the shared mask. For the first logo, the final **{{mask-image}}** will be the completion (exclusion) of the shared mask.

[[code type="CSS"]]

/* The first logo is #header h1 a::before */

#header h1 a::before {

/* 0. Default mask size */

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

/* Inverted mask */

    -webkit-mask-composite: exclude;
    mask-composite: exclude;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%),
                        linear-gradient(white, white);
    mask-image: linear-gradient(to right, transparent 50%, black 50%),
                linear-gradient(white, white);
}

/* The second logo is #header h1 a::after */

#header h1 a::after{
    position: absolute;
    content: '';
    width: calc(var(--base-header-height) * .925);
    height: 100%;
    pointer-events: none; /* Disable clicking event */
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--header-logo-size);

/* 0. Default mask size */

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

/* 1. Default divider */

    -webkit-mask-image: linear-gradient(to right, transparent 50%, black 50%);
    mask-image: linear-gradient(to right, transparent 50%, black 50%);
}
[[/code]]

[[/iftags]]

Pride Logos Base

Module Styles

Inline Styles

Includes

CSS Classes

Page Source