Immrama Theme

Link to article: Immrama Theme.


/* Immrama Theme              */
/* [2025 Wikidot Theme]       */
/* by Arthcymro               */

/*-----------------*/
/*---- IMPORTS ----*/
/*-----------------*/

@import url('https://fonts.bunny.net/css2?family=Benne&display=swap');

:root {

    /*----------------------*/
    /*---- BEDROCK VARS ----*/
    /*----------------------*/

    --header-font-primary: 'Benne';
    --UI-font-primary: 'Benne';
    --body-font-primary: 'Benne';
    font-size: 110%;

    --logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Blue%29.png);
    --title: "Immrama";
    --subtitle: "It's a long story";
    --title-size: 1.75rem;
    --subtitle-size: 1.25rem;

    --basalt-primary-color: 227, 226, 218;
    --basalt-secondary-color: 200,199,184;
    --basalt-tertiary-color: 173, 171, 149;
    --basalt-main-text-color: 20, 20, 20;
    --basalt-overtone: 50, 50, 50;
    --basalt-undertone: 28, 69, 45;
    --basalt-bright-element-color: 66, 101, 68;
    --basalt-dark-element-color: 28, 69, 45;
    --basalt-alternate-color: 166, 103, 54;
    --basalt-positive-color: 0, 100, 0;
    --basalt-negative-color: 109, 17, 17;
    --side-bar-link-background-hover: 28, 69, 45;
    --general-border-color: 20, 47, 33;
    --document-background-color: 243,223,193;
    --link-color: 36, 107, 206;
    --link-visited-color: 28, 84, 163;

/*-------------------------*/
/*---- IMMRAMA CLASSES ----*/
/*-------------------------*/

body {  
    background-image: linear-gradient(#e3e2da, #A6ABB1 100%);
}
.footnotes-footer .footnote-footer>a:first-child {
    font-family: var(--body-font);
}
div.papernote {
    display: block;
    margin-inline: auto;
    margin-block: 1.4rem;
    padding: 1rem 2rem;
    background-color: rgb(var(--basalt-secondary-color));
    color: rgb(var(--basalt-main-text-color));
}
div.papernote {
    display: block;
    margin-inline: auto;
    margin-block: 1.4rem;
    padding: 1rem 2rem;
    background-color: rgb(var(--document-background-color));
    color: rgb(var(--basalt-main-text-color));
}
div.document {
    background-color: rgb(var(--document-background-color));
    box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.2);
    color: rgb(var(--basalt-main-text-color));
}
hr {
    border-top: none;
    position: relative;
    height: 0.35rem;
    background: rgba(0, 0, 0, 0);
    display: flex;
}
hr::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border-top: none;
    width: 100%;
    height: 0.125rem;
    background: #246bce;
    background-position: center center;
}
.imm-email {
    border: solid 2px #000000; 
    width: 88%; 
    padding: 1px 15px; 
    margin: 10px; 
    box-shadow: 0 1px 3px rgba(0,0,0,.5); 
    background-color: rgb(var(--basalt-primary-color))
}
.imm-email-example a.collapsible-block-link {
    font-weight: bold;
}
.imm-tofrom {
    margin-left: 10px; 
    margin-top: 5px; 
    padding: 1px 15px; 
    border-left: solid 3px #246bce
}
.yui-navset.yui-navset-top>ul.yui-nav {
    font-family: var(--header-font);
}
.yui-navset.yui-navset-top .yui-content {
    background-color: rgb(var(--basalt-primary-color));
}
:is(:where(#page-content) table:not(.form),table.wiki-content-table) td {
    border: solid .05rem rgb(var(--general-border-color));
    padding: .5em .625em;
    background-color: rgb(var(--basalt-primary-color));
} 
#header h1 a span {
    font-variant: small-caps;
}
.triskhr {
    min-height: 9em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line.png);
    background-size: 600px;
@media only screen and (max-width: 600px) {
    background-size: 360px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.blood-triskhr {
    min-height: 9em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line%20%28Red%29.png);
    background-size: 600px;
@media only screen and (max-width: 600px) {
    background-size: 360px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.smalltriskhr {
    min-height: 5.5em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line.png);
    background-size: 350px;
@media only screen and (max-width: 600px) {
    background-size: 210px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.blood-smalltriskhr {
    min-height: 5.5em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line%20%28Red%29.png);
    background-size: 350px;
@media only screen and (max-width: 600px) {
    background-size: 210px;
}
    background-repeat: no-repeat;
    background-position: center;
}

```
display: none;
```
```
font-family: var(--UI-font);
```

```
blockquote
```
```
blockquote
```
```
notation
```
```
notation
```
```
jotting
```
```
jotting
```
```
modal
```
```
modal
```
```
smallmodal
```
```
smallmodal
```
```
papernote
```
```
papernote
```
```
floatbox
```
```
right
```
```
floatbox
```
```
right
```
```
floatbox
```
```
floatbox
```
```
document
```
```
document
```
```
imm-email-example
```
```
imm-email
```
```
imm-tofrom
```
```
imm-email-example
```
```
imm-email
```
```
imm-tofrom
```
```
triskhr
```
```
triskhr
```
```
smalltriskhr
```
```
smalltriskhr
```
```
blood-triskhr
```
```
blood-triskhr
```
```
blood-smalltriskhr
```
```
blood-smalltriskhr
```

[[div style="display: none;"]]
[[include :scp-wiki:theme:basalt hidetitle=a]]
[[/div]]

[[module css]]

/* Immrama Theme              */
/* [2025 Wikidot Theme]       */
/* by Arthcymro               */

/*-----------------*/
/*---- IMPORTS ----*/
/*-----------------*/

@import url('https://fonts.bunny.net/css2?family=Benne&display=swap');

:root {

    /*----------------------*/
    /*---- BEDROCK VARS ----*/
    /*----------------------*/

    --header-font-primary: 'Benne';
    --UI-font-primary: 'Benne';
    --body-font-primary: 'Benne';
    font-size: 110%;

    --logo: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Blue%29.png);
    --title: "Immrama";
    --subtitle: "It's a long story";
    --title-size: 1.75rem;
    --subtitle-size: 1.25rem;

    --basalt-primary-color: 227, 226, 218;
    --basalt-secondary-color: 200,199,184;
    --basalt-tertiary-color: 173, 171, 149;
    --basalt-main-text-color: 20, 20, 20;
    --basalt-overtone: 50, 50, 50;
    --basalt-undertone: 28, 69, 45;
    --basalt-bright-element-color: 66, 101, 68;
    --basalt-dark-element-color: 28, 69, 45;
    --basalt-alternate-color: 166, 103, 54;
    --basalt-positive-color: 0, 100, 0;
    --basalt-negative-color: 109, 17, 17;
    --side-bar-link-background-hover: 28, 69, 45;
    --general-border-color: 20, 47, 33;
    --document-background-color: 243,223,193;
    --link-color: 36, 107, 206;
    --link-visited-color: 28, 84, 163;

/*-------------------------*/
/*---- IMMRAMA CLASSES ----*/
/*-------------------------*/

body {  
    background-image: linear-gradient(#e3e2da, #A6ABB1 100%);
}
.footnotes-footer .footnote-footer>a:first-child {
    font-family: var(--body-font);
}
div.papernote {
    display: block;
    margin-inline: auto;
    margin-block: 1.4rem;
    padding: 1rem 2rem;
    background-color: rgb(var(--basalt-secondary-color));
    color: rgb(var(--basalt-main-text-color));
}
div.papernote {
    display: block;
    margin-inline: auto;
    margin-block: 1.4rem;
    padding: 1rem 2rem;
    background-color: rgb(var(--document-background-color));
    color: rgb(var(--basalt-main-text-color));
}
div.document {
    background-color: rgb(var(--document-background-color));
    box-shadow: 0px 1px 1.9px -4px rgba(0, 0, 0, 0.1), 0px 6px 15px -4px rgba(0, 0, 0, 0.2);
    color: rgb(var(--basalt-main-text-color));
}
hr {
    border-top: none;
    position: relative;
    height: 0.35rem;
    background: rgba(0, 0, 0, 0);
    display: flex;
}
hr::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border-top: none;
    width: 100%;
    height: 0.125rem;
    background: #246bce;
    background-position: center center;
}
.imm-email {
    border: solid 2px #000000; 
    width: 88%; 
    padding: 1px 15px; 
    margin: 10px; 
    box-shadow: 0 1px 3px rgba(0,0,0,.5); 
    background-color: rgb(var(--basalt-primary-color))
}
.imm-email-example a.collapsible-block-link {
    font-weight: bold;
}
.imm-tofrom {
    margin-left: 10px; 
    margin-top: 5px; 
    padding: 1px 15px; 
    border-left: solid 3px #246bce
}
.yui-navset.yui-navset-top>ul.yui-nav {
    font-family: var(--header-font);
}
.yui-navset.yui-navset-top .yui-content {
    background-color: rgb(var(--basalt-primary-color));
}
:is(:where(#page-content) table:not(.form),table.wiki-content-table) td {
    border: solid .05rem rgb(var(--general-border-color));
    padding: .5em .625em;
    background-color: rgb(var(--basalt-primary-color));
} 
#header h1 a span {
    font-variant: small-caps;
}
.triskhr {
    min-height: 9em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line.png);
    background-size: 600px;
@media only screen and (max-width: 600px) {
    background-size: 360px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.blood-triskhr {
    min-height: 9em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line%20%28Red%29.png);
    background-size: 600px;
@media only screen and (max-width: 600px) {
    background-size: 360px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.smalltriskhr {
    min-height: 5.5em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line.png);
    background-size: 350px;
@media only screen and (max-width: 600px) {
    background-size: 210px;
}
    background-repeat: no-repeat;
    background-position: center;
}
.blood-smalltriskhr {
    min-height: 5.5em;
    background-image: url(https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line%20%28Red%29.png);
    background-size: 350px;
@media only screen and (max-width: 600px) {
    background-size: 210px;
}
    background-repeat: no-repeat;
    background-position: center;
}

[[/module]]

[[iftags +theme]]

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

@@ @@

+* __Info__

This is **Immrama**, an aesthetic theme using the [[[theme:basalt|Basalt]]] base theme, created by [[*user arthcymro]] for the use in his series. 

The following code needs to be placed on the top of the page to use it:

> [[include :scp-wiki:theme:immrama]]

+* __Elements__

+++* __Elements - Blocks, Quotes and Emails__

> This is a blockquote, created by putting "> " at the start of each line.
>
> More text
> -----
> That's a horizontal rule
>
>> Nested blockquotes

[[=]]

[[div class="blockquote"]]
**{{@@[[div class="blockquote"]]@@}}**
[[/div]]

[[div class="notation"]]
**{{@@[[div class="notation"]]@@}}**
[[/div]]

[[div class="jotting"]]
**{{@@[[div class="jotting"]]@@}}**
[[/div]]

[[div class="modal"]]
**{{@@[[div class="modal"]]@@}}**
[[/div]]

[[div class="smallmodal"]]
**{{@@[[div class="smallmodal"]]@@}}**
[[/div]]

[[div class="papernote"]]
**{{@@[[div class="papernote"]]@@}}**
[[/div]]

[[div class="floatbox right"]]
**{{@@[[div class="floatbox right"]]@@}}**
[[/div]]

[[div class="floatbox"]]
**{{@@[[div class="floatbox"]]@@}}**
[[/div]]

@@ @@

<- Right Float Blah Blah Blah Left Float ->

@@ @@

[[div class="document"]]
**{{@@[[div class="document"]]@@}}**
[[/div]]

[[div class="imm-email-example"]]
[[=]]
[[<]]
[[div class="imm-email"]]
[[div class="imm-tofrom"]]
**To:** Me
**From:** You
**Subject:** This Wonderful Theme
[[/div]]

= **{{@@[[div class="imm-email-example"]]@@}}**
= **{{@@[[div class="imm-email"]]@@}}**
= **{{@@[[div class="imm-tofrom"]]@@}}**

[[/div]]
[[/<]]
[[/=]]
[[/div]]

[[/=]]

@@ @@

+++* __Elements - Horizontal Lines__

This is a common horizontal rule.

------

This is a fancy horizontal rule, created for the theme.

= **{{@@[[div class="triskhr"]]@@}}**

[[div class="triskhr"]]
[[/div]]

This is a smaller variation of the above.

= **{{@@[[div class="smalltriskhr"]]@@}}**

[[div class="smalltriskhr"]]
[[/div]]

This is a blood variation.

= **{{@@[[div class="blood-triskhr"]]@@}}**

[[div class="blood-triskhr"]]
[[/div]]

This is a smaller variation of the above.

= **{{@@[[div class="blood-smalltriskhr"]]@@}}**

[[div class="blood-smalltriskhr"]]
[[/div]]

@@ @@

+++* __Elements - Images__

[[include :scp-wiki:component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Blue%29.png|caption=Image block, to the right hand side.|width=280px|align=right]]

[[include :scp-wiki:component:image-block name=https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Red%29.png|caption=Image block, to the left hand side.|width=280px|align=left]]

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

+++* __Elements - Titles__

+* First Title

++* Second Title

+++* Third Title

++++* Fourth Title

+++++* Fifth Title

++++++* Sixth Title

@@ @@

+++* __Elements - Tables & Tabs__

[[tabview]]
[[tab Tabulator]]
This is a tab view.
[[/tab]]
[[tab Tabulation]]
Hey look, more text here.

How quaint.
[[/tab]]
[[tab 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.
[[/tab]]
[[tab This tab has a really long name for some odd reason. I wonder why? It is very strange.]]
This is a tab with footnote[[footnote]] This is another footnote. [[/footnote]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
[[/tab]]
[[tab Empty Tab]]
I miss when we could trust each other.
[[/tab]]
[[/tabview]]

@@ @@

||~ This is a ||~ table ||
||You should know || how to make these ||
||||already ||
||||= But do you? ||

@@ @@

+++* __Elements - Fonts__

[[=]]
+++* Header font is Benne.

Body font is Benne.

[[span style="font-family: var(--UI-font);"]]UI font is Benne.[[/span]]

{{Monospace font is JetBrains Mono.}}
[[/=]]

+++* __Elements - Colouration__

[[include :scp-wiki:component:theme-squares -=-
| color1-name=Granular Limestone
| color1-variable=--basalt-primary-color
| color1-info=227, 226, 218

| color2-name=Chrome White
| color2-variable=--basalt-secondary-color
| color2-info=200,199,184

| color3-name=Acacia Green
| color3-variable=--basalt-bright-element-color
| color3-info=66, 101, 68
| color3-has-light-text=1

| color4-name=Zucchini
| color4-variable=--basalt-undertone
| color4-info=28, 69, 45
| color4-has-light-text=1

| color5-name=Dark Charcoal
| color5-variable=--basalt-overtone
| color5-info=50, 50, 50
| color5-has-light-text=1

| subcolor1-name=Photo Grey
| subcolor1-variable=--basalt-tertiary-color
| subcolor1-info=173, 171, 149

| subcolor2-name=Sooty
| subcolor2-variable=--basalt-sub-text-color
| subcolor2-info=20, 20, 20
| subcolor2-has-light-text=1

| subcolor3-name=Hot Ginger
| subcolor3-variable=--basalt-alternate-color
| subcolor3-info=166, 103, 54

| subcolor4-name=Cucumber
| subcolor4-variable=--basalt-positive-color
| subcolor4-info=0, 100, 0
| subcolor4-has-light-text=1

| subcolor5-name=Festive Bordeaux
| subcolor5-variable=--basalt-negative-color
| subcolor5-info=109, 17, 17
| subcolor5-has-light-text=1

| subcolor6-name=Celtic Blue
| subcolor6-variable=--link-color
| subcolor6-info=36, 107, 206
| subcolor6-has-light-text=1
]]
@@ @@

> **Filename:** Immrama - Triskelion Header (Blue)
> **Author:** [[*user arthcymro]]
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Blue%29.png
=====
> **Filename:** Immrama - Triskelion Header (Red)
> **Author:** [[*user arthcymro]]
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Triskelion%20Header%20%28Red%29.png
=====
> **Filename:** Immrama - Line
> **Author:** [[*user arthcymro]]
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line.png
=====
> **Filename:** Immrama - Line (Red)
> **Author:** [[*user arthcymro]]
> **License:** CC BY-SA 3.0
> **Source Link:** https://scp-wiki.wdfiles.com/local--files/theme%3Aimmrama/Immrama%20-%20Line%20%28Red%29.png

[[/iftags]]

Immrama Theme

Module Styles

Inline Styles

Includes

CSS Classes

Page Source