Aegis Theme Dev

• 

  close

  Info

  ---

  X

  SCP-XXXX: TITLE
  NAME OF TALE/GOI-FORMAT
  Author: Author
  Original: LINK TO ORIGINAL
  Translator: Translator
  Image: Put any licensing information for images here
  Add anything else you'd like the reader to know

  ---

  More, optional info that appears in a new window. Remove the "[[include :scp-wiki:info:more]]" if you > don't want this

  ---

Hello! This is a Black Highlighter theme made for Prismal's canon. In order to use it, put the following on your page:

[[include :scp-wiki:theme:black-highlighter-theme]]
[[include :scp-wiki:theme:aegis]]

EXAMPLES

SCP Logo

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.¹

A link you probably visited once, idk

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

Why was the shovel so special?

Because it was a groundbreaking invention

Tabulation

More text.

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.

This empty tab right here has a really long name.

Empty Tab

Empty Tab

Empty Tab

Empty Tab

Empty Tab

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

---

That's a horizontal rule

Nested blockquotes

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

The body font is Inter.
The header and title font is Bangers.
The monospace font is Fira Code.

Footnotes

1. This is a footnote

Special divs in this theme

[[div class="blockquoteH"]]

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

[[div class="comic"]]

[[div class="modal"]]

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

[[div class="star-enter-active"]]
[[div class="star-leave-active"]]

BANG!

[[div class="circular-text-container"]]
[[div class="circular-text"]]

POW!

+ Show theme code

@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/normalize.min.css");
@import url("https://nu-scptheme.github.io/Black-Highlighter/css/min/black-highlighter.min.css");
/*
    Aegis Theme
    [2024 Wikidot Theme]
       by Uncle Nicolini with help from EstrellaYoshte, Stormbreath and ROUNDERHOUSE.
       Logo made by Prismal
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 
:root {
    --theme-base: "black-highlighter";
    --theme-id: "aegis";
    --theme-name: "AEGIS Theme";
    --background-background: 0, 0, 0;
    /* for Speech Bubble Div */
    --logo-image: url("https://scp-sandbox-3.wdfiles.com/local--files/amazingfantasy/resized%20AEGIS%20logo.png");
    --header-title: "";
    --header-subtitle: " ";
 
    --header-height-on-desktop: 11.5rem;
    --header-height-on-mobile: 11.5rem;
 
    --light-blue: 207, 223, 245;
    --pale-blue: 157, 186, 226;
    --light-gray-blue: 112, 149, 201;
    --blue-monochrome: 75, 115, 171;
    --dark-blue-monochrome: 49, 91, 150;
    --black-monochrome: 7, 7, 40;
    --bright-accent: 73, 133, 230;
    --medium-accent: 1, 45, 115;
    --dark-accent: 49, 91, 150;
    --grey: 193, 197, 201;
    --grey2: 159, 160, 161;
    --printer-paper: 245, 242, 235;
 
    --swatch-topmenu-bg-color: var(--dark-accent);
    --swatch-topmenu-border-color: var(--light-gray-blue);
 
    --rating-module-button-color: var(--bright-accent);
    --rating-module-button-credit-color: var(--bright-accent);
    --rating-module-text-color: var(--dark-accent);
    --rating-module-button-cancel-color: var(--grey);
 
    --mono-font: "Fira Code", "Andale Mono", "Courier New", Courier, monospace;
    --header-font: "Bangers", system-ui;
 
    /* Toggle Sidebar Variable */
    --toggle-border-color: rgb(var(--dark-accent));
    --toggle-icon-color: rgb(var(--dark-accent));
    --toggle-roundness: 0;
}
 
/* HEADER AND TOPBAR */
#top-bar {
    --topmenu-category-color: var(--light-blue);
    --topmenu-category-hover-color: var(--light-gray-blue);
    --topmenu-hover-border-color: var(--light-gray-blue);
 
    --mobile-topmenu-sidebar-button-color: var(--pale-blue);
 
    --dropdown-bg-color: var(--bright-accent);
    --dropdown-border-color: var(--dark-accent);
    --dropdown-links-color: var(--grey);
    --dropdown-links-hover-color: var(--grey2);
    --dropdown-links-hover-bg-color: var(--printer-paper);
}
 
#header h1 { 
    width: 100%; 
}
 
#header h1 a {
    text-shadow: none;
    height: 100%;
    color: transparent;
    background-image: url("https://scp-sandbox-3.wikidot.com/local--files/nicotest/aegis3.png");
    margin: auto;
    padding: 0;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    position: relative;
    width: min(10em, 65vw);
    margin-left: 5em;
}
 
#header h1 a::before {
    text-shadow: none;
    color: transparent;
}
 
#header h2 {
    display: none;
}
 
div#page-title,
.meta-title {
    text-align: center;
}
 
/* BREADCRUMBS */
 
#breadcrumbs a:hover,
.pseudocrumbs a:hover,
#breadcrumbs a:active,
.pseudocrumbs a:active,
#breadcrumbs a:focus-within,
.pseudocrumbs a:focus-within {
    color: rgb(var(--printer-paper));
    text-decoration: none;
}
 
@media only screen and (max-width: 56.25rem) {
    #header {
        background-image: initial;
    }
}
 
/* ---- Speech Bubble Quoteblock (borrowed from Hansarp Theme) Syntax ---- */
 
#main-content div.blockquoteH {
    color: #000000;
    /* text color */
    background-color: transparent;
    box-shadow: none;
  margin: 1rem 0 calc(8% + 2.5rem) 3.5rem;
    padding: 1.85rem 1.75rem 1.45rem 1.35rem;
    position: relative;
    -webkit-filter: brightness(1.14) hue-rotate(2deg) drop-shadow(0.65rem 0.45rem 0 rgb(var(--background-background)));
    filter: brightness(1.14) hue-rotate(2deg) drop-shadow(0.65rem 0.45rem 0 rgb(var(--background-background)));
}
 
#page-content > div.blockquoteH {
    -webkit-filter: drop-shadow(0.65rem 0.45rem 0 rgb(var(--background-background)));
    filter: drop-shadow(0.65rem 0.45rem 0 rgb(var(--background-background)));
}
 
div.blockquoteH::before,
div.blockquoteH::after {
    content: "";
    display: block;
    position: absolute;
    background-color: #FFFFFF;
    /* foreground background */
    z-index: -1;
}
 
div.blockquoteH::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-clip-path: polygon(0 1rem, 100% 0, calc(100% - 1rem) 100%, 0.5rem calc(100% - 0.5rem));
    clip-path: polygon(0 1rem, 100% 0, calc(100% - 1rem) 100%, 0.5rem calc(100% - 0.5rem));
}
 
div.blockquoteH::after {
    top: calc(97.5% - 0.75rem);
    right: calc(90% - 2rem);
    width: calc(15% + 5rem);
    height: calc(10% + 3rem);
    -webkit-clip-path: polygon(0 55%, 40% 40%, 37% 0, 100% 30%, 93% 83%, 60% 64%, 56% 84%);
    clip-path: polygon(0 55%, 40% 40%, 37% 0, 100% 30%, 93% 83%, 60% 64%, 56% 84%);
    transform: rotate(-25deg);
}
 
@media only screen and (max-width: 42.5rem) {
    :is(div.blockquoteH)::after {
        display: none;
    }
 
    #main-content div.blockquoteH {
        margin: 1rem auto;
        padding: 1.75rem 1.75rem 1.15rem 1.5rem;
    }
}
 
.wikibox {
    background-color: #F8F9FA;
    border: solid 1px #A2A9B1;
    margin: 0.5em 0 0.5em 1em;
    padding: 0.2em 0.4em;
    float: right;
    clear: right;
    font-size: 88%;
    line-height: 1.5em;
    width: 16rem;
}
 
.wikibox hr {
    margin-left: -0.4em;
    margin-right: -0.4em;
}
 
@media (max-width: 540px) {
    .wikibox {
        float: none;
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }
}
 
div.blockquoteW,
#toc {
    background-color: #F8F9FA;
    border: solid 1px #A2A9B1;
    width: 100%;
    /*changed from 72 to 100 to try to get the width the same as the BHL Div */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;\ 
}
 
.comic {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-gap: 0.8rem;
    margin: 0 auto;
}
 
.panel-1 {
    grid-column: span 6;
}
 
.panel-2 {
    grid-column: span 5;
}
 
.panel-3 {
    grid-column: span 5;
}
 
.panel-4 {
    grid-column: span 7;
}
 
.panel-5 {
    grid-column: span 9;
}
 
.panel-6 {
    grid-column: span 6;
}
 
.panel-7 {
    grid-column: span 5;
}
 
.panel-8 {
    grid-column: span 5;
}
 
.comic {
    aspect-ratio: auto;
    padding: 1rem;
    margin: 2rem 0;
    background-color: #fff;
    box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
}
 
[class^="panel-"] {
    background-color: #eee;
}
 
.collection {
    position: absolute;
    display: block;
    padding: 0.5rem 1rem;
    border: 1px solid #F07739;
    left: 10px;
    top: 10px;
    color: #F07739;
    text-decoration: none;
    font-weight: 700;
}
 
.modal {
    padding: 0.5em;
    margin: 0.5em 1em;
    border: solid 4px rgba(0, 0, 0, 1);
    background: #fbfbfb;
    font-family: 'Bangers', system-ui;
    font-size: 1.5em;
}
 
.info-container .collapsible-block-folded,
.info-container .collapsible-block-unfolded-link {
    background: rgb(var(--bright-accent));
}
 
.info-container .collapsible-block-folded .collapsible-block-link,
.info-container .collapsible-block-link {
    background: rgb(var(--dark-accent));
}
 
/* unvisited link */
a:link {
    color: #7095C9;
}
 
/* visited link */
a:visited {
    color: #31659B;
}
 
/* mouse over link */
a:hover {
    color: #4985E6;
}
 
/* selected link */
a:active {
    color: blue;
}
 
#license-area {
    color: rgb(var(--pale-blue));
}
 
hr {
    border-color: rgb(var(--dark-blue-monochrome));
    background-color: rgb(var(--dark-blue-monochrome));
}
 
.page-rate-widget-box {
    background: rgb(var(--dark-blue-monochrome));
}
 
a.footnoteref {
    padding: 0.05em;
    color: rgb(var(--light-blue:));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    box-shadow: inset 0 0 0 0rem rgba(var(--light-blue:), 1);
    transition: box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1), color 300ms cubic-bezier(0.4, 0.0, 0.2, 1), padding 300ms cubic-bezier(0.4, 0.0, 0.2, 1), margin 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
 
a.footnoteref:hover {
    box-shadow: inset 0 -1.25em 0 0 rgba(var(--light-blue:), 1);
    text-decoration: none;
    color: rgb(var(--light-blue:))
}
 
.footnotes-footer a[href*="javascript"]::before,
.bibitems .bibitem::after,
.footnotes-footer {
    background-color: rgb(var(--light-blue));
}
 
:is(div.image-block, div.scp-image-block) {
    border: solid 0.5rem rgb(var(--printer-paper));
    border-bottom: solid 0rem rgb(var(--printer-paper));
    box-shadow: 0rem 0.26rem 0rem 0rem rgb(var(--printer-paper));
    box-sizing: border-box;
}
 
:is(div.image-block, div.scp-image-block),
:is(.image-caption, .scp-image-caption) {
    background-color: rgb(var(--printer-paper));
    border: solid 0.25rem rgb(var(--printer-paper));
    color: rgb(var(--black-monochrome));
    font-size: 0.84rem;
    box-shadow: none;
}
 
.star-enter-active {
    animation: 1s star reverse;
    animation-iteration-count: infinite
}
 
.star-leave-active {
    animation: 1s star;
    animation-iteration-count: infinite
}
 
@keyframes star {
    0% {
        clip-path: polygon(0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%);
    }
 
    50% {
        clip-path: polygon(0% 0%, 50% 100%, 100% 0%, 0% 50%, 100% 100%, 50% 0%, 0% 100%, 100% 50%);
    }
 
    100% {
        clip-path: polygon(50% 50%, 50% 100%, 50% 50%, 0% 50%, 50% 50%, 50% 0%, 50% 50%, 100% 50%);
    }
 
}
 
.circular-text-container {
    width: 200px;
    height: 200px;
    shape-outside: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    overflow: hidden;
    background-color: #9DBAE2;
    display: inline-block;
    margin: 0 auto;
}
 
.circular-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}