Исходный код

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

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

Это фоновые изменения, улучшающие™ процесс чтения или написания.

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

Запрещает сноскам растягиваться до километра в ширину, позволяя вам спокойно их читать.¹

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

Изменяет шрифт поля редактирования статьи на моноширный, также заменяет шрифт любого моноширного текста на Fira Code, очевидно лучший моноширный шрифт.

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

На мобильных экранах блоки изображений больше не могут "уползать" за границу страницы.

На чуть больших экранах, блоки изображений теперь не занимают по 80% ширины страницы, оставляя тоненькую полоску текста. Теперь изображения отцентрированы, и текст не сможет появится рядом с ними.

+ Показать скриншоты, демонстрирующие это

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

До:

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

После:

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

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

Эти фишки предназначены для облегчения документации тем и компонентов.

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

Добавляет светло-серый фон в элементы <code> ({{text}}), чтобы они немного выделялись на фоне остального текста.

Цветной код

Добавляет своеобразную подсветку синтаксиса через переменные CSS. Цвета подсветки взяты из стандартных светлой и тёмной темы VSCode.

Вы можете добавить класс .terminal псевдо-блоку кода — [[div class="code terminal"]] — чтобы придать ему консольный стиль. Это не работает с блоками [[code]], потому что сайт добавляет свою подсветку, которую просто так не поменять. Так что используйте его только для не-[[code]] блоков. Включить тёмный режим можно с помощью .terminal--dark:

Инструменты для авто-подсветки (англ.): component includes · divs and spans

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

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

Это новые плюшки и виджеты, которые вы можете добавлять на свою страницу по желанию. Они все по умолчанию выключены, а их классы CSS начинаются с 'croqstyle', так что риск, что что-то сломается на вашей странице, равен нулю, даже если вы их не используете.

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

Предоставляет блок с изображением с расширенным функционалом, включая:

• Встроенное увеличение при наведении, примерно как в режиме 'Hover Enlarge' компонента Image Features за авторством Woedenaz.
• Встроенная поддержка alt-текста.
• Поддерживает показ изображений с более высоким разрешением при наведении (в отличие от Image Features, который показывает то же самое изображение, просто увеличенное), а также показывает гифку загрузки пока более крупное изображение скачивается.

Пожалуйста, не делайте увеличенное изображение отличным от изначального (по типу скримера), это кринж. Данный блок, в первую очередь, — средство улучшения доступности.

Для использования, вставьте шаблон ниже в свою статью (который очень похож на синтаксис обычного блока с изображением):

Замените block-right на block-left или block-center для выравнивания по левому краю и центрированию соответственно. Вы также можете поместить fallback-изображение внутрь .scp-image-alt, используя обычный синтаксис [[image]], если хотите.

Если вы не хотите указывать другое изображение для увеличенной версии, вы можете пропустить переменную --image-large-url, — тогда и по умолчанию, и при увеличении, будет использоваться изображение из --image-url.

Если вы не хотите функцию увеличения при наведении, тогда вам нет смысла использовать этот блок. Лучше обратитесь к стандартному блоку с изображением.

Сноски-изображения

Предоставляет класс, добавляющий сноски-изображения. Они работают как обычные сноски, но с изображениями.

Здесь используются те же переменные CSS, что и в 'улучшенном блоке с изображением' выше, так что будет удобнее объявить класс CSS для изображения, а затем использовать его для обеих функций.

В принципе, используя стандартный синтаксис RuFoundation, вы уже можете помещать изображения в сноски:

И это выглядит так.²

Но класс croqstyle-img-footnote немного отличается от обычных сносок:

• Он подсвечивает слово или фразу, как контекст, а не только циферку сноски
• Он не добавляет сноску в список сносок, позволяя заново использовать сноски-изображения сколько угодно, не забивая конец страницы изображениями.

Они неплохо работают в качестве 'сносок-напоминаний', например, чтобы напомнить читателю как выглядит объект SCP, без нужды в прокрутке до изначального изображения.

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

Предоставляет набор классов для простого отзывчивого блока div, которые отображает одно содержимое для пользователей настольных устройств и другое для пользователей с мобильных устройств.

Вот шаблон:

(display: none нужен, чтобы в случае копирования этого шаблона на страницу без croqstyle или в случае удаления инклюда croqstyle, спокойно отображалась мобильная версия и ничего не ломалось)

Стиль 'mobile' будет применён, когда содержимое страницы меньше 550 пикселей в ширину. Это учитывает не только ширину экрана, но и темы и наличие сайдбара (вы же знаете что примерно на ~800px настольный сайдбар появляется и для содержимого остаётся лишь тоненькая полоска пространства?), так что он должен быть устойчив к любым условиям.

Учтите, что блок .croqstyle-responsive-div должен быть в ширину родительского элемента/страницы, охватывающего все отзывчивые элементы, возможно вы даже сможете поместить саму страницу внутрь него. При этом __desktop и __mobile могут быть хоть span-ами, и помещать их на страницу можно сколько угодно.

(() => {
  const desktopTable = `ВСТАВЬТЕ СЮДА ТАБЛИЦУ`

  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)
})()

Обнуление оформления вкладок

Эта утилита сбрасывает CSS элемента tabview — т.е. удаляет любое оформление. Меня всегда бесило копание в стилях вкладок Wikidot'а и переопределение оформления по маленьким кусочкам каждый раз, когда мне хотелось поменять внешний вид вкладок. При использовании данной утилиты, эта мучительная работа делается за вас.

Для обнуления оформления tabview, оберните его в .croqstyle-reset-tabs:

Это не сбрасывает CSS, который скрывает и показывает содержимое вкладок, но вы можете обнулить его сами, если хотите заменить на свою анимацию: