Inkblot Theme (Waldon Studio Theme)

Link to article: Inkblot Theme (Waldon Studio Theme).

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

:root {
  --inkblot-accent: {$accent};
}

:root {
  --inkblot-accent: coral;
  --header-title: "WALDON STUDIO";
  --header-subtitle: "connoisseurs of the unknown";
  --debug-colour: blue;
}
:root:has(.picker li:nth-child(1).selected), .picker li:nth-child(1) em {
  --inkblot-accent: coral;
}
:root:has(.picker li:nth-child(2).selected), .picker li:nth-child(2) em {
  --inkblot-accent: rgb(203, 136, 154);
}
:root:has(.picker li:nth-child(3).selected), .picker li:nth-child(3) em {
  --inkblot-accent: royalblue;
}
:root:has(.picker li:nth-child(4).selected), .picker li:nth-child(4) em {
  --inkblot-accent: yellowgreen;
}
:root:has(.picker li:nth-child(5).selected), .picker li:nth-child(5) em {
  --inkblot-accent: red;
}
:root:has(.picker li:nth-child(6).selected), .picker li:nth-child(6) em {
  --inkblot-accent: magenta;
}
:root:has(.picker li:nth-child(7).selected), .picker li:nth-child(7) em {
  --inkblot-accent: teal;
}
:root:has(.picker li:nth-child(8).selected), .picker li:nth-child(8) em {
  --inkblot-accent: gold;
}

.picker .yui-navset * {
  display: contents !important;
}
.picker .yui-navset em {
  display: inline-block !important;
  color: color-mix(in srgb, black 25%, var(--inkblot-accent, red)) !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.25rem;
  border: none !important;
}
.picker .yui-navset .selected em {
  font-weight: 900;
  text-decoration: none;
}

.terminal {
  border-color: var(--inkblot-accent, grey);
}

```
font-size: 0.6rem;
```

padding: 3rem 1rem; margin: 2.5rem -1rem;

```
outline: 5px solid blue;
```
```
outline: 5px solid blue;
```
```
outline: 5px solid blue;
```
```
outline: 5px solid blue;
```
```
position: relative;
```
```
position: relative;
```
```
bottom: -2.5rem;
```

```
inkblot-header
```
```
inkblot-title
```
```
title-1
```
```
title-2
```
```
title-4
```
```
inkblot-info
```
```
inkblot-image
```
```
code
```
```
terminal
```
```
inkblot-header
```
```
inkblot-title
```
```
title-1
```
```
title-2
```
```
title-3
```
```
title-4
```
```
inkblot-info
```
```
inkblot-image
```
```
code
```
```
picker
```
```
code
```
```
terminal
```
```
inksplot
```
```
inkblot-header
```
```
debug-mode
```
```
debug-info
```
```
over
```
```
inkblot-title
```
```
debug-info
```
```
over
```
```
title-1
```
```
title-2
```
```
title-3
```
```
title-4
```
```
inkblot-info
```
```
debug-info
```
```
under
```
```
inkblot-image
```
```
debug-info
```
```
under
```
```
code
```
```
terminal
```
```
inkblot-title
```
```
code
```
```
terminal
```

[[iftags +theme]]
[[include :scp-wiki:component:croqstyle]]
[[/iftags]]

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/theme%3Ainkblot/1');

:root {
  --inkblot-accent: {$accent};
}
[[/module]]

[[iftags -theme]]
[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Ainkblot/1
| css=%3Aroot%7B--inkblot-accent%3A{$accent}%7D
]]
[[/iftags]]

[[iftags +theme]]

[[include :scp-wiki:component:interwiki-style
| priority=1
| theme=https://scp-wiki.wdfiles.com/local--code/theme%3Ainkblot/1
| css=%3Aroot%7B--inkblot-accent%3Acoral%7D
]]

[[module CSS]]
:root {
  --inkblot-accent: coral;
  --header-title: "WALDON STUDIO";
  --header-subtitle: "connoisseurs of the unknown";
  --debug-colour: blue;
}
:root:has(.picker li:nth-child(1).selected), .picker li:nth-child(1) em {
  --inkblot-accent: coral;
}
:root:has(.picker li:nth-child(2).selected), .picker li:nth-child(2) em {
  --inkblot-accent: rgb(203, 136, 154);
}
:root:has(.picker li:nth-child(3).selected), .picker li:nth-child(3) em {
  --inkblot-accent: royalblue;
}
:root:has(.picker li:nth-child(4).selected), .picker li:nth-child(4) em {
  --inkblot-accent: yellowgreen;
}
:root:has(.picker li:nth-child(5).selected), .picker li:nth-child(5) em {
  --inkblot-accent: red;
}
:root:has(.picker li:nth-child(6).selected), .picker li:nth-child(6) em {
  --inkblot-accent: magenta;
}
:root:has(.picker li:nth-child(7).selected), .picker li:nth-child(7) em {
  --inkblot-accent: teal;
}
:root:has(.picker li:nth-child(8).selected), .picker li:nth-child(8) em {
  --inkblot-accent: gold;
}

.picker .yui-navset * {
  display: contents !important;
}
.picker .yui-navset em {
  display: inline-block !important;
  color: color-mix(in srgb, black 25%, var(--inkblot-accent, red)) !important;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.25rem;
  border: none !important;
}
.picker .yui-navset .selected em {
  font-weight: 900;
  text-decoration: none;
}

.terminal {
  border-color: var(--inkblot-accent, grey);
}
[[/module]]

[[div class="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
//The//
[[/div]]
[[div class="title-2"]]
**Inkblot**
[[/div]]
[[div class="title-4"]]
Theme.
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
A theme for reviews.
By [[*user Croquembouche]].
5 min read.
⭐⭐⭐★★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/div]]
[[/div]]

[[>]]
[[module Rate]]
[[/>]]

This page is a few things:

# The source of the Inkblot Theme.
# A guide to writing for Waldon Studio.
# A demonstration of what the theme looks like in a long-form textual context.

The Inkblot Theme is //designed// for reviews of [[[ambrose-restaurant-hub | Ambrose]]] restaurants as written by Waldon Studio, which is, I guess, a sub-GoI of Ambrose. But you can use it for anything.

Usage instructions are below the preamble.

[[collapsible show="+ Quick copy paste"]]

[[div class="code terminal" style="font-size: 0.6rem;"]]
@@[[include :scp-wiki:theme:inkblot accent=transparent]]@@

@@[[module CSS]]@@
:root {
@@  --@@header-title: "WALDON STUDIO";
@@  --@@header-subtitle: "connoisseurs of the unknown";
}
@@[[/module]]@@

@@[[div class="inkblot-header"]]@@

@@[[div class="inkblot-title"]]@@
@@[[div class="title-1"]]@@
Title
@@[[/div]]@@
@@[[div class="title-2"]]@@
Title
@@[[/div]]@@
@@[[div class="title-3"]]@@
Title
@@[[/div]]@@
@@[[div class="title-4"]]@@
Title
@@[[/div]]@@
@@[[/div]]@@

@@[[div class="inkblot-info"]]@@
A review of some nerd shit.
By some nerd.
XX min read.
⭐⭐⭐⭐★

@@[[div class="inkblot-image"]]@@
@@[[image pancakes.png]]@@
@@[[/div]]@@
@@[[/div]]@@
@@[[/div]]@@

[[/div]]

[[/collapsible]]

If using alongside the Sigma-9 [[[component:toggle-sidebar | Toggle Sidebar]]] component:

[[collapsible show="+ Extra instructions specifically for Toggle Sidebar"]]

Include this theme //after// the Toggle Sidebar component.

Add this bit of compatibility CSS to the page:

[[div class="code"]]
@@[[module CSS]]@@
/* Toggle Sidebar compatibility */
#side-bar { top: 0; }
.inkblot-header { width: 100%; left: 0; }
@@[[/module]]@@
[[/div]]
[[/collapsible]]

-----

Preview this theme with a few different accent colours:

[[div class="picker"]]
[[tabview]]
[[tab Coral]]
[[/tab]]
[[tab Puce]]
[[/tab]]
[[tab RoyalBlue]]
[[/tab]]
[[tab YellowGreen]]
[[/tab]]
[[tab Red]]
[[/tab]]
[[tab Magenta]]
[[/tab]]
[[tab Teal]]
[[/tab]]
[[tab Gold]]
[[/tab]]
[[/tabview]]
[[/div]]

-----

+ Preamble

In-universe, Waldon Studio replaces //`Michelin Guide Online, powered by the [[[the-dark-web-dke79-o2rg5-4jlw6 | Dark Web]]]'//[[footnote]]Ambrose-format articles that use this at the time of writing: [[[Ambrose Thorn Valley]]], [[[Ambrose Makiling]]], [[[Ambrose Backdoor Soho]]].[[/footnote]] in my headcanon because I don't much like the thought of being sued by the real Michelin Guide for IP infringement.

The Ambrose format, currently, is doing itself a disservice. Many Ambrose articles consist of a set of unrelated menu items followed by a set of unrelated reviews. It's a shotgun approach[[footnote]]A 'shotgun SCP' is an article with no main anomaly, but a collection of smaller ones, in which the writer hopes that at least one of them will catch your interest enough to upvote.[[/footnote]] -- it's boring, there's no narrative thread to follow, there's nothing to catch your interest. It incentivises its readers to be disinterested. Lists repel attention. Even if you do it well and you exceed those constraints, why be constrained in the first place?

It's a shame, because the Ambrose format has so much promise. The reviews, if woven together, could tell an interconnected story. The menu is a fantastic idea -- no other GoI format encourages this kind of creativity! This is what the Ambrose format was originally supposed to be.[[footnote]]See the Ambrose Hub, tab 'Guide', collapsible 'Franchising Options'[[/footnote]] But it's hard to think about all the little details that make this format magical, and much easier to create something that looks right, but isn't.

Waldon Studio is a different take on the Ambrose format. Waldon Studio takes one thing and they run with it -- a complex, in-depth review of one single thing and all of its aspects. One thread to focus on. No distractions. That means that in an Ambrose format that's written by Waldon Studio, you'll be seeing just one review. There are less moving parts to get in the way of writing a good story, while still being open for the same level of visual creativity.

Waldon Studio doesn't have a hub page, because I just made them up, so I guess this will do. Waldon Studio is a small team of reviewers -- maybe ten people, tops -- trying to make their way in the reviews industry (trying and failing, but they'll never admit it). Their organisation is relaxed and without strong hierarchy. They focus on high-quality reviews of high-quality things. They have a deep appreciation of the little details, often at the cost of the bigger ones -- such as failing to notice that the restaurant they've walked into is actually an anomalous deathtrap. To that effect, a theme of a Waldon Studio review could be the conflict between something being obvious to the reader, but the in-universe reviewer themselves being totally oblivious to it.

But hey, it's just a theme. You can do what you want.

-----

+ Usage

There's a few steps to using this theme:

# Add the theme.
# Configure the theme.
# Make the special header.

++ Adding the theme

To add this theme to a page, copy the following code into it, ideally near the top of the page along with any other CSS.

[[div class="code terminal inksplot"]]
**##var(--c-keyword)|[[include##** ##var(--c-symbol)|:scp-wiki:theme:inkblot## ##var(--c-builtin)|accent##**##var(--c-keyword)|=##**##var(--c-string)|transparent##**##var(--c-keyword)|]]##**

**##var(--c-keyword)|[[module##** ##var(--c-builtin)|CSS##**##var(--c-keyword)|]]##**
##var(--c-symbol)|:root## {
@@  @@##var(--c-builtin)|@@--@@header-title##: ##var(--c-string)|"WALDON STUDIO"##;
@@  @@##var(--c-builtin)|@@--@@header-subtitle##: ##var(--c-string)|"connoisseurs of the unknown"##;
}
**##var(--c-keyword)|[[/module]]##**
[[/div]]

(You can make a div shaped like the above by adding the {{inksplot}} class to it.)

++ Configuring the theme

To set the page heading and subheading, change the two CSS variables (or leave them as-is for the OG Waldon Studio vibe).

The {{accent}} parameter in the include determines the colour of the little bubbles and stuff around the page, and also a darkened variant is used for links. If you leave it out, or don't change it from the code above, the default colour is 'transparent', meaning those little bubbles and stuff are invisible (and the links will just be standard Sigma-10 red).

I have a request: **please don't use the same accent colour as another Inkblot article.** This theme page uses the colour '**##coral|coral##**', so that's taken. [https://htmlcolorcodes.com/color-names/ Pick a new colour.] There's not going to be that many pages using this theme so it shouldn't be a hard choice.

(You can see which pages use this theme by going to the bottom of the page, opening '+ Options', then clicking 'Backlinks'.)

Try to pick a colour that you could see black text over. If you must choose a dark colour, be sure to adjust the font colour of the rating buttons so that they're visible, and you can work out how to make the Inkblot header work with it yourself. If you pick a really light colour you might also need to tweak the links so that they have enough contrast.

++ Making the Inkblot header

The Inkblot Theme hides the default page title, so you'll need to make your own. You can put whatever text you want in it, but I beg you, **please use the same text as the actual page title.** Please.

You've seen a normal Inkblot header at the top of the page, so here's another one, except now it's labelled and every HTML element has an outline drawn around it.

[[div class="inkblot-header debug-mode" style="padding: 3rem 1rem; margin: 2.5rem -1rem;"]]

[[div class="debug-info over"]]
.inkblot-header
[[/div]]

[[div class="inkblot-title"]]
[[div class="debug-info over"]]
.inkblot-title
[[/div]]
[[div class="title-1" style="outline: 5px solid blue;"]]
Put
[[/div]]
[[div class="title-2" style="outline: 5px solid blue;"]]
**Whatever**
[[/div]]
[[div class="title-3" style="outline: 5px solid blue;"]]
Text
[[/div]]
[[div class="title-4" style="outline: 5px solid blue;"]]
//you want//.
[[/div]]
[[/div]]

[[div class="inkblot-info" style="position: relative;"]]
[[div class="debug-info under"]]
.inkblot-info
[[/div]]

This is a blurb about the review.
By some dumbass.
5 min read.
⭐★★★★

[[div class="inkblot-image" style="position: relative;"]]
[[div class="debug-info under" style="bottom: -2.5rem;"]]
.inkblot-image
[[/div]]

[[image pancakes.png]]
[[/div]]
[[/div]]

[[/div]]

You can see, hopefully, that the title part of the header is made of four subsections, each of which contains a word or two. I think this is a pretty neat and visually-interesting way to break up the title.

The info section should contain some information about the review. My suggestion -- what is this a review of? Who wrote it? How long will it take to read? And how good is the thing being reviewed?

The picture can be anything. It's probably pretty normal to make it a picture of the person doing the reviewing. Maybe this theme was made by pancakes. I'd avoid making it a picture of the thing being reviewed -- save that for the article itself.

This header will have the three sections all in a row on desktop, but on mobile, the title will have a row all to itself, and the info section and the picture will be on the next row.

You can see how to make the above header, including the four title subsections, below. Note that you can miss out one of the title sections, and there will just be a gap there instead -- that's what I did for the title of this page.

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"inkblot-header"##**##var(--c-keyword)|]]##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"inkblot-title"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"title-1"##**##var(--c-keyword)|]]##**
Put
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"title-2"##**##var(--c-keyword)|]]##**
@@**Whatever**@@
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"title-3"##**##var(--c-keyword)|]]##**
Text
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"title-4"##**##var(--c-keyword)|]]##**
@@//you want//@@.
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"inkblot-info"##**##var(--c-keyword)|]]##**
This is a blurb about the review.
By some dumbass.
5 min read.
⭐★★★★

**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"inkblot-image"##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|[[image##** ##var(--c-symbol)|pancakes.png##**##var(--c-keyword)|]]##**
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

Note that using this header and title layout presents a couple of problems.

* You need to be careful about how long your title is, or careful about breaking it up into four pieces. If it's too long, one of the title sections could wrap onto the next line, making it confusing to read. I recommend having a short title that can be easily broken into four roughly-equal segments.
* If your title is too long, or there's too much text in the info section, that might overflow or overlap as well. Try not to add too much.

You don't have to use the weird title grid, or the info section, or have a picture. You can add and remove them however you like. You don't even need to use the {{.inkblot-header}} class -- all that does is move the header halfway off the left side of the page on desktop.

Here's an example without the title grid, without the info, without the picture, and without {{.inkblot-header}}:

[[div class="inkblot-title"]]
//Just// a **normal** title.
[[/div]]

[[div class="code terminal"]]
**##var(--c-keyword)|[[div##** ##var(--c-builtin)|class####var(--c-operator)|=####var(--c-string)|"inkblot-title"##**##var(--c-keyword)|]]##**
@@//Just// a **normal** title.@@
**##var(--c-keyword)|@@[[/div]]@@##**
[[/div]]

-----

++ But how do I make an Ambrose menu?

Here's the thing. This theme might be designed for Ambrose reviews, but it doesn't come with an Ambrose menu.

Why's that?

I **strongly** believe that half the fun of writing an Ambrose format is making your own menu. I love seeing new designs for menus on each Ambrose format. So the onus is on you -- I want to see you use this theme with your own menu design. It doesn't matter if it's terrible! All it needs to be is something that you have fun making.

If I shipped a menu design with this theme, don't lie to me and tell me you wouldn't use it. You would. //I// would. And, as the designer of this theme, I get to do what I want.

If you //really// must, you can copy a menu from another format and tweak the colours a little. But know that if you do that, I will strike you down with all the force of a single downvote and some light critique. Please don't do that.

Adding the menu for an Ambrose restaurant styled in your special way qualifies your article as a GoI Format for Ambrose Restaurants.

-----

+ Source code

Okay, that's all I have to say. Here's the source code.

[[collapsible show="+ Show source code"]]

[[code type="css"]]
/* Import fonts */
@import url('https://fonts.bunny.net/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.bunny.net/css2?family=Prata&display=swap');
@import url('https://fonts.bunny.net/css2?family=Montserrat:wght@300;600&display=swap');

/* Set the font size back to normal */
#page-content { font-size: 1rem; }
body { font-family: 'Libre Baskerville', serif; }

/* Hide the page title. I'll make my own damned title */
#page-title { display: none; }


/* - == === CUSTOM SYNTAX === == - */

/* The inkblot header contains the title and the info box thingy */
.inkblot-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
  margin: 1rem 0 3rem;
  width: 100%;
  left: 0;
  max-width: none !important; /* override #page-content div */
}
@media (min-width: 768px) {
  /* On desktop, header expands over the top of the sidebar */
  .inkblot-header {
    width: calc(100% + 18 * 0.82rem);
    left: calc(-18 * 0.82rem);
  }
}

/* The inkblot title is a grid */
.inkblot-title {
  flex: 1 1 0;
  font-size: min(4rem, 10vw);
  font-family: 'Prata', serif;
  display: inline-grid;
  grid-template-areas:
    "one two"
    "three four";
  grid-gap: 0.1em;
  max-width: 100%;
  position: relative;
  margin: 1rem;
}
.inkblot-title::before {
  content: "";
  border-radius: 74% 26% 27% 77% / 74% 38% 73% 38%;
  background-color: var(--inkblot-accent, transparent);
  position: absolute;
  height: 40%; width: 100%; top: 50%; left: 50%;
  transform: translate(-50%, -50%) skewY(-6deg);
  max-width: min(50vw, 80%);
}
.inkblot-title > * { z-index: 1; white-space: nowrap; }
.inkblot-title .title-1 { grid-area: one; place-self: start end; }
.inkblot-title .title-2 { grid-area: two; place-self: start start; }
.inkblot-title .title-3 { grid-area: three; place-self: start end; }
.inkblot-title .title-4 { grid-area: four; place-self: start start; }
.inkblot-title p { margin: 0; line-height: 1em; text-align: center; }
/* Italics encroach to the right a bit, so push them back */
.inkblot-title > em, .inkblot-title .title-1 em, .inkblot-title .title-3 em {
  position: relative;
  left: -0.1em;
}

@media (max-width: 767px) {
  .inkblot-title {
    flex-basis: 100%;
  }
}

/* The info box is itself a flex container */
.inkblot-info {
  flex: 1 1 0;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
.inkblot-info > p { 
  min-width: 12.5rem;
}
/* On desktop, if the header overflows onto two rows, it will overlap the sidebar.
 * The max-width of the info thingy is reduced so it won't be wider than #page-content.
 * justify-content:flex-end on .inkblot-header pushes it to the right.
 * !important to override wikidot's default max-width on everything
 */
@media (min-width: 768px) {
  .inkblot-info {
    max-width: calc(100% - 18 * 0.82rem) !important;
  }
}

/* The image should only be styled fancy inside the info section.
 * It could be easily modified to allow a fancy image outside of the info
 * section, but I don't want to do that, because this arrangement is necessary
 * for proper line-wrapping on mobile, and the misformatted image acts as a
 * good indicator that something has gone wrong.
 */
.inkblot-info .inkblot-image { flex: 0 1 10rem; min-width: 10rem; }
.inkblot-info .inkblot-image img {
  border-radius: 65% 35% 43% 57% / 41% 35% 65% 59%;
  box-shadow: 0.5rem 0 var(--inkblot-accent, transparent);
  /* The height is 8rem, but I want it slightly bigger */
  height: 10rem; width: 10rem;
  margin: -1rem 0;
}

/* The inksplot class makes anything blobby */
.inksplot {
  border-width: 0.5rem;
  border-style: solid;
  border-color: var(--inkblot-accent); /* if no accent, will not override */
  padding: 2rem 4rem;
  margin: 1rem -3rem;
  border-radius: 38% 95% 94% 42% / 62% 56% 84% 75%;
}
/* On mobile, the inkblot is rectangular and boring to save space */
@media (max-width: 960px) and (min-width: 767px), (max-width: 650px) {
  .inksplot {
    padding: 1rem;
    border-radius: 5rem / 3rem;
    margin: 1rem -1rem;
  }
}


/* - == === DISTRIBUTED BLOBS === == - */

/* I want some blobs of colour down the page.
 * Thankfully, Wikidot gives me some extra dives to play with:
 * 6 in #container-wrap-wrap and 3 in #container.
 * They are #extra(c?)-div-[1-6]. That's a lot of selectors. */

#container-wrap-wrap, #container { position: relative; overflow: hidden; }

/* Based on CSS by Murray Smith (CC BY-SA 3.0)
 * https://stackoverflow.com/a/14451916/4958427 */

[id^=extra][id*=-div-] {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  --content-width: min(1040px, 100vw);
  --content-margin: calc(50vw - var(--content-width) / 2);
  --blob-width: 30rem;
  --blob-radius: calc(var(--blob-width) * 0.67);
  background-color: var(--inkblot-accent, transparent);
  top: var(--top-offset);
  transform: rotate(var(--rotation))
             translate(calc(var(--sin-rotation) * 0.866 * var(--blob-radius) / 2),
                       calc(-1 * var(--cos-rotation) * 0.866 * var(--blob-radius) / 2))
             skewX(-30deg)
             scale(1, 0.866);
}
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
  content: '';
  position: absolute;
  background-color: inherit;
}
[id^=extra][id*=-div-],
[id^=extra][id*=-div-]:before,
[id^=extra][id*=-div-]:after {
  width: var(--blob-width); height: var(--blob-width);
  border-top-right-radius: 95%;
}
[id^=extra][id*=-div-]:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0,-50%);
}
[id^=extra][id*=-div-]:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}

/* A lot of maths went into this.
 * To centre a triangle onto its container, it needs the following translation:
 * where A is the angle of rotation:
 * x:
 *   sin(N)
 *   * 0.866 (scale offset)
 *   * radius
 *   / 2
 * y:
 *   -1
 *   * cos(N)
 *   * 0.866 (scale offset)
 *   * radius
 *   / 2
 * Triangles have an order of symmetry around 120deg, so any angles above that are pointless.
 */
#extra-div-1,
#extra-div-3,
#extra-div-5,
#extrac-div-1,
#extrac-div-3 {
  right: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-2,
#extra-div-4,
#extra-div-6,
#extrac-div-2 {
  left: calc(var(--blob-radius) * -2 + var(--content-margin));
}
#extra-div-1 {
  --blob-width: 30rem;
  --top-offset: 500px;
  --rotation: 53.33deg; --sin-rotation: 0.802; --cos-rotation: 0.597;
}
#extra-div-2 {
  --blob-width: 30rem;
  --top-offset: 1300px;
  --rotation: 40deg; --sin-rotation: 0.642; --cos-rotation: 0.766;
}
#extra-div-3 {
  --blob-width: 20rem;
  --top-offset: 2100px;
  --rotation: 66.66deg; --sin-rotation: 0.918; --cos-rotation: 0.396;
}
#extra-div-4 {
  --blob-width: 15rem;
  --top-offset: 2900px;
  --rotation: 13.33deg; --sin-rotation: 0.231; --cos-rotation: 0.973;
}
#extra-div-5 {
  --blob-width: 40rem;
  --top-offset: 3700px;
  --rotation: 26.66deg; --sin-rotation: 0.448; --cos-rotation: 0.893;
}
#extra-div-6 {
  --blob-width: 25rem;
  --top-offset: 4500px;
  --rotation: 106.66deg; --sin-rotation: 0.958; --cos-rotation: -0.286;
}
#extrac-div-1 {
  --blob-width: 15rem;
  --top-offset: 5300px;
  --rotation: 93.33deg; --sin-rotation: 0.998; --cos-rotation: -0.058;
}
#extrac-div-2 {
  --blob-width: 10rem;
  --top-offset: 6100px;
  --rotation: 120deg; --sin-rotation: 0.855; --cos-rotation: -0.500;
}
#extrac-div-3 {
  --blob-width: 7rem;
  --top-offset: 6900px;
  --rotation: 80deg; --sin-rotation: 0.984; --cos-rotation: 0.173;
}


/* - == === HEADER === == - */

/* Replace the header background */
/* 324px is twice the height of the default header */
div#container-wrap { background: url(https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/review-header.svg) top left/100% 648px no-repeat; }

#header { background: radial-gradient(circle at left 75px top 90px, var(--inkblot-accent, transparent) 42px, transparent 42.5px); }

/* Replace the header text */
/* Centre the text into the middle of the header */
#header h1, #header h2 { margin-left: 0; float: none; text-align: center; }
/* Move the subtitle down a smidge */
#header h2 { margin-top: 0.3rem; }
/* Hide the existing text */
#header h1 span, #header h2 span { font-size: 0; }
/* Style the new text */
#header h1 a::before, #header h2::before {
  color: #333;
  font-family: 'Montserrat', sans-serif;
  text-shadow: none;
}
/* Set the new text's content from variable */
#header h1 a::before {
  content: var(--header-title, "WALDON STUDIO");
  font-weight: 300;
}
#header h2::before {
  content: var(--header-subtitle, "connoisseurs of the unknown");
  font-weight: 600;
}

/* Hide the search box and tuck the button next to the login */
#search-top-box { top: 10px; transform: translateY(-7%); }
#search-top-box-form > input[type=text] { display: none; }
#search-top-box-form > input[type=submit] {
  background: 
    url('https://scp-wiki.wdfiles.com/local--files/theme%3Ainkblot/search-solid.svg') 50%/0.8rem no-repeat,
    var(--inkblot-accent, transparent)
    !important /* don't revert on mouseover */;
  border: none;
  border-radius: 50%;
  font-size: 0;
  height: 1.5rem; width: 1.5rem;
}
#login-status { right: calc(10px + 2rem); color: #333a; }
#login-status a { color: #b01a; }


/* - == === LINKS === == - */

/* Make links be a darkened version of the accent colour. If not set, the accent colour is assumed to be red because that ends up looking similar to baseline Sigma links. */
a, a:visited, #side-bar a, #interwiki a {
  color: color-mix(in srgb, black 25%, var(--inkblot-accent, red));

  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.25rem;
}
:is(#side-bar a, #interwiki a):not(:hover) {
  text-decoration: none;
}
:is(a, a:visited, #side-bar a, #interwiki a):hover {
  text-decoration-style: solid;
}

/* - == === TOPBAR === == - */

#top-bar { display: flex; justify-content: center; right: 0; }
#top-bar a { color: #333d; }


/* - == === SIDEBAR === == - */

/* Move the side bar down, out of the way of the inkblot header */
@media (min-width: 768px) {
  #side-bar { top: 12rem; }
}

/* Make the sidebar look pretty */
/* Keep the side block colours - I like them */
#side-bar .side-block,
#interwiki .side-block {
  border: none;
  border-radius: 0.5rem;
  box-shadow: none;
}

#side-bar .heading,
#interwiki .heading {
  margin: 0.6rem 0 0.5rem;
  padding: 0;
  color: #000a;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: none;
}
#side-bar .heading::before,
#side-bar .heading::after,
#interwiki .heading::before,
#interwiki .heading::after {
  content: "";
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted #333;
  margin: 0.1rem 0.5rem 0;
  flex: 1 1 0;
}
#side-bar .menu-item > img,
#interwiki .menu-item > img {
  visibility: hidden;
}

#top-bar .open-menu a {
  border-radius: 1px;
  border: none;
  border-left: 0.25rem solid var(--inkblot-accent, #333);
  border-right: 1px dotted #333;
  text-decoration: none;
}
@media (max-width: 767px) {
  #side-bar {
    background-image: 
      radial-gradient(
        circle at left 10% top 90%,
        var(--inkblot-accent, white) 25%,
        transparent 25%
      ),
      linear-gradient(-75deg, #ccc 30%, white 30%);
    border-right: 4px dotted #444 !important;
    background-clip: padding-box;
  }
}


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

.page-rate-widget-box { box-shadow: none; }
.page-rate-widget-box {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  border-radius: 0;
  border-width: 1px 0;
  border-style: dotted;
  border-color: #333;
  padding: 0.1rem;
  margin-right: 3rem;
}
div.page-rate-widget-box .rate-points,
.page-rate-widget-box .cancel {
  background-color: transparent;
  border-radius: 0;
  border: none;
  color: #333;
}
.page-rate-widget-box .rateup,
.page-rate-widget-box .ratedown {
  background-color: var(--inkblot-accent, transparent);
  border-radius: 50%;
  border: none;
  color: #333;
  height: 1.5rem; width: 1.5rem;
  position: relative;
  margin-left: 0.25rem;
}
.page-rate-widget-box .cancel {
  color: #333;
  height: 1.5rem; width: 1.5rem;
  position: relative;
}
.page-rate-widget-box .rateup a,
.page-rate-widget-box .ratedown a,
.page-rate-widget-box .cancel a {
  position: absolute;
  display: block;
  top: 0; left: 0; height: 100%; width: 100%;
  text-align: center; line-height: 1.5rem;
  color: #333;
  padding: 0;
  margin: 0;
  font-weight: bold;
}
.page-rate-widget-box .cancel a { color: transparent; }
.page-rate-widget-box .cancel a::after {
  content: "⤬";
  position: absolute;
  color: #333;
  top: 0; left: 0; height: 100%; width: 100%;
}
.page-rate-widget-box .rateup a:hover { background-color: limegreen; }
.page-rate-widget-box .ratedown a:hover { background-color: tomato; }
.page-rate-widget-box .cancel a:hover {
  color: transparent;
  background-color: transparent;
  border-radius: 0;
}

/* Info module compatibility */
/* More specific because will probably be imported before the info module */
#page-content .rate-box-with-credit-button {
  background: none;
  border-radius: 0;
  box-shadow: none;
  border-width: 1px 0;
  border-style: dotted;
  border-color: #333;
  display: flex;
  align-items: center;
}
.rate-box-with-credit-button .page-rate-widget-box {
  border: none;
}
.creditButton {
  height: 1rem;
  width: 1rem;
  background-color: var(--inkblot-accent, transparent);
  border-radius: 50%;
}
#page-content .creditButton p a {
  color: #333;
  border: none;
  line-height: 1rem;
  margin-left: 0;
}


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

.scp-image-block {
  border: none;
  border-top: 1px dotted #333;
  box-shadow: none;
}
.scp-image-block .scp-image-caption {
  background: none;
  border-top: solid 0.25rem var(--inkblot-accent, transparent);
  padding-top: 0.5rem;
  font-weight: normal;
}
.scp-image-block img {
  padding: 0.5rem;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .scp-image-block.block-left {
    margin-left: -100px;
  }
}
@media (min-width: 1250px) {
  .scp-image-block.block-right {
    margin-right: -100px;
  }
}
@media (max-width: 600px) {
  .scp-image-block.block-left, .scp-image-block.block-right {
    float: none; clear: both; margin-left: auto; margin-right: auto;
  }
}

/* Compatibility with Woedenaz' Image Features
 * http://scp-wiki.wikidot.com/component:image-features-source
 * Image Features other than hover-to-zoom may need more fixes
 */
.image-hover-enlarge img {
  box-shadow: none !important;
}


/* - == === OTHER STUFF === == - */

li, p {
  line-height: 1.6em;
  letter-spacing: 0.01em;
}

#page-content h1, #page-content h2, #page-content h3,
#page-content h4, #page-content h5, #page-content h6 {
  font-family: 'Libre Baskerville', serif;
  color: #333;
  margin: 1em 0 0.5em 0;
  letter-spacing: 0;
}
#page-content h1 {
  font-family: 'Prata', serif; font-size: 3rem; text-align: center;
}
#page-content h2 { font-size: 2rem; font-weight: bold; }

hr {
  margin: 3rem;
  height: 1rem;
  background: radial-gradient(circle at center, var(--inkblot-accent, transparent) 0.375rem, transparent calc(0.375rem + 0.5px));
  display: flex;
  justify-content: space-around;
  align-items: center;
}
hr::before, hr::after {
  content: "";
  height: 1px;
  box-sizing: border-box;
  border-bottom: 1px dotted #333;
  width: calc(50% - 3rem);
}

.page-tags span {
  border-top: 1px dotted #333;
}

.footnotes-footer {
  margin-top: 2rem;
}

#page-content {
  margin-bottom: 2rem;
}

#footer {
  background: transparent;
}

#footer a {
  color: black;
}

#breadcrumbs, .pseudocrumbs {
  display: flex;
  flex-direction: row-reverse;
  font-size: 0;
  margin-top: -1rem;
}
#breadcrumbs a, .pseudocrumbs a {
  font-size: 0.82rem;
  margin-left: 0.3rem;
}
#breadcrumbs a::before, .pseudocrumbs a::before {
  content: "«";
  margin-right: 0.3rem;
}

.licensebox {
  font-size: 0.82rem;
  font-family: verdana, arial, helvetica, sans-serif;
  margin: 1rem 0 -1.5rem;
}

span, a {
  word-break: normal;
}

blockquote, div.blockquote {
  border: none;
  border-left: thick solid var(--inkblot-accent, #eee);
  background: none;
}
[[/code]]

[[/collapsible]]

[[/iftags]]

Inkblot Theme (Waldon Studio Theme)

Module Styles

Inline Styles

Includes

CSS Classes

Page Source