Исходный код

См. исходник страницы

Мелкие изменения

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

Сноски нормального размера

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

Больше никаких увеличений аватаров пользователей при наведении

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: Пользователь 'Croquembouche' не существует

Моноширный редактор и блоки кода

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

Улучшенное позиционирование изображений

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.

+ show screenshots of what this does

- закрыть блок

До:

планшет (сжатый текст)	широкий мобильный (сжатый текст)	узкий мобильный (изображение обрезано по левому краю)

После:

планшет	широкий мобильный	узкий мобильный

Утилиты для документации

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

Фон для блоков кода

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

Цветной код

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:

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

Режим отладки

Опциональный функционал

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.

Улучшенный блок изображений

Provides an improved image block with more features, including:

• Hover zoom is built-in, similar to the 'Hover Enlarge' style provided by Пользователь 'Woedenaz' не существует' 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):

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.

If you don't want the hover zoom feature, there's no reason to use this — use the standard image block instead.

Сноски для изображений

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

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:

That looks like this.²

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.

Простой отзывчивый блок

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:

(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.

(() => {
  const desktopTable = `PASTE TABLE HERE`

  const rowToCells = row => row.split(/\s*\|\|~?\s*/).slice(1, -1)

  const [header, …rows] = desktopTable
    .replace(/ _\n/g, "\\n")
    .split(/[\r\n]+/)
    .map(rowToCells)
    .map(row => row.map(cell => cell.replace(/\\n/g, " _\n")))

  const mobileTables = rows.map(row => {
    return row.reduce((table, cell, cellIndex) => {
      return `${table}\n||~ ${header[cellIndex]} || ${cell} ||`
    }, "")
  })

  const output = [
    '[[div class="croqstyle-responsive-div"]]',
    '[[div class="croqstyle-responsive-div__desktop" style="display: none"]]',
    desktopTable,
    '[[/div]]',
    '[[div class="croqstyle-responsive-div__mobile"]]',
    …mobileTables,
    '[[/div]]',
    '[[/div]]',
  ].join("\n")

  console.log(output)
  copy(output)
})()

Сброс оформления вкладок

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:

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: