Ad Abyssum Theme (Penumbra)

Link to article: Ad Abyssum Theme (Penumbra).

@import url(https://scp-wiki.wikidot.com/theme:ad-abyssum-penumbra/code/1);

```
color: var(--accentColor);
```
```
color: var(--accentColor);
```
```
display: none
```
```
display: none
```

```
modal
```
```
modal
```
```
modal
```

[[iftags +theme]]

[[=]]
[[module Rate]]
[[/=]]

@@ @@

[[=]]
//“And that must end us, that must be our cure:
To be no more. Sad cure! For who would lose,
Though full of pain, this intellectual being,
Those thoughts that wander through eternity,
To perish, rather, swallowed up and lost
In the wide womb of uncreated night
Devoid of sense and motion?”//
[[/=]]

@@ @@
@@ @@
@@ @@
@@ @@

[[div class="modal"]]

This theme was made for the Department of Tactical Theology. You can see all Tactical Theology articles [https://scp-wiki.wikidot.com/system:page-tags/tag/tactical-theology#pages here].

To import this theme to your page, put the following text anywhere inside it:

> {{@@[[include :scp-wiki:theme:ad-abyssum-penumbra]]@@}}

This theme is built off of the [https://scpwiki.com/theme:penumbra Penumbra Theme], made by [[*user EstrellaYoshte]]. It is __not__ necessary to import that theme, as it is automatically added when importing this theme.

----

Additionally, this theme comes with some presets for the subheader + logo, which can be used by pasting the following:

> {{@@[[@@include :scp-wiki:theme:ad-abyssum-penumbra division=[[span style="color: var(--accentColor);"]]<DIVISION HERE>[[/span]]@@]]@@}}

...where [[span style="color: var(--accentColor);"]]{{<DIVISION HERE>}}[[/span]] is replaced with one of the following: {{abrahamics}}, {{east_asian}}, {{indus_vedic}}, {{shamanism_animism}}, {{neopaganism}}, {{parareligions}}, or {{demonology}}.

Below are examples of different properties of this theme.

[[/div]]

@@ @@
@@ @@
@@ @@

[[div class="modal"]]

[[include component:image-block name=https://upload.wikimedia.org/wikipedia/commons/6/6b/Katharinenkloster_Sinai_BW_2.jpg|caption=This place is where we store all the magic stuff.]]

+ Header 1

++ Header 2

+++ Header 3

++++ Header 4

+++++ Header 5

++++++ Header 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. [https://scp-wiki.wikidot.com/scp-5993 Ut enim ad minim veniam], //quis nostrud// **exercitation ullamco** //**laboris nisi ut aliquip**// ex ea commodo consequat. [[[9828d03c-c0b4-40d2-a6fb-600c8e08b8d3|Duis aute irure dolor]]] in reprehenderit[[footnote]]Footnote[[/footnote]] in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

[[collapsible show="Collapsible" hide="Hide Collapsible"]]

= Surprise!

[[/collapsible]]


[[/div]]

@@ @@

[[div class="modal"]]

> THIS IS A TEST of the National Emergency Blockquote System.  This system was developed by [[*user Yossipossi]] and [[*user Aftokrator]] in voluntary cooperation with the [https://05command.wikidot.com/technical-staff-main SCP Wiki's Tech Team] to keep you informed in the event of a blockquote. 
> 
>> If this had been an actual blockquote an official blockquote would have followed the tone alert you heard at the start of this blockquote. A similar wireless blockquote alert test blockquote has been sent to all Wikidot users in the nation. Some Wikidot users will receive the blockquote. Others will not. **No action is required.**

@@ @@

||~ Item ||~ Akiva Output ||
|| Baseball Cap || 0.3–0.56x ||
|| Cross of Jesus || 1.2–1.23x ||
|| Garfield Comics || 436–453x ||

[[/div]]

@@ @@

[[tabview]]
[[tab Content Tab]]

… Having studied the Inn, and testing its properties, only one conclusion can be reached. God has a blind spot, and we have found where it is.

[[/tab]]
[[tab Empty Tab]]

[[/tab]]
[[tab Long Content Tab]]



**INTERNAL LEVEL-5 CLASSIFIED DOCUMENTATION. DO NOT DISSEMINATE.**

**Project #:** DTT-P-72-BBR-7800-L5-5

**Project Location:** Deep Sea Site-72, associated regions

**Assigned Personnel:** Bintang bin Reehab, Department of Tactical Theology

**Project Briefing:** Investigate the anomalously large cadaver of the Fromia monilis (necklace starfish) that had manifested near Deep Sea Site-72 five days ago in regards to its potential connections to the ongoing SCP-7800 crisis and any possible ties to fifthism and / or associated religious movements. Maintain a daily intake of Class W Mnestics due to potential antimemetic properties should any such connections be proven. Undergo bi-weekly mental health screenings due to the project lead's thalassophobia and potential fifthist influence.

Signed,
— //**Yossarian Leiner**, Department of Tactical Theology, Director//

[[/tab]]
[[tab Stuff In Tabs Tab]]

+ Header in the Tabber

+++ Header in the Tabber But Smaller

= Text — [https://scp-wiki.wikidot.com/christmas-fam Link]

----

> **Dr. Long:** And what happened next?
>
> **Dr. [REDACTED]:** This is what he told me:
>
>> **Dr. Jonathan:** We stole all the gold!
>
> **Dr. [REDACTED]:** Ain't that crazy?

[[/tab]]
[[/tabview]]

@@ @@

[[footnoteblock]]

@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@
@@ @@

[[/iftags]]

[[div style="display: none"]]
[[include :scp-wiki:theme:penumbra]]
[[module CSS]]
@import url(https://scp-wiki.wikidot.com/theme:ad-abyssum-penumbra/code/1);
[[/module]]
[[/div]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wikidot.com/theme:ad-abyssum-penumbra
]]

[[iftags +theme]]

[[code type="css"]]


/* -=- FONTS / PENUMBRA -=- */


@import url('https://fonts.googleapis.com/css2?family=New+Rocker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nova+Cut&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Finlandica&display=swap');

:root {
    --header-title: "TACTICAL THEOLOGY";
    --header-subtitle: "INVENIENT NOVUM NUMEN";
    
    --accentColor: #F0A400;
    --accentColorLite: #FFBA24;
    --hue: 30deg;
    
    --header-font: "Finlandica", serif;
    --body-font: "verdana", sans-serif;
    --textColor: #FDFDFD;
    --textColorAlt: #FFFFFF;

    /* Defining the subheaders for different divisions. */
    --abrahamics: "ABRAHAMICS DIVISION";
    --east_asian: "EAST ASIAN DIVISION";
    --vedic_indus: "VEDIC-INDUS DIVISION";
    --shamanism_animalism: "SHAMANISM & ANIMISM DIVISION"; /* TYPO; kept for backwards-comparability. */
    --shamanism_animism: "SHAMANISM & ANIMISM DIVISION";
    --neopaganism: "NEOPAGANISM DIVISION";
    --parareligions: "PARARELIGIONS DIVISION";
    --demonology: "DEMONOLOGY DIVISION";
}


/* -=- WIDE CHANGES -=- */


body {
    background-attachment: fixed;
    background-color: #20242C;
    background-image: linear-gradient(180deg, #4A3933 0%, #4A393385 70%, #4A3933 100%), url(https://scp-wiki.wdfiles.com/local--files/theme%3Aad-abyssum/tacttheo_sidebar_small_compressed.png), linear-gradient(to right, #FF8D36, #FF8D36);
    background-size: cover;
    font-size: 0.81rem;
}

/* Selection Color */
::selection {
    color: var(--darkerColor);
}

/* -- Headers -- */

h1, h2, h3 {
    color: var(--accentColor);
}

h1 {
    font-size: 1.95rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.35rem;
}

h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.05rem;
}

h6 {
    font-size: 0.95rem;
}

#main-content :is(h1, h2, h3, h4, h5, h6) {
    filter: drop-shadow(0 0.375rem 0.688rem rgba(0, 0, 0, 0.6));
    text-align: center;
}

/* Link Colors */
a:hover, a.newpage:hover, a:visited:hover, #side-bar a:not(.close-menu):hover {
    color: var(--darkerColor);
}

a.newpage {
    filter: none;
}

/* Adds an "underline" to links in the page content. */
#page-content :not(.avatarhover, .btn) > a {
    border-bottom: thin solid var(--accentColorLite);
}


strong {
    color: var(--accentColor);
}

tt {
    font-size: 110%;
}

ul {
    list-style-type: "❖ "
}

ol li, ul li {
    margin: .27rem 0 .53rem;
}


/* -=- HEADER -=- */


#header {
    height: 9.688rem;
}

/* -- Website Title / Subtitle -- */

#header h1 a::before {
    background: linear-gradient(45deg, #F2DC7A 0%, var(--accentColor) 50%, #F2DC7A 100%);
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.375rem 0.3rem rgba(0,0,0,0.6));
    font-family: "Nova Cut", sans-serif;
    font-size: 120%;
    font-weight: bold;
    -webkit-background-clip: text;
}

#header h2 {
    margin-top: 0.8rem;
}

#header h2::before {
    background: linear-gradient(45deg, #F2DC7A 0%, var(--accentColor) 50%, #F2DC7A 100%);
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.8));
    font-family: "New Rocker", sans-serif;
    font-size: 120%;
    letter-spacing: 0.313rem;
    margin-top: 0.375rem;
    -webkit-background-clip: text;
}

/* Logo Effect */
#extra-div-1 {
    filter: opacity(.33) drop-shadow(0 0.625rem 0.188rem #000000);
}

/* -- User Information -- */

#my-account {
    display: none;
}

/* Increase size and add glow to user profile pic. */
.printuser img.small {
    background-color: var(--darkerColor);
    background-image: none !important;
    border: 1px solid var(--accentColor);
    box-shadow: 0 0 2px var(--accentColor);
    height: 18px;
    margin-right: 7px;
    padding: 0 0 0 0;
    transition-duration: 0.2s;
    width: 18px;
}

.printuser img.small:hover {
  box-shadow: 0 0 5px var(--accentColor);
  transition-duration: 0.2s;
}

#login-status {
    color: transparent; /* Removes the pipe after the account name. */
    right: initial;
    text-align: left;
    top: 1em;
    width: auto;
    z-index: 1;
}

#login-status > a {
    background-color: var(--darkerColor);
    border: 1px solid var(--accentColor);
    margin-left: -7px;
}

.printuser {
    color: var(--textColor);
}

#account-topbutton::before {
    background-color: transparent;
}

#account-options::before {
    background-color: var(--darkerColor);
}

#account-options::after {
    background-color: transparent;
    mix-blend-mode: initial;
}

div#account-options {
    border: 1px solid var(--accentColor);
    width: 6.5em;
}

/* -- Search Box -- */

#search-top-box {
    top: 1.1em !important;
}

#search-top-box-form input[type="submit"]:focus, #search-top-box-form input[type="submit"]:hover {
    box-shadow: none;
    text-shadow: none;
}

#search-top-box-form input[type="submit"] {
    border: 1px solid var(--accentColor);
    color: var(--textColor);
    font-size: unset;
}

/* -- Top Bar -- */

#top-bar {
    top: 9.75rem;
}

#top-bar div.open-menu a {
    background-color: var(--darkerColor);
    border: 1px solid var(--accentColor);
    border-radius: 0;
    box-shadow: 0 0 10px var(--darkerColor);
    filter: drop-shadow(0 0.375rem 0.688rem rgba(0, 0, 0, 0.4));
    height: 1.15em;
    line-height: 1.1em;
    width: 1.15em;
}

/* Add bottom border for top bar pop-up. */
#top-bar ul li li:last-child, #top-bar ul li li:last-child:hover {
    border-bottom: 1px solid var(--accentColorLite);
}

/* Add top border for top bar pop-up. */
#top-bar ul li li:first-child, #top-bar ul li li:first-child:hover {
    border-top: 1px solid var(--accentColorLite);
}

/* -- Title / Meta-Title -- */

#page-title {
    display: none;
}

.meta-title {
    font-size: 238%;
    margin: 0;
    padding: 0;
}

.meta-title p {
    border-bottom: none;
}

/* -- Hovertip / Footnote -- */

.hovertip .f-content{
    font-size: 0.81rem;
}

#page-content a.footnoteref {
    border: 0;
    font-size: 0.7rem;
    font-weight: bold;
}

.footnotes-footer {
    border: 2px solid var(--accentColor);
    box-shadow: none;
}

/* Add space between the footnotes. */
.footnote-footer:not(:last-child) {
    margin-bottom: 5px;
}

.footnote-footer a {
    font-weight: bold;
}

.footnotes-footer .title {
    color: var(--accentColor);
    font-size: 1.5em;
}


/* -=- SIDEBAR -=- */

#side-bar {
    background: #4A3933;
    padding: 1em 0;
}

#side-bar .heading {
    border-bottom-color: var(--textColor);
    color: var(--textColor);
    font: bold 125% "Josefin Sans", sans-serif;
    padding-left: 0;
}

#side-bar .side-block {
    background: #4A3933;
    border: 0;
    box-shadow: none;
}

#side-bar .side-block.media {
    background: #4A3933;
}

#side-bar .media .menu-item img {
  display: initial;
}

#side-bar .side-block.resources {
    background: #4A3933;
}


/* -=- RATING MODULE -=- */


div.page-rate-widget-box {
    border: none;
    border-left: 3px solid var(--accentColor);
    border-right: 3px solid var(--accentColor);
    box-shadow: none;
    font-size: 80%;
    padding: 4px;
}


/* -=- TABBERS -=- */


.yui-navset .yui-nav a, .yui-navset .yui-navset-top .yui-nav a {
    font-family: var(--header-font);
    font-size: 130%;
    font-weight: inherit;
}

.yui-navset .yui-content, .yui-navset .yui-navset-top .yui-content {
    padding: .53em;
}

.yui-navset .yui-content {
    line-height: 1.5;
}


/* -=- SCP IMAGE BLOCKS -=- */


.scp-image-block {
    border: 1px solid var(--accentColorLite);
    box-shadow: none;
}

.scp-image-block div.scp-image-caption {
    border: none;
    border-top: 1px solid var(--accentColorLite);
}


/* -=- COLLAPSIBLES -=- */


#page-content .collapsible-block-folded .collapsible-block-link::before {
    content: "▼ "
}

#page-content .collapsible-block-folded .collapsible-block-link::after {
    content: " ▼"
}

#page-content .collapsible-block-unfolded .collapsible-block-link::before {
    content: "▲ "
}

#page-content .collapsible-block-unfolded .collapsible-block-link::after {
    content: " ▲"
}

#page-content .collapsible-block-unfolded-link {
    box-shadow: none;
}

#page-content .collapsible-block-link {
    color: var(--accentColorLite);
    font-size: 125%;
}

#page-content .collapsible-block .collapsible-block-link:hover {
    color: var(--darkerColor);
}


/* -=- CODE BLOCKS -=- */


.code {
    background-color: var(--darkColor);
}

.code :is(.hl-code, .hl-identifier, .hl-string, .hl-special, .hl-quotes, .hl-brackets) {
    color: var(--textColor);
}

.code .hl-var, .code .hl-number {
    color: #FFE8B7; /* Look I'm running out of colors here. */
}

.code .hl-reserved {
    color: var(--accentColor);
}


/* -=- PAGE EDITOR -=- */


.wd-editor-toolbar-panel ul li a {
    opacity: 0.4;
}

.wd-editor-toolbar-panel ul li a:hover {
    opacity: 1;
}

#edit-page-textarea {
    background-color: var(--darkColor);
    border: 2px solid var(--accentColor);
    color: var(--textColor);
    padding: 3px;
}

#edit-page-form textarea, #edit-page-form #edit-page-title{
    background-color: var(--darkColor);
    border-color: var(--accentColorLite);
    color: var(--textColor);
}

#lock-timer {
    color: var(--accentColor);
}

#lock-info {
    border-color: var(--accentColor);
}

.change-textarea-size a {
    background-color: var(--darkerColor);
    border-color: var(--accentColor);
    color: var(--textColor);
}

.edit-help-34 {
    font-size: 11px;
}


/* -=- MISCELLANEOUS -=- */


/* General Modal Box */
.modal {
    background: #20242C;
    box-shadow: 0 0 0.188rem rgba(0, 0, 0, 0.3);
    border: solid 0.25rem var(--accentColor);
    margin: 1.5rem 0.5rem 0.5rem 0.5rem;
    padding: 0.938rem 0.938rem 0.938rem 0.938rem;
    width: auto;
}

/* Blockquotes */
blockquote, div.blockquote, #toc {
    border: solid 2px var(--accentColor);
    box-shadow: none;
}

/* -- Preview Message -- */

.preview-message:hover {
    opacity: 1;
    transition-duration: 0.5s;
}

.preview-message {
    background-color: var(--darkerColor);
    border: 2px solid var(--darkColor);
    opacity: 0.6;
    right: -23em;
    transition-duration: 0.3s;
}

/* -- Page Options -- */

#page-options-container {
    opacity: 0.7;
    margin-top: 5px;
    transition-duration: 0.3s;
}

#page-options-container:hover {
    opacity: 1;
    transition-duration: 0.3s;
}

/* Wikiwalk Footer */
.footer-wikiwalk-nav {
    background: var(--darkerColor);
    border: 2px solid var(--accentColor);
    margin: 10px auto;
    padding: 0 10px 0 10px;
    width: fit-content;
}

/* -- Adult Content Splash Fixing -- */

ul.modal-wrapper {
    padding: 0;
}

li.unfolded {
    list-style: none;
}

#page-content div#u-adult-warning a {
    border-bottom: none;
}

#page-content div#u-adult-warning a:hover {
    background-color: transparent;
}

#u-adult-warning .footer-wikiwalk-nav {
    border: none;
}

/* Changes the color of the little line above page tags. */
.page-tags span {
    border-top: 1px solid var(--accentColorLite);
}

/* Makes the +'s and -'s white in the "who rated" tab. */
#who-rated-page-area > div span {
    color: var(--textColour) !important;
}

/* -- Small joke in the table listing Wikidot account details. -- */

.modal-body table tbody tr:last-child td:first-child, .modal-body table tbody tr:first-child td:first-child {
    font-size: 0;
}

.modal-body table tbody tr:last-child td:first-child::before {
    content: "Date of Damnation:";
    font-size: 0.81rem;
    font-weight: bold;
}

.modal-body table tbody tr:first-child td:first-child::before {
    content: "Date of Creation:";
    font-weight: bold;
    font-size: 0.81rem;
}

/* Make "sub" text white. */
.edit-page-bottomtable .sub, #page-tags-input ~ .sub, #upload-dfilename ~ .sub, #file-comments ~ .sub {
    color: var(--textColor);
}

/* -- Wikidot footer in the corner. -- */

#footer {
    opacity: 0.1;
    transition-duration: 0.3s;
    margin-top: 1.5em;
}

#footer:hover {
    opacity: 1;
    transition-duration: 0.3s;
}

/* Adds a period to the end of the licensing notice. I won't forget it, Michal. */
#license-area a::after {
    content: "."
}

/* Baruch Shem K'vod */
#license-area::after {
    content: "ברוך שם כבוד מלכותו לעולם ועד.";
}

/* Besiyata Dishmaya! */
body::before {
    content: "בס״ד";
    opacity: 0.2;
    padding-right: 5px;
    position: fixed;
    right: 0;
    z-index: 9999;
}


/* -=- MOBILE CHANGES -=- */


@media (min-width: 768px) {
    #page-content {
        font-size: inherit;
    }
}

@media (max-width: 460px) {
    .modalsignature p {
        font-size: 80%;
    }

    #header h1 a::before {
        font-size: 100%;
    }
    
    #header h2::before {
        font-size: 100%;
    }

    body::before {
        font-size: 80%;
        opacity: 0.1;
    }

}

[[/code]]
[[/iftags]]

[[div [[iftags -theme]]style="display: none"[[/iftags]]]]
[[size 80%]]This bit down here controls the logo and subtitle changes. Is it cursed? Yes. Is it annoyingly effective? Also yes.[[/size]]

[[module CSS show="true"]]

:root {
    --lgurl: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aad-abyssum-penumbra/tacttheo_{$division}.png);
    --header-subtitle: var(--{$division});
}

[[/module]]
[[/div]]

Ad Abyssum Theme (Penumbra)

Module Styles

Inline Styles

Includes

CSS Classes

Page Source