Magpie Swoops Theme

Link to article: Magpie Swoops Theme.

@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");

@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Amagpie-swoops/1");

font-family:var(--UI-font); font-size: calc(var(--base-font-size) * 2);

font-family:var(--header-font); font-size: calc(var(--base-font-size) * 2);

font-family:var(--title-font); font-size: calc(var(--base-font-size) * 2);

font-family:var(--mono-font); font-size: calc(var(--base-font-size) * 2);

```
blockquote
```
```
blockquote
```
```
editors-note
```
```
editors-note
```
```
discount
```
```
discount
```

[[iftags +theme]]
[[module CSS]]
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css");
@import url("https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css");
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/normalize.min.css
]]

[[include :scp-wiki:component:interwiki-style
| priority=2
| theme=https://cdn.scpwiki.com/theme/en/black-highlighter/css/min/black-highlighter.min.css
]]

[[include :scp-wiki:info:start]]
This is where you can put info about your page like this:
[[include :scp-wiki:info:more]]
Did you know Australian Magpies occupy the same territory for life?
[[include :scp-wiki:info:end]]

------

++ About this theme
[[div class="blockquote"]]
Hi! This is the **Magpie Swoops theme**, created by [[*user Sinking_Otter]]for use by articles "written by" Magpie Swoops, a little amatuer horror writing magazine/website in the SCP universe. It was inspired by what Halloween was for me as a kid. Growing up in Australia meant there was no real Halloween, barring a few plastic pumpkins in some stores around October. And thus, most of my Halloween experience came from online game events and horror-themed library books. The design of this theme was inspired by what I still remember from those times.

[[/div]]

@@ @@
------

++ How to use this theme
[[div class="blockquote"]]
This theme was based off of Black Highlighter. Therefore, if you want to use this theme, include the following code on your page. The toggle sidebar is optional.

> [[include :scp-wiki:theme:black-highlighter-theme]]
> [[include :scp-wiki:theme:magpie-swoops]]
> [[include :scp-wiki:component:toggle-sidebar-bhl]]

[[/div]]

@@ @@
------

++ Theme Colours

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Pumpkin Orange
| color1-variable=--pumpkin-orange
| color1-info=(255, 103, 24)
| color1-has-light-text=1
| color2-name=Slime Green
| color2-variable=--slime-green
| color2-info=(144, 232, 38)
| color2-has-light-text=0
| color3-name=Violent Violet
| color3-variable=--violent-violet
| color3-info=(116, 28, 140)
| color3-has-light-text=1
| color4-name=Charcoal
| color4-variable=--charcoal
| color4-info=(15, 15, 15)
| color4-has-light-text=1
| subcolor1-name= Bone White
| subcolor1-variable=--bone-white
| subcolor1-info=(242, 242, 242)
| subcolor1-has-light-text=0
| subcolor2-name= Very Dark Bone Grey
| subcolor2-variable=--very-dark-bone-grey
| subcolor2-info=(125, 125, 125)
| subcolor2-has-light-text=1
| subcolor3-name= Light Pumpkin Orange
| subcolor3-variable=--light-pumpkin-orange
| subcolor3-info=(255, 145, 23)
| subcolor3-has-light-text=1
| subcolor4-name= Burnt Pumpkin Orange
| subcolor4-variable=--burnt-pumpkin-orange
| subcolor4-info=(133, 69, 0)
| subcolor4-has-light-text=1
| subcolor5-name= Dark Violent Violet
| subcolor5-variable=--dark-violent-violet
| subcolor5-info=(70, 0, 89)
| subcolor5-has-light-text=1
| subcolor6-name=Light Violent Violet
| subcolor6-variable=--light-violent-violet
| subcolor6-info=(166, 77, 191)
| subcolor6-has-light-text=1
| subcolor7-name=Shadow Violent Violet
| subcolor7-variable=--shadow-violent-violet
| subcolor7-info=(150, 33, 193)
| subcolor7-has-light-text=1
| subcolor8-name=Light Slime Green
| subcolor8-variable=--light-slime-green
| subcolor8-info=(37, 232, 83)
| subcolor8-has-light-text=1
| subcolor9-name=Dark Slime Green
| subcolor9-variable=--dark-slime-green
| subcolor9-info=(109, 176, 28)
| subcolor9-has-light-text=1
]]

@@ @@

------

++ Examples

[[include component:image-block
|name=  https://scp-wiki.wikidot.com/local--files/theme:magpie-swoops/magpieswoopslogo.png
|caption=Magpie Swoops Logo
|width=300px
|align=right]]

Horizontal rules are created with 5 hyphens "- - - - -" and extends across the entire page if not placed inside anything (eg a blockquote). The line separating pages of this document are horizontal rules.[[footnote]] Australian Magpies can mimic other sounds, including other animals and technology like cameras and car alarms. (This is how footnotes look, btw) [[/footnote]]

[*https://scp-wiki.wikidot.com/ Here is a link you've visited before]
[[[You've never visited this link, because it doesn't exist.]]]

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

[[collapsible show="+ Title Examples" hide="- Title Examples"]]
++++++ First Title
+++++ Second Title
++++ Third Title
+++ Fourth Title
++ Fifth Title
+ Sixth Title
[[/collapsible]]

[[collapsible show="+ This is a collapsible" hide="- Click here to close it"]]
Only about 10% of Australian Magpies will swoop. But the laws of nature and the universe dictate they will always be in areas most inconvenient to you.
[[/collapsible]]

@@ @@

------
[[tabview]]
[[tab Tabulator]]
Australian Magpies can hear bugs underground.

This is both creepy and cool.
[[/tab]]
[[tab Tabulation]]
Australian Magpies recognise people's faces.

They do this so they know who to swoop first.
[[/tab]]
[[tab Long Tab Example]]
Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.

Long tab with heaps and heaps of text in it.
[[/tab]]
[[tab Example of a tab with a long, long name.]]
If an Australian Magpie really, really, really likes you, it'll introduce its babies to you

And make you babysit while it goes down to the pub.
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[/tabview]]

@@ @@

||~ This is a ||~ Table ||
|| You should know || How to make these ||
|||| Already ||

@@ @@
------

> This is a blockquote, created by putting "> " at the start of every line.
> I was going to put another Australian Magpie fact here, but I ran out.
> ------
> That's a horizontal rule. You've seen these before, but now it's in the blockquote. 
>> This is a nested blockquote inside a nested blockquote.
>>> This is a nested blockquote, inside a nested blockquote, inside a nested blockquote. Very fancy.

@@ @@
------
++ Theme Fonts
[[=]]

[[span style="font-family:var(--UI-font); font-size: calc(var(--base-font-size) * 2);"]]The UI font is Averia Sans Libre[[/span]]

[[span style="font-family:var(--header-font); font-size: calc(var(--base-font-size) * 2);"]]The header font is Creepster[[/span]]

[[span style="font-family:var(--title-font); font-size: calc(var(--base-font-size) * 2);"]]The title font is New Rocker[[/span]]

[[span style="font-family:var(--mono-font); font-size: calc(var(--base-font-size) * 2);"]]The monospace font is Ubuntu Sans Mono[[/span]]

[[/=]]

@@ @@
------
++ Custom divs
[[collapsible show="+ Click here to see the custom divs" hide="- Banish the custom divs"]]

[[div class="editors-note"]]
You can use this div class by putting by using the following code:
>  @@[[div class="editors-note"]]@@
> Your text and stuff here
>  @@[[/div]]@@
[[/div]]

[[div class="discount"]]
You can use this div class by putting by using the following code:
> @@ [[div class="discount"]]@@
> Your text and stuff here
> @@[[/div]]@@
[[/div]]

[[/collapsible]]

@@ @@
------
++ Theme code
[[collapsible show="+ Show code" hide="- Close code"]]
[[code type="css"]]
@import url('https://fonts.bunny.net/css2?family=Creepster&display=swap');
@import url('https://fonts.bunny.net/css2?family=Ubuntu+Sans+Mono&display=swap');
@import url('https://fonts.bunny.net/css2?family=Averia+Sans+Libre&display=swap');
@import url('https://fonts.bunny.net/css2?family=New+Rocker&display=swap');

:root {
    /* ===S-CSS-P INTEGRATION=== */
    /* If you're making a new CSS theme, please include the following three variables at minimum. */
    --theme-base: "black-highlighter";
    /* must be either "black-highlighter" or "sigma9" */
    --theme-id: "magpie-swoops";
    /* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
    --theme-name: "Magpie Swoops Theme";
    /* set this to your theme's full name */
    

/* ===HEADER ELEMENTS=== */
    --logo-image: url(" https://scp-wiki.wikidot.com/local--files/theme:magpie-swoops/magpieswoopslogo.png");
    --header-title: "Magpie Swoops";
    --header-subtitle: "Stories From Behind The Veil";


/* ===TYPEFACES=== */
    --UI-font: "Averia Sans Libre", sans-serif;
    --header-font: "Creepster", system-ui;
    --title-font: "New Rocker", system-ui;
    --mono-font: "Ubuntu Sans Mono", monospace;


/* ===THEME COLORS=== */

/* ===White and Greys=== */
    --bone-white: 242, 242, 242;
    --very-dark-bone-grey: 125, 125, 125;

/* ===Oranges=== */
    --pumpkin-orange: 255, 103, 24;
    --light-pumpkin-orange: 255, 145, 23;
    --burnt-pumpkin-orange: 133, 69, 0;
    

/* ===Purples=== */
    --dark-violent-violet: 70, 0, 89;
    --violent-violet: 116, 28, 140;
     --light-violent-violet: 166, 77, 191;
     --shadow-violent-violet: 150, 33, 193;

/* ===Greens=== */
    --slime-green: 144, 232, 38;
    --light-slime-green: 37, 232, 83;
    --dark-slime-green: 109, 176, 28;

/* ===Black=== */
    --charcoal: 15, 15, 15;
    
/* ===STANDARD THEME COLORS SUBSTITUTES=== */
    --white-monochrome: var(--bone-white);
    --pale-gray-monochrome: var(--charcoal);
    --light-pale-gray-monochrome: var(--pumpkin-orange);
    --very-light-gray-monochrome: var(--light-pumpkin-orange);
    --light-gray-monochrome: var(--light-pumpkin-orange);
    --gray-monochrome: var(--pumpkin-orange);
    --dark-gray-monochrome: var(--very-dark-bone-grey);
    --black-monochrome: var(--dark-slime-green);
    --pale-accent: var(--light-pumpkin-orange);
    --bright-accent: var(--burnt-pumpkin-orange);
    --medium-accent: var(--burnt-pumpkin-orange);
    --dark-accent: var(--dark-slime-green);
    --alt-accent: var(--light-slime-green);

/* ===GENERAL TEXT COLOUR === */
        --swatch-text-general: var(--bone-white);

/*  ===============================
    	======= SPECIFIC COLORS =======
    	===============================

/* Colors for Buttons, Tabs, Tables, Footnotes Hover/Modal, Etc. */

/* ===BACKGROUND GRADIENT=== */

/* ===GENERAL BACKGROUND=== */
/* Overall Page Background Color */
    --swatch-background: var(--charcoal);
/* Gradient Color used for the --gradient-background var */
    --background-gradient-color: var(--dark-violent-violet);

/* ===HEADER GRADIENT=== */
/* Colors forming the header gradient used in --gradient-header var */
    --header-gradient-color-bottom: var(--dark-violent-violet);
    --header-gradient-color-middle: var(--violent-violet);
    --header-gradient-color-top: var(--light-violent-violet);

/* ===PRIMARY GRADIENTS=== */
        --diagonal-stripes: unset;

/* ===TOPBAR GRADIENT=== */
/* Colors used in the --gradient-topmenu var to give the topbar its color */
    --swatch-topmenu-bg-color: var(--charcoal);
    --swatch-topmenu-border-color: var(--pumpkin-orange);

}

#header {
/* ===HEADER ELEMENTS=== */
/* ===HEADER TITLES=== */
/* Header H1 and H2 colors */
    --swatch-headerh1-color: var(--slime-green);

/* ===LOGIN BOX ELEMENT=== */
    --login-myaccount-underline-color: var(--slime-green);
    --login-myaccount-hover-bg-color: var(--burnt-pumpkin-orange);
    
/* Dropdown Box when arrow is clicked */
    --login-dropdown-bg-color: var(--charcoal);
    --login-dropdown-bg-image: var(--charcoal);
    --login-dropdown-bg-hover-color: var(--burnt-pumpkin-orange);

    
}

/* ===HEADER MARGIN/SHADOW=== */

#header h1 a {
    margin-top: calc(var(--header-height-on-desktop)/2 - 1em);
}

div#header h1 a:before {
     text-shadow: 2px 2px rgb(var(--shadow-violent-violet));
}

/* ===PAGE TITLE AND HEADER COLOUR CHANGE=== */

#page-title, h1,h2,h3,h4,h5,h6 { 
      color: rgb(var(--slime-green)); 

}


#top-bar {
/* ===TOPBAR ELEMENTS=== */

/* ===TOPBAR CATEGORIES=== */
    --topmenu-category-color: var(--bone-white);
    --topmenu-category-hover-color: var(--slime-green);
    --topmenu-hover-border-color: var(--slime-green);


/* ===DROPDOWN MENU=== */
    --dropdown-bg-color: var(--charcoal), 0.9;
    --dropdown-border-color: var(--slime-green), 0.5;
    --dropdown-links-color: var(--bone-white);
    --dropdown-links-hover-color: var(--bone-white);
    --dropdown-links-hover-bg-color: var(--dark-violent-violet);
}

#side-bar,
#interwiki {

/* ===SIDE-BAR ELEMENTS=== */

/* ===SIDE-BAR GENERAL=== */
        --sidebar-bg-color: var(--charcoal);
        --sidebar-resources-bg-color: var(--charcoal), 0.25;
        --sidebar-media-bg-color: var(--bone-white), 0.25;

/* ===SIDEBLOCK MENU=== */
    --sideblock-heading-text-color: var(--slime-green);


/* ===MENU-ITEMS=== */
    --sidebar-links-text: var(--bone-white);
    --sidebar-links-hover-bg-color: var(--burnt-pumpkin-orange);

}

/* ===FOOTER=== */
#footer {
    --footer-bg-color: var(--burnt-pumpkin-orange);
    --footer-link-hover-color: var(--pumpkin-orange);
}

#main-content {
/* ===MAIN CONTENT UI ELEMENTS */

/* ===UI ICONS=== */
/* ===PAGE OPTIONS ICONS=== */
    --ui-icon-bg: var(--burnt-pumpkin-orange);

/* ===TEXT EDITOR ICONS=== */
    --editor-icon-hover-color: var(--bone-white);


/* ===TABS=== */
    --tabs-selected-bg: var(--dark-violent-violet);
    --tabs-selected-outline: var(--pumpkin-orange);
    --tabs-bottom-border-color: var(--pumpkin-orange);
    --tabs-content-border-color: var(--pumpkin-orange);


/* ===TABLES=== */
    --tables-header-bg: var(--dark-violent-violet);


/* ===FOOTNOTES/BIBLIOGRAPHY FOOTER=== */
    --footnotes-footer-colorbar-color: var(--burnt-pumpkin-orange);
    --footnotes-footer-title-bg-color: var(--burnt-pumpkin-orange);

/* ===TOC=== */
    --toc-header-bg-color: var(--burnt-pumpkin-orange);
    --toc-header-text-color: var(--bone-white);
    --toc-header-text-hover-color: var(--slime-green);

    --toc-body-bg-color: var(--charcoal);
    --toc-directory-lines-color: var(--slime-green);

    --toc-body-link-color: var(--slime-green);


/* ===PAGE TAGS=== */
    --pagetags-title-bg: var(--pumpkin-orange);

}

/* ===MODALS=== */

:root {
        --modal-header-bg: var(--charcoal);
}

/* ===IMAGE BLOCK=== */

.scp-image-block {
    box-shadow: none;
}
 
:is(div.image-block,div.scp-image-block) :is(.image-caption,.scp-image-caption) {
    background-color: rgb(var(--burnt-pumpkin-orange));
}
 
/* SCROLLBAR COLOUR*/
 
html,
body {
    scrollbar-color: rgb(var(--pumpkin-orange)) rgb(var(--dark-violent-violet));
}

/* SELECTION COLOUR*/

::selection {
  background-color: rgb(var(--shadow-violent-violet));
}


/* ===CUSTOM DIVS=== */

.editors-note {
    border: 3px ridge rgb(var(--slime-green));
    padding: 1vh 1.5vw;
    margin: 1vh 1vw;
    box-shadow: 0.35vw 0.35vh rgb(var(--shadow-violent-violet));

}

.discount {
    border: 7px dashed;
    border-color: rgb(var(--slime-green)) rgb(var(--slime-green)) rgb(var(--shadow-violent-violet)) rgb(var(--shadow-violent-violet));
    padding: 1vh 1.5vw;
    margin: 5vh 0.5vw;
    text-align: center;

}
[[/code]]
[[/collapsible]]

@@ @@

[[/iftags]]

[[include :scp-wiki:component:toggle-sidebar-bhl]]

[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/theme%3Amagpie-swoops/1");
[[/module]]

[[include :scp-wiki:component:interwiki-style
| priority=3
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Amagpie-swoops/1
]]

Magpie Swoops Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source