Inkblot Theme (Waldon Studio Theme)
rating: +87+–x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.

Usage

On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

The

Inkblot

Theme.

A theme for reviews.
By CroquemboucheCroquembouche.
5 min read.
⭐⭐⭐★★

pancakes.png
rating: +87+–x

This page is a few things:

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

The Inkblot Theme is designed for reviews of 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.

+ Quick copy paste

If using alongside the Sigma-9 Toggle Sidebar component:

+ Extra instructions specifically for Toggle Sidebar

Preamble

In-universe, Waldon Studio replaces ‘Michelin Guide Online, powered by the Dark Web’1 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 approach2 — 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.3 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:

  1. Add the theme.
  2. Configure the theme.
  3. 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.

[[include :scp-wiki:theme:inkblot]]

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

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

Configuring the theme

To configure the theme, change the values of the three CSS variables.

The —inkblot-accent determines the colour of the little bubbles and stuff around the page. 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.

I have a request: please don't use the same accent colour as another Inkblot article. This theme page uses the colour 'coral', so that's taken. 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.

The other two variables change the text in the header.

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.

.inkblot-header

.inkblot-title

Put

Whatever

Text

you want.

.inkblot-info

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

.inkblot-image

pancakes.png

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="inkblot-header"]]

[[div class="inkblot-title"]]
[[div class="title-1"]]
Put
[[/div]]
[[div class="title-2"]]
**Whatever**
[[/div]]
[[div class="title-3"]]
Text
[[/div]]
[[div class="title-4"]]
//you want//.
[[/div]]
[[/div]]

[[div class="inkblot-info"]]
This is a blurb about the review.
By some dumbass.
5 min read.
⭐★★★★

[[div class="inkblot-image"]]
[[image pancakes.png]]
[[/div]]
[[/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:

Just a normal title.

[[div class="inkblot-title"]]
//Just// a **normal** title.
[[/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.

+ Show source code

Footnotes
theme
page revision: 43, last edited: 05 Jul 2022 07:17
Edit Rate (+87) Tags Discuss (11) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License