Phantom8-4

+ Show component code

@supports((display: -ms-grid) or (display: grid)) {
    @media only screen and (min-width: 769px) {
        #side-bar .close-menu {
            display: block;
            position: fixed;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            opacity: 1;
            pointer-events: all;
        }
 
        #side-bar .close-menu img {
            color: transparent;
        }
 
        #side-bar .close-menu::before,
        #side-bar .close-menu::after {
            content: "";
            box-sizing: border-box;
            position: fixed;
            display: block;
            top: 0.25rem;
            left: 0.5rem;
            width: 3rem;
            height: 3rem;
            padding: 0;
            margin: 0;
            text-align: center;
            pointer-events: all;
            cursor: pointer;
            -webkit-transition:
                opacity var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing);
        }
 
        #side-bar .close-menu::before {
            --mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg height='32px' id='Layer_1' style='enable-background:new 0 0 32 32;' version='1.1' viewBox='0 0 32 32' width='32px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z'/%3E%3C/svg%3E");
            z-index: -1;
            background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
            -webkit-mask-size: 60%;
            mask-size: 60%;
        }
 
        #side-bar .close-menu::after {
            z-index: -2;
            background-color: var(--toggle-button-bg, rgb(var(--swatch-menubg-color))) !important;
            -webkit-border-radius: var(--toggle-roundness, 50%);
            -moz-border-radius: var(--toggle-roundness, 50%);
            border-radius: var(--toggle-roundness, 50%);
            border: var(--toggle-border-color, rgb(var(--swatch-border-color))) var(--toggle-border-width, 0.25rem) solid;
        }
 
        #side-bar:focus-within .close-menu::before,
        #side-bar:focus-within .close-menu::after {
            opacity: 0;
        }
 
        #side-bar {
            display: block;
            position: fixed;
            top: 0;
            left: -webkit-calc(var(--sidebar-width-on-desktop)*-1);
            left: -moz-calc(var(--sidebar-width-on-desktop)*-1);
            left: calc(var(--sidebar-width-on-desktop)*-1);
            z-index: 10;
            -webkit-transition:
                left var(--sidebar-transition-timing);
            -o-transition:
                left var(--sidebar-transition-timing);
            -moz-transition:
                left var(--sidebar-transition-timing);
            transition:
                left var(--sidebar-transition-timing);
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            margin-top: 0;
        }
 
        #side-bar:focus-within {
            left: 0;
        }
 
        #side-bar .side-block {
            margin-top: 1rem;
            background-color: rgb(0, 0, 0, 0);
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-left-width: 0px;
            border-right-width: 0px;
        }
 
        #main-content::before {
            content: "";
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            z-index: -1;
            opacity: 0;
            -webkit-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -o-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            -moz-transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            transition:
                opacity var(--sidebar-transition-timing),
                width var(--sidebar-transition-timing);
            margin-left: var(--sidebar-width-on-desktop);
            background: rgba(var(--swatch-menubg-black-color), .3) 1px 1px repeat;
            padding-right: 0;
            width: 100%;
            height: 100vh;
            pointer-events: none;
            z-index: 99;
        }
 
        #side-bar:focus-within~#main-content::before {
            width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
            width: -moz-calc(100% - var(--sidebar-width-on-desktop));
            width: calc(100% - var(--sidebar-width-on-desktop));
            opacity: 1;
            pointer-events: all;
        }
 
        #content-wrap {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -webkit-flex-direction: row;
            -moz-box-orient: horizontal;
            -moz-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            width: -webkit-calc(100vw - (100vw - 100%));
            width: -moz-calc(100vw - (100vw - 100%));
            width: calc(100vw - (100vw - 100%));
            min-height: -webkit-calc(100vh - -webkit-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: -moz-calc(100vh - -moz-calc(var(--final-header-height-on-desktop, 10.125rem)));
            min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
            -webkit-box-flex: 2;
            -webkit-flex-grow: 2;
            -moz-box-flex: 2;
            -ms-flex-positive: 2;
            flex-grow: 2;
            height: auto;
            position: relative;
            margin: 0 auto;
            max-width: inherit;
        }
 
        #main-content {
            width: 100%;
            position: initial;
            max-height: 100%;
            padding: 2rem 1rem;
            width: 45.8rem;
            max-width: 45.8rem;
            margin: 0 auto;
        }
 
        @media not all and (min-resolution:.001dpcm) {
            @supports (-webkit-appearance:none) {
                #side-bar {
                    -webkit-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -o-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    -moz-transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    transition:
                        left var(--sidebar-transition-timing),
                        padding-right var(--sidebar-transition-timing),
                        background-color var(--sidebar-transition-timing);
                    padding-right: 0;
                    background-color: rgb(0, 0, 0, 0);
                    pointer-events: all;
                    overflow-x: visible;
                    overflow-y: visible;
                    z-index: 999;
                }
 
                #side-bar::-webkit-scrollbar {
                    opacity: 0;
                    -webkit-transition: opacity var(--sidebar-transition-timing);
                    transition: opacity var(--sidebar-transition-timing);
                }
 
                #side-bar .close-menu::before {
                    z-index: 999;
                }
 
                #side-bar .close-menu::after {
                    z-index: 998;
                }
 
                #side-bar:hover .close-menu::before {
                    opacity: 0;
                }
 
                #side-bar:hover {
                    left: 0;
                    background-color: rgba(var(--swatch-menubg-color), 1);
                    padding-right: 0;
                }
 
                #side-bar:hover::-webkit-scrollbar {
                    opacity: 1;
                }
 
                #side-bar:hover~#main-content::before {
                    width: -webkit-calc(100% - var(--sidebar-width-on-desktop));
                    width: -moz-calc(100% - var(--sidebar-width-on-desktop));
                    width: calc(100% - var(--sidebar-width-on-desktop));
                    opacity: 1;
                    pointer-events: all;
                }
            }
        }
    }
}

Info

---

"Red Swan Theme Test Page" by: Phantom8

---

More from this author

Phantom8's Sandbox

---

run-time error: division by zero% (+0)	run-time error: division by zero% (-0)
-% (+0)	-% (-0)

---

---

Theme Colors

Red--basic-red#FF0000

White--absolute-white#FFFFFF

Alto--boring-gray#D9D9D9

{$color4-name}{$color4-variable}{$color4-info}

{$color5-name}{$color5-variable}{$color5-info}

{$color6-name}{$color6-variable}{$color6-info}

Black--pure-black#000000

Hover Red--hover-red#C20000

Penumbra Gray--penumbra-gray#9F9F9F

{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}

{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}

{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}

{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}

{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}

{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}

{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}

{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}

{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

---

Red Swan Logo

Note: This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.

On any wiki:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:component:toggle-sidebar-bhl]]
[[include :scp-wiki:theme:red-swan]]

---

after all of the includes above.

Examples

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

---

Titles can be created by putting between one and six plus "+" at the start of the line

+ Titles

First Title

Second Title

Third Title

Fourth Title

Fifth Title

Sixth Title

Tabulator

Just use your imagination and pretend there's `Lorem Ipsum` here.

Tabulation

Hey look, more text here.

How quaint.

Long Tab

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

This is a long tab. It contains a lot of text.

Empty Tab

Empty Tab

Empty Tab

honk honk

Empty Tab

oh wait, that's a goose not a swan

Empty Tab

oops…

Empty Tab

This is a blockquote, created by putting "> " at the start of each line.
More text

---

That's a horizontal rule

Nested blockquotes

And another¹

This is a	table
You should know	how to make these
already

---

Bugs (Not fixed):

-Centered Header duplicates and breaks the page logo
-Rating w/ info module is a darker shade of gray than the normal rating module
-Putting 3 colors in the header code breaks the whole page (Maybe a wikidot thing idk)
-ACS changes the color of the circle surrounding the icons to white
-Header subtitle refuses to accept the & symbol and instead displays & when typed
-Will add more if found

Things I gotta do:

-Choose a final red swan logo
-Find the code that lets me change the color of the title (Done) (Subtitle code is still rogue)
-Finishing details
-Removing or adding unnecessary/necessary code
-Fix bugs
-See if there's a way to make the header logo appear a bit more to the right on mobile
-See if there's a way to fix the (& ampersand) problem in the header

---

Working Components:

-ACS
-ACS animation
-ACS Lite (Fonts do not make it look pretty though)
-ACS split (Also doesn't look pretty due to the font)²
-Mega Customizable ACS
-AIM header (This includes upper and lower header separately too)
-Div class page works, as do blockquote and all other divs
-Importing extra fonts
-Pride Highlighter
-Classified Bar
-Discord chat
-ACS Hybrid
-Content warning
-BetterFootnotes
-Wide Image Sizer
-Foundation Cool Achievements works
-Mega Cool Author Page Tool

---

Footnotes

1. And here's a footnote!

2. I suggest not using ACS Lite or the ACS Splitter unless you're fine with it looking uggo