Изменения в дизайне

• Изменён шрифт при редактировании текста. Теперь он моноширинный (JetBrains Mono).
• Изменены отступы у маркированных списков. Теперь на мобильных устройствах вложенные списки не создают слишком много пустого пространства.
• Добавлена куча блоков. У блоков есть два варианта кастомизации:
  • Шкурки (может быть применена только одна из списка)
  • Стили (может быть применено сколь угодно из списка если не сказано обратное)
• Добавлены новые шрифты:
  • Caveat
    • Съешь же ещё этих мягких французских булок, да выпей чаю.
    • Шрифт сам по себе очень мелкий и тонкий. При использовании всегда увеличивайте его или делайте полужирным. Напрмер вот так.
  • Martian Mono
    • Съешь же ещё этих мягких французских булок, да выпей чаю.
    • А этот шрифт, наоборот, больше стандартного. Его лучше немного уменьшить.
  • JetBrains Mono
    • Съешь же ещё этих мягких французских булок, да выпей чаю.
• page-content теперь является CSS-контейнером с именем page-content (логично).

Таблицы

Таблицы печально известны тем, что смотрятся на мобильных устройствах очень плохо. Данные обёртки направлены на то, чтобы это исправить.

Простейшая обёртка

[[div class="table-wrapper" style="--mw: /*ваше-значение*/"]]
/* Ваша таблица здесь */
[[/div]]

Данная обёртка делает сразу несколько вещей:

• Предотвращает перенос слов в тексте
• Создаёт scroller если на экране не помещается вся таблица

Также можно задать опциональную переменную —mw. Она указывает на минимальную ширину таблицы в любом состоянии. Для таблицы ниже, например, хорошо подходит значение 800px.

Подобная таблица всё ещё смотрится так себе в случае, если в ячейке очень много текста, но даже так это намного лучше, чем то, что предоставляет стандартная разметка.

Блочная обёртка

[[div class="table-wrapper-b"]]
/* Ваша таблица здесь */
[[/div]]

Вместо того, чтобы сохранять исходный вид таблицы, намеренно впихивая её в рамки экранов мобильных устройств, в данном случае мы перечисляем все свойства по-порядку. Это избавляет от скролла (к сожалению, не на планшетах) и максимально плотно упаковывает текст для вертикальных экранов, но выглядит менее привычно и не «по-табличному».

Блоки текста

Коллекция различных декоративных блоков текста, предназначенных для придания аутентичности визуальной составляющей. Привносящих «документ» из «документальности», хе.

Стопка бумаг

[[div class="note"]]
Lorem ipsum
[[/div]]

Дополнительные классы:

• Шкурки
  • older — состаривает бумагу
  • modern — осветляет бумагу
• Стили
  • handwritten — меняет шрифт на рукописный
  • simple — удаляет бумагу с фона
  • simple-mobile — удаляет бумагу с фона, но только на мобильных устройствах

Кастомизация:

--note-bg-color: var(--mit-note-bg-color);
--note-border-color: var(--mit-note-border-color);
--note-text-color: var(--mit-note-text-color, #333);

Тени и бумага на фоне позволяют чётче выразить края на любом фоне.

material-box

[[div class="material-box"]]
Lorem ipsum
[[/div]]

Взято из Magnus web format за авторством Magnus. Внесены небольшие корректировки в код, не более того.

Не кастомизируется и не имеет дополнительных стилей.

olya-box

[[div class="olya-box"]]
Lorem ipsum
[[/div]]

Названные в честь автора статьи SCP-1376-RU - Словно Святая Хедвига, Хедвига на кресте, Gattebara, она же Оленяшка, блоки вдохновляются теми, что были использованы для документов ГОК и ЦРБ в уже упомянутой статье.

Дополнительные классы:

• Шкурки
  • aiad — шкурка в стиле ОПИИ
  • antimemetics / antimem — шкурка в стиле Отдела антимеметики
  • council — шкурка в стиле Совета О5
  • epistemics / epistem — шкурка в стиле Отдела эпистемических исследований
  • ethics — шкурка в стиле Комитета по этике
  • infotech — шкурка в стиле Отдела информационных технологий
  • memetics / mem — шкурка в стиле Отдела меметики (TBD)
  • metaphysics / meta — шкурка в стиле Отдела метафизики
  • miscommunications / miscdept — шкурка в стиле Отдела по недоразумениям
  • ontokinetics / ontokinet — шкурка в стиле Отдела онтокинетики
  • pataphysics / pata — шкурка в стиле Отдела патафизики
  • quiet-current / qc — шкурка в стиле Отдела временной безошибочности
  • raisa — шкурка в стиле АПАИБ
  • semiospherics / semio — шкурка в стиле Отдела семиосферики
  • surrealistics / surreal — шкурка в стиле Отдела сюрреалистики
  • tactical-theology / tacttheo - шкурка в стиле Отдела тактической теологии (рескин Отдела онтокинетики)
• Стили
  • smaller — немного сужает блок

Кастомизация:

--primary-color: var(--olya-primary-color);
--bg-color: var(--olya-bg-color);
--border-color: var(--olya-border-color);
--underline-color: var(--primary-color);

Изображения на стопке бумаг

Пример надписи на картинке. Надписи довольно длинной и противной, на несколько строк.

Как использовать:

 [[include component:image-block]]

Да, это буквально всё. Параметры не забудьте, ага. Альтернатива в лице rimg, limg и cimg намеренно оставлена нетронутой на случай, если вам потребуется создать какую-либо отличную конструкцию из изображений и подписей к ним.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.

Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.

Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.

Блоки текста по бокам

[[div class="float-div"]]
Lorem ipsum
[[/div]]

Используется для создания своего рода сносок без использования footnote. Выдвигает блок на небольшое расстояние за пределы экрана. Сам по себе ничего не делает и располагается по центру. По умолчанию имеет стиль, идентичный блоку цитат, но вы можете это легко изменить.

На мобильных устройствах отображаются как обычные блоки текста.

Дополнительные классы:

• Шкурки
  • Технически, не имеет собственных шкурок. Однако вместо них можно использовать любой описанный в этом документе стиль. Например note или olya-box.
• Стили
  • left — сдвигает блок влево (несовместим с right)
  • right — сдвигает блок вправо (несовместим с left)

Уведомления

[[div class="memo-general"]]
Lorem ipsum
[[/div]]

Дополнительные классы:

• Шкурки (эмблемы за авторством EstrellaYoshte, Woedenaz и Kardalak)
  • aiad — шкурка в стиле ОПИИ
  • antimemetics / antimem — шкурка в стиле Отдела антимеметики
  • council — шкурка в стиле Совета О5
  • epistemics / epistem — шкурка в стиле Отдела эпистемических исследований
  • ethics — шкурка в стиле Комитета по этике
  • infotech — шкурка в стиле Отдела информационных технологий
  • memetics / mem — шкурка в стиле Отдела меметики (TBD)
  • metaphysics / meta — шкурка в стиле Отдела метафизики
  • miscommunications / miscdept — шкурка в стиле Отдела по недоразумениям
  • ontokinetics / ontokinet — шкурка в стиле Отдела онтокинетики
  • pataphysics / pata — шкурка в стиле Отдела патафизики
  • quiet-current / qc — шкурка в стиле Отдела временной безошибочности
  • raisa — шкурка в стиле АПАИБ
  • semiospherics / semio — шкурка в стиле Отдела семиосферики
  • surrealistics / surreal — шкурка в стиле Отдела сюрреалистики
  • tactical-theology / tacttheo - шкурка в стиле Отдела тактической теологии (рескин Отдела онтокинетики)
• Стили
  • smaller — немного сужает блок
  • padded — увеличивает внутренний отступ сверху и снизу
  • clipped — добавляет клейкую ленту на блок. Занимает один селектор ::before

Кастомизация:

--memo-text-color: #333;
--memo-border-color: #f2f2f2;
--memo-bg-color: white;
--memo-bg-image: url(https://files.scpfoundation.net/local--files/draft:mitya-styles/default.png);

Спойлеры

Тут будут спойлеры trust

Длинный спойлер

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

Исправляет кучу мелких багов которые мне мозолили глаза. А ещё замечательно смотрится на мобилках. А ещё кастомизация глубже, но это уже дело десятое.

[[div_ class="wcol-wrapper"]]
[[collapsible]]
Lorem ipsum
[[/collapsible]]
[[/div]]

Дополнительные классы:

• Шкурки
  • auth — шкурка в стиле попытки аутентификации (смотрится лучше без стиля special)
• Стили
  • smaller — немного сужает блок
  • special - добавляет стрелки по бокам
    • animated - добавляет анимацию свойству special
  • smooth — добавляет плавное раскрытие для блока с текстом
    • НЕ РАБОТАЕТ С hideLocation="bottom"!!!

Кастомизация:

--header-bg-color-general: transparent;
--header-text-color-general: #901;

--header-bg-color-open: var(--header-bg-color-general);
--header-bg-color-closed: var(--header-bg-color-general);
--header-text-color-open: var(--header-text-color-general);
--header-text-color-closed: var(--header-text-color-general);

--body-bg-color: white;
--body-border-color: #dcdcdc;
--body-border-hover-color: #505052;
--body-text-color: #333;

--special-triangle-color: var(--header-text-color-closed);
--special-bg-color: var(--special-triangle-color);
--special-text-color: var(--body-bg-color);

--special-triangle-color-open: var(--special-triangle-color);
--special-triangle-color-closed: var(--special-triangle-color);
--special-bg-color-open: var(--special-bg-color);
--special-bg-color-closed: var(--special-bg-color);
--special-text-color-open: var(--special-text-color);
--special-text-color-closed: var(--special-text-color);