Croqstyle CSS

NOTICE:

This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

rating: +31+x

About Croqstyle

Croqstyle is a bunch of miscellaneous CSS tweaks and utilities that I, CroquemboucheCroquembouche, use a lot and want to share.

This component:

  • Makes a few behind-the-scenes changes that improve the reading or writing experience e.g. monospaced text in the editor
  • Adds a few utilities for documenting components and themes e.g. custom styling for code blocks
  • Adds a few opt-in features for regular pages e.g. special image blocks

Croqstyle is basically compatible with any theme as far as I know.

Usage

On any wiki:

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

For normal pages: Croqstyle should be included before any other component or theme, so that they can override it.

For components/themes: Croqstyle can be used on other components for their documentation — include it inside the component's [[iftags]] block, so that your component's users are not forced to use Croqstyle.

You don't have to include it like this — feel free to look through and use my CSS at a starting point for new stuff, or steal just the bits you like.

Source code

Here's the source CSS for Croqstyle:

Little improvements

These are all passive changes that improve™ either the reading or editing experience.

Reasonably-sized footnotes

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

No more big avatar hover thingies

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.

Hover me and watch nothing happen: CroquemboucheCroquembouche

Monospace editor + code blocks

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

Better image block positioning

On mobile-sized screens, image blocks can no longer overflow the width of the page.

On slightly larger screens, image blocks can no longer take up like 80% of the page leaving only a tiny strip of space for text to render one-word-per-line. At those widths, images will be centred and text won't be able to appear next to it.

Documentation helpers

These are utilities intended for making it easier to document themes and components.

Teletype backgrounds

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

Code colours

Adds some syntax highlighting colours as CSS variables. The syntax colours are taken from VSCode's default light and dark themes.

You can add the .terminal class to a fake code block as [[div class="code terminal"]] to give it a pseudo-terminal look. 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. Enable dark mode with .terminal--dark:

[[div class="code terminal"]]

**##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|"code terminal"####var(--c-keyword)|]]##**
**##var(--c-keyword)|[[/####var(--c-builtin)|div####var(--c-keyword)|]]##**

[[/div]]

[[div class="code terminal terminal--dark"]]

**##var(--c-keyword)|[[####var(--c-builtin)|div## ##var(--c-symbol)|class##=##var(--c-string)|"code terminal terminal--dark"####var(--c-keyword)|]]##**
**##var(--c-keyword)|[[/####var(--c-builtin)|div####var(--c-keyword)|]]##**

[[/div]]

Tools to auto-highlight: component includes · divs and spans

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!

Opt-in features

These are new features and widgets that you can add to your page if you like. All of these opt-in features have CSS classes starting with 'croqstyle', so there's zero risk of contaminating anything on your page if you're not using them.

Improved image block

"Low-res image" and the image resolution (300x300) written on a pixelated background. When hovered the image changes to say "High-res image" and the new resolution of (1200x1200).

Image caption

Provides an improved image block with more features, including:

  • Hover zoom is built-in, similar to the 'Hover Enlarge' style provided by WoedenazWoedenaz' Image Features component
  • Built-in alt text.
  • Supports showing a higher-resolution image when you hover it (unlike Image Features, which shows the same image but bigger), and even shows a loading icon while the larger image is downloaded.

Please don't make the hover image different to the unhovered image as a jumpscare, that's very cringe. This is an accessibility tool.

To use, insert the following syntax (which closely matches the source of the standard image block):

[[div class="croqstyle-image-block scp-image-block block-right" style="--aspect-ratio: 1 / 1; --image-url: url(lowres.png); --image-large-url: url(highres.webp);"]]
[[div class="scp-image-alt"]]
Alt text goes here, which describes the content of the image for non-sighted users et al - e.g. if the image contains information, write it in plaintext here; or if the image invokes a particular feeling, describe that feeling here.
[[/div]]
[[div class="scp-image-caption"]]
Image caption
[[/div]]
[[/div]]

Replace block-right with block-left or block-center for left and centre alignment respectively. You can put a fallback image inside .scp-image-alt using standard [[image]] syntax if you like.

If you don't want to provide a different image for the large version, you can omit the --image-large-url CSS variable — the image in --image-url will be used both when zoomed and not zoomed.

You can also add class croqstyle-image-block--no-hover to disable the hover zoom feature and show the high res image all the time, but that's for a very niche use case — probably just use the standard image block instead.

Image footnotes

Provides a class that adds image footnotes to stuff. They're like regular footnotes, but for images.

[[span class="croqstyle-img-footnote" style="--aspect-ratio: 1 /1; --image-url: url(lowres.png);"]]Example.[[/span]]

It uses the same CSS variables as the 'improved image block' feature above, so it's handy to define a CSS class per image, and then you can use that for both features.

You can actually already put images in footnotes using standard Wikidot syntax:

[[footnote]][[image imagegoeshere.png]][[/footnote]]

That looks like this.2

The croqstyle-img-footnote class provided by Croqstyle is a little bit different to regular footnotes:

  • It highlights a word or phrase as the context, not just a number
  • It doesn't add the footnote to the footnote list, giving you the freedom to repeat image footnotes as often as you like without clogging up the bottom of the page.

They work well as 'reminder footnotes' to help the reader recall what e.g. an SCP looks like, without needing to scroll back up to the original picture.

Simple responsive div

Provides some classes for a simple responsive div that shows one set of contents for desktop users and another for mobile users.

Here's the markup:

[[div class="croqstyle-responsive-div"]]
[[div class="croqstyle-responsive-div__desktop" style="display: none"]]
Desktop content goes here
[[/div]]
[[div class="croqstyle-responsive-div__mobile"]]
Mobile content goes here
[[/div]]
[[/div]]

(That display: none style is there so that if this get copied onto a page without croqstyle, or if croqstyle gets removed from the page, it gracefully falls back to showing the mobile version without breaking anything)

The 'mobile' style will be activated any time the page content area is less than 550 pixels wide. That takes into account not only the screen width but also themes and whether or not the sidebar is present (e.g. you know that one breakpoint at about ~800px where the desktop sidebar appears and there's only a bit of space for the content?) so it should be pretty resilient to anything you throw at it.

Do note that .croqstyle-responsive-div must be a div as wide as the full page that wraps any responsive content, and you might even be able to wrap your entire page in it. However, __desktop and __mobile can be e.g. spans, if you need them to be; and you can include as many of them as you like.

Reset tabview

This utility CSS-resets a tabview — i.e., it removes all CSS styling from it. I always find it a pain to dig through the way Wikidot styles tabs and undo bits of it every time I want to style them. Using this, that work is already done.

To reset a tabview, wrap it in .croqstyle-reset-tabs:

[[div class="croqstyle-reset-tabs"]]
[[tabview]]
[[tab First tab]]
Content 1
[[/tab]]
[[tab Second tab]]
Content 2
[[/tab]]
[[/tabview]]
[[/div]]

This doesn't undo the CSS that hides/shows each the tab contents, but you could reset it yourself if you wanted to replace it with your own animation:

[id^=wiki-tab] { display: initial !important }

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License