.

Flopstyle: DARK
Это рабочий пример sidebox.

Это flavorbox

Обратитесь к подсекции Sidebox'ы за подробностями.

ШАГ 3. СОЗДАЙТЕ НАВИГАЦИОННУЮ ЦЕПОЧКУ Скопируйте код ниже и вставьте его прямо под предыдущим блоком с заголовком статьи:

[[div class="pseudocrumbs"]]
[[[parent-page-url1|Заголовок первой страницы-родителя]]] » Заголовок дочерней страницы
[[[parent-page-url2|Заголовок второй страницы-родителя]]] » Заголовок дочерней страницы
[[/div]]

‼️ Если вы создаёте статью с использованием ListPages, не беспокойтесь — вы всё ещё можете устанавливать родителя своим фрагментам как обычно, но делать это обычным способом. В данном случае функциональность важнее внешнего вида.

_{Пример работы шагов 3 и 4.}

3. Плашка от Lt Flops

---

Flopstyle: DARK предоставляет тёмный вариант плашки Lt Flops:

[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]

_{Пример плашки Lt Flops в действии.}

Показать варианты для Metafoundation

Скрыть варианты для Metafoundation

Вариант INFERNO

---

_{Для канона "Из архивов 120-ой"}

[[include theme:flopstyle-dark
|inferno=a]]

Вариант MAPLE

---

_{Для канона "На страже 43-ей"}

[[include theme:flopstyle-dark
|maple=a]]

Вариант PLASTIC

---

_{Для канона "О. и У. Синтетика"}

[[include theme:flopstyle-dark
|plastic=a]]

Вариант PRAIRIE

---

_{Для разрабатываемого канона "The Way It Goes"}

[[include theme:flopstyle-dark
|prairie=a]]

Вариант SEAFOAM

---

_{Для цикла "Рыболовный совет"}

[[include theme:flopstyle-dark
|seafoam=a]]

Вариант THRESHOLD

---

_{Для канона "Нет возврата" — Ветвь рубежа}

[[include theme:flopstyle-dark
|threshold=a]]

Вариант VANGUARD

---

_{Для канона "Нет возврата" — Ветвь Авангарда}

[[include theme:flopstyle-dark
|vanguard=a]]

Скрыть варианты для Metafoundation

Показать варианты для WITCH

Скрыть варианты для WITCH

Вариант WITCH (не адаптирован)

---

_{Для цикла "Weaving Imperceptible Threads"}

[[include theme:flopstyle-dark
|witch=a]]

Используйте один из этих атрибутов чтобы получить подвариант темы WITCH.

Подвариант BOOK OF ASHES (не адаптирован)

---

[[include theme:flopstyle-dark
|witch=a
|ashes=a]]

Подвариант BOOK OF LIGHT (не адаптирован)

---

[[include theme:flopstyle-dark
|witch=a
|light=a]]

Подвариант BOOK OF VELDT (не адаптирован)

---

[[include theme:flopstyle-dark
|witch=a
|veldt=a]]

Подвариант LOOSE THREADS (не адаптирован)

---

[[include theme:flopstyle-dark
|witch=a
|loose-threads=a]]

Вариант GALAXIAS

---

_{Для отдела лактозных аномалий}

[[include theme:flopstyle-dark
|galaxias=a]]

Вариант PEDAGOGY

---

_{Для Международного Центра Исследований Единой Тауматологии}

[[include theme:flopstyle-dark
|pedagogy=a]]

Скрыть варианты для WITCH

Показать остальные варианты

Скрыть остальные варианты

Вариант CALZONE (не адаптирован)

---

_{На день дурака 2024 🎭}

[[include theme:flopstyle-dark
|calzone=a]]

Вариант CHTHONIAN

---

_{Для канона "Цицувский ад"}

[[include theme:flopstyle-dark
|chthonian=a]]

Вариант MONSTER

---

_{На Хэллоуин 2022 🎃}

[[include theme:flopstyle-dark
|monster=a]]

Вариант RHIZOME

---

_{Для Зоны 89}

[[include theme:flopstyle-dark
|rhizome=a]]

Вариант SYZYGY

---

_{Для инициативы "Три Луны"}

[[include theme:flopstyle-dark
|syzygy=a]]

Вариант WITCHING HOUR

---

_{Для канона "СУМЕРКИ"}

[[include theme:flopstyle-dark
|witching-hour=a]]

Вариант PEENUMBRA (не адаптирован)

---

_{Шуточный вариант}

[[include theme:flopstyle-dark
|peenumbra=a]]

Скрыть остальные варианты

Показать форматирование изображений

Скрыть форматирование изображений

_{Блоки изображений}

Стандартый блок с изображением

Bootstrap Image Box

Красивый и настраиваемый блок с изображением

---

Bootstrap Image Box

---

В качестве альтернативы стандартному блоку с изображением, Flopstyle: DARK использует модифицированную версию сниппета "Bootstrap Image Box" за авторством Timothy Foster. Документация по данному сниппету доступна здесь.

Вот краткий обзор:

Инструкции по настройке

ШАГ 1 Скопируйте это на свою страницу:

[[include component:bs-image
|image=
|heading=
|caption=
|link=
|alt=
|width=
|float=
|kind=
]]

ШАГ 2 Сверьтесь с этим коротким руководством:

НАЧАЛО БЛОКА INCLUDE ↦

Файл изображения (Обязателен!) ↦

Заголовок изображения ↦

Описание изображения ↦

Ссылка на изображение ↦

Alt-текст (См. ниже) ↦

Ширина (число с единицами измерения) ↦

Выравнивание блока ↦

Цвет блока (Поиграйтесь с этим параметром!) ↦ Рекомендуется Primary

КОНЕЦ БЛОКА INCLUDE ↦

[[include component:bs-image

|image=filename.png

|heading=Заголовок

|caption=Описание

|link=ссыл.ка/none

|alt=Альтернативный текст

|width=length

|float=left/middle/right

|kind=primary/warning/danger/info/success/none

]]

ШАГ 3 Заполните все поля после знака =.

---

_{Альтернативный текст (Alt-текст)}

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

Суть такова: Когда вы добавляете изображение, есть шанс что некоторые читатели — например, люди с нарушением зрения или слепотой — не смогут его увидеть. Alt-текст позволяет предоставить им краткое описание этого изображения для парсинга экранным диктором. Alt-текст также появляется, если изображение или ссылка на него становится недоступна.

Для установки alt-текста вам просто надо передать атрибут alt в Bootstrap Image Box или обычному изображению, вставленному через синтаксис вики..ПРИМЕЧАНИЕ Стандартный блок с изображением не поддерживает alt-текст

Демонстрация:

[[include component:bs-image
|image=Larry_the_cat.jpg
|heading=Кот Ларри
|caption=Он очень мягкий.
|link=https://scpfoundation.net/local--files/theme:flopstyle-dark/Larry_the_cat.jpg
|alt=Бежевый кот Ларри сидит во дворе, навострив уши.
|width=300px
|float=middle
|kind=primary
]]

Кот Ларри

Он очень мягкий.

Обратите внимание на поле alt. В нём содержится информация, которую зачитает экранный диктор.

---

_{Imagediv
Спёрто из BLANKSTYLE CSS за авторством Placeholder McD и HarryBlank}

[[div class="imagediv"]]
[[=image СЮДА_АДРЕС]]
[[/div]]

Скрыть форматирование изображений

Показать форматирование таблиц

Скрыть форматирование таблиц

_{Обычные таблицы}

Блок с изображением, разделённый блоком tableb.

заголовок	заголовок	заголовок	заголовок
содержимое ячейки	содержимое ячейки	содержимое ячейки	содержимое ячейки

Таблица с прикольным оформлением hcell
Но её ячейки были разделены	блоком tableb!

---

_{Таблицы цветов ACS
Спёрты из BLANKSTYLE CSS за авторством Placeholder McD и HarryBlank}

Это ЗЕЛЁНАЯ таблица;
её интересно тестировать.

[[div class="table1"]]

Это СИНЯЯ таблица;
её тоже интересно тестировать.

[[div class="table2"]]

Это ЖЁЛТАЯ таблица;
её тоже интересно тестировать.

[[div class="table3"]]

Это ОРАНЖЕВАЯ таблица;
её тоже интересно тестировать.

[[div class="table4"]]

Это КРАСНАЯ таблица;
её не так интересно тестировать.

[[div class="table5"]]

Это ФИОЛЕТОВАЯ таблица;
она и есть тестирование.

[[div class="table6"]]

Это БЕЛАЯ таблица;
нет никакого тестирования.

[[div class="table0"]]

Совмещайте span'ы с классами таблиц и полужирный текст, чтобы получить цветной полужирный текст:

ЗЕЛЁНЫЙ
[[span class="table1"]] **ЗЕЛЁНЫЙ** [[/span]]

СИНИЙ
[[span class="table2"]] **СИНИЙ** [[/span]]

ЖЁЛТЫЙ
[[span class="table3"]] **ЖЁЛТЫЙ** [[/span]]

ОРАНЖЕВЫЙ
[[span class="table4"]] **ОРАНЖЕВЫЙ** [[/span]]

КРАСНЫЙ
[[span class="table5"]] **КРАСНЫЙ** [[/span]]

ФИОЛЕТОВЫЙ
[[span class="table6"]] **ФИОЛЕТОВЫЙ** [[/span]]

БЕЛЫЙ
[[span class="table0"]] **БЕЛЫЙ** [[/span]]

Скрыть форматирование таблиц

Показать особое форматирование

Скрыть особое форматирование

В каждом примере особого форматирования представлено:

• Визуальное оформление.
• Синтаксис для использования.
• Некоторые могут также включать краткое описание для чего они предназначены.

💡 ПОМНИТЕ — каждый div необходимо закрывать с помощью [[/div]] и каждый span — с помощью [[/span]].

_{Центрированный текст}

Nulla egestas risus ac venenatis rhoncus. Nunc imperdiet mattis risus ac iaculis. Etiam egestas est lorem, at vehicula odio convallis eu. Nam condimentum, nisl sed rutrum tempor, sapien nibh elementum justo, non semper leo ante at tortor. Praesent ac enim a nisi luctus commodo. Vivamus et euismod leo, sed volutpat ligula. Fusce nec tempus lacus, a placerat risus. Phasellus luctus.

[[div class="centered"]]

---

_{Текст с выравниванием по ширине}

Ut ut quam non augue malesuada lacinia. Sed a eros sit amet lacus cursus tempor viverra nec velit. Suspendisse vel ante tincidunt, ultrices metus id, pellentesque odio. Integer sodales enim vel ligula sagittis, quis aliquam mauris tincidunt. Maecenas fringilla turpis vitae luctus tempus. Suspendisse ut mollis lectus. Donec nisi mauris, laoreet ac urna at, semper lobortis turpis. Sed purus elit, scelerisque ut tortor sed, laoreet dapibus odio. In libero mauris.

[[div class="justified"]]

---

_{Текст с красной строкой}

Aliquam fringilla eleifend tellus, feugiat pellentesque lacus auctor vitae. Praesent volutpat rutrum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur at commodo leo. Aliquam sapien eros, bibendum id vulputate in, convallis vestibulum diam. Suspendisse ultricies vel ante eu porttitor. In a massa ante. Sed eu elit.

[[div class="indented"]]

---

_{Символ конца статьи}

“end mark (или символ конца статьи): Типографический элемент, обозначающий конец статьи. Часто он представлен символом конца доказательства, но он может быть и интересным узором.”

[[div class="end-mark"]] устанавливает символ конца статьи в конце последнего абзаца внутри блока (как в конце следующего абзаца!). Используйте его совместно с любым особым оформлением текста. Эта тема использует стандартный символ конца статьи в виде ромба, разделённого ‘X’.

Символы конца статьи — классический приём в типографии. На вики SCP, они будут наиболее уместны при написании рассказов.

---

_{Красный текст пересмотра документа}
Прививка распространена.

[[span class="rev-red"]] Текст [[/span]]

---

_{Жёлтый текст пересмотра документа}
Загрузка остановлена. Обновить?

[[span class="rev-yellow"]] Текст [[/span]]

---

_{Зелёный текст пересмотра документа}
Устаревшая информация помечается зелёным.

[[span class="rev-green"]] Текст [[/span]]

---

_{Синий текст пересмотра документа}
Прививка завершена!

[[span class="rev-blue"]] Текст [[/span]]

---

_{Текст в компьютерном терминале}
[РЕДАКТИРОВАНИЕ]
[ИСКЛЮЧЕНИЕ]
[ДАННЫЕ УТЕРЯНЫ]

[[span class="terminal-span"]] [ТЕКСТ] [[/span]]

---

_{Жирный текст}
Пример

[[span class="bt"]] Текст [[/span]]

Вы всё ещё можете создавать полужирный текст стандартным синтаксисом, однако для двух дальнейших вариантов особого форматирования необходим именно такой вариант.

---

_{Жирный текст с полосой}
Пример

[[span class="bt bb"]] Текст [[/span]]

---

_{Жирный текст с полосой заголовка}

ПРИМЕР

+++* [[span class="bt bh"]] ТЕКСТ [[/span]]

---

_{Жирный текст цвета textColor}
Пример

[[span class="tb"]] Текст [[/span]]

---

_{Жирный текст цвета textColor с полосой}
Пример

[[span class="tb bb"]] Текст [[/span]]

---

_{Мигающая текстовая каретка}

[[div id="append-blink-bar"]] помещает мигающий символ юникода “Full Block” в конце последнего параграфа в рамках блока. Данный блок имитирует старый мигающий курсор в конце командной строки.

---

_{Красивая горизонтальная линия}

---

[[div class="fancyhr"]]
----
[[/div]]

---

_{Красивая окантовка}

[[div class="fancyborder"]]

---

_{Особый блок с заголовком 1}

---

ЗАГОЛОВОК

ПОДЗАГОЛОВОК

---

[[div class="lite-heading"]]
----
++* ЗАГОЛОВОК
+++* ПОДЗАГОЛОВОК
----
[[/div]]

---

_{Особый блок с заголовком 2}

---

МАТЕРИАЛЫ ПРИЛОЖЕНИЙ

---

[[div class="lite-heading"]]
----
++* МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
----
[[/div]]

---

_{Альтернативный показ изображения}

[[div class="image-showcase"]]
[[=image URL_АДРЕС]]
[[/div]]

---

_{Разделитель сцен}

[[=image URL_АДРЕС class="scene-break"]]

scene-break — ажурный символ, “обозначающий паузу для читателя и перемену в нарративе”.

Разделители сцен — классический приём в типографии. Вот пример такого из Приключений Алисы в стране чудес. На вики SCP, scene-break наиболее уместен при написании рассказов.

---

_{Разделитель сцен с оттенком}

[[=image URL_АДРЕС class="scene-break icon-tint"]]

icon-tint следует использовать только с чёрными логотипами. Изменить цвет иконки можно, поменяв значение переменной --hue в [[module CSS]]:

--hue: #deg;

Замените # на желаемое положительное целое число. По умолчанию 325deg.

---

_{Пагинация ListPages — Первая страница}

Следующая итерация ▷

[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Следующая итерация ▷]
[[/div]]
[[/div]]

---

_{Пагинация ListPages — Последующие страницы}

Следующая итерация ▷

◁ Назад

next должен всегда быть первым:

[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[/offset/1 Следующая итерация ▷]
[[/div]]

[[div class="listPagesNav-prev"]]
[/offset/0 ◁ Назад]
[[/div]]
[[/div]]

---

_{Выцветение до чёрного}

[[div class="fade-away"]]

Для управления длиной затенения, меняйте число в [[lines 5]] по своему желанию.

---

_{Выцветение до белого}

[[div class="whiteout"]]

Для управления длиной затенения, меняйте число в [[lines 5]] по своему желанию.

---

_{Конец содержимого статьи}

[[div class="footing"]]

---

_{Блок со связанными статьями}

• Заглавная страница - SCP Foundation

[[div class="related-flex"]]
[[div class="related"]]
* **[[[link-to-a-page|Пользовательский текст]]]**
[[/div]]
[[/div]]

---

_{Пагинация в цикле}

« Предыдущая страница | Текущая страница | Следующая страница »

[[div class="series-nav"]]
« Предыдущая страница | [[size 120%]]Текущая страница[[/size]] | Следующая страница »
[[/div]]

---

_{Визуальный элемент Earthworm
за авторством Croquembouche}

Обратитесь к странице компонента за инструкциями по установке.

---

_{Переключатель активности модуля рейтинга}

рейтинг: 4.2

6/83%

[[span id="activeRate"]]
[[module Rate]]
[[/span]]

Любой модуль рейтинга будет находиться в "неактивном" состоянии по умолчанию и становиться "активным" при наведении курсора.

⚠️ Согласно политике CSS, это можно размещать только в конце страницы.

Скрыть особое форматирование

🡹

Это - вариант темы Eigenvector от EstrellaYoshte, созданный Billith и предназначенный для общего пользования. Базовый вариант темы ассоциируется с SCP-объектами Центра П.М., но его можно настроить под большое множество других потребностей.

Для подключения этой темы к своей статье, добавьте в неё этот текст:

[[include theme:eigenmachine]]

Добавьте этот параметр для оформления удалений:

[[include theme:eigenmachine delete=a]] (Посмотреть на неё в действии)

Добавьте этот параметр для светлой темы:

[[include theme:eigenmachine light=a]] (Посмотреть на неё в действии)

Добавьте этот параметр для варианта murder of the universe:

[[include theme:eigenmachine murder=a]] (Посмотреть на неё в действии)

Каждая вариация предоставляет уникальный набор окрашенных блоков, не забудьте заценить их! Также в разработке находится ретро-вариант.

Основы

Image.

Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо  (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.

Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки

Это цитата, её можно создать поставив "> " в начале строки.

Больше текста

---

Это горизонтальная линия.

Вложенная цитата.

Продолжаем вкладывать

Сколько душе угодно

Специальные блоки

Эта тема расширяет классы oheader/capt из Eigenvector, добавляя новые цвета, детали и новый класс ocolor:

Класс блоков logger используется для оформления разговоров. Его можно отличить по едва заметному круглому узору на фоне:

span class s-title

Идеален для подразделов.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque felis eu vulputate suscipit. Vestibulum dui elit, ornare eget eros ut, gravida finibus velit. Pellentesque et diam vel turpis semper ullamcorper. Integer scelerisque malesuada enim, a semper risus molestie eget. Fusce luctus ex in ante feugiat fermentum. In nec sodales nibh. Suspendisse potenti. Aenean in volutpat turpis, in dictum sapien. Quisque vehicula turpis nec ligula feugiat commodo. Maecenas ornare lorem vel commodo mattis. Sed egestas dignissim sapien nec pulvinar.

Другие блоки

razer, типа как "raiser", потому что как бы поднимает:

inter, который меняет цвет текста в зависимости от класса цвета:

lightpanel и darkpanel — настраиваемые альтернативные блоки:

Классы цветов на них тоже работают:

Сами по себе, блоки space просто изменяют пространство под нужды, не более:

Добавляйте классы цвета/размера/направления/блоков чтобы настраивать вышеупомянутые элементы как вам надо. Можете поэкспериментировать:

Плашки

Для использования в статьях Отдела удалений:

Для использования в статьях с участием Надзора Представителей:

Для использования в чём угодно:

Для редактирования содержимого используйте переменные --custom-header, --custom-logo, и --custom-color. Также можно использовать классы цветов. Пример:

Продвинутые штучки

Затухание/проявление

Добавьте классы fade-in1, fade-in2 и fade-in3, чтобы заставить отдельные элементы проявляться при загрузке или взаимодействии.

Надписи

Курсор (только в настольной версии сайта)

Стандартный курсор — указатель. Некоторые элементы по умолчанию имеют отличиающиеся курсоры. Например:

Настраивается с помощью классов курсоров:

Астериски*
* которые на самом деле не астериски.

Астериски используются вместо/вместе с горизонтальными линиями для отделения разделов статьи. К примеру, вы можете использовать горизонтальные линии внутри блоков, а их — вне блоков. Они также хорошо подходят для иконок и загрузочных анимаций.

Если поместить изображение в блок с классом asterisk, оно будет отформатировано по необходимому размеру, который можно задать с помощью --astersize. Он также функционирует как обёртка для некоторых анимаций, применяемых к блоку. Используйте вспомогательный класс inverse для инвертирования цветов астериска для более тёмных цветовых палитр.

показать астериски

скрыть

доступные варианты:

asterisk_scp.svg	asterisk_emblem.svg
asterisk_asterisk.svg	asterisk_spinner2.svg
asterisk_cube.svg	asterisk_blackbox.svg
topologo.svg	asterisk_spinner.svg
asterisk_flower.svg	asterisk_mdd.svg
asterisk_conglomerate.svg	asterisk_collideoscope.svg
asterisk_delete.svg	asterisk_delete2.svg

Используйте класс spinner (контролируется --scale1 и --loop2), для добавления анимации вертикального вращения (оберните астериск блоком с классом контейнера contain-aster):

Используйте класс rotator (контролируется --scale2 и --loop2), для добавления анимации горизонтального вращения (оберните астериск блоком с классом контейнера contain-aster):

Переменные

Для изменения значений переменных, добавьте в статью модуль CSS, вот так:

[[module CSS]]





[[/module]]

Затем добавьте псевдо-класс :root:

[[module CSS]]
:root {



}
[[/module]]

А теперь добавляйте необходимые переменные и значения, которые вы хотите им присвоить:

[[module CSS]]
:root {

--variable-name: value;

}
[[/module]]

Шрифты

Это — Blankstyle CSS. Визуальная тема, созданная Placeholder McD и HarryBlank для использования в статьях последнего. Она существует для лёгкого обновления оформления в множестве работ. По сути, она функционирует как светлый вариант темы Penumbra за авторством EstrellaYoshte, но с несколькими особенностями Blank'а.

Эта тема почти точно не будет работать с какими-либо другими темами, тем более с Black Highlighter. Не используйте данную тему, если не знаете во что лезете.

Для подключения этой темы, добавьте следующую строчку в начало своей статьи:

[[include theme:blankstyle]]

Учтите, что данная тема включает в себя следующие компоненты:

• Скрываемый сайдбар для Sigma-9
• Проявление страницы (с параметром speed=3)
• Анимация плашки ACS
• Улучшенные сноски (BetterFootnotes)

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

Эта тема заимствует код от EstrellaYoshte и из component:image-block-peppo за авторством PeppersGhost, который центрирует изображения и блоки с изображениями так, чтобы они выглядели эстетически приятно на маленьких экранах (читайте: мобильных). Сюда также добавлен гениальный код sidebox'ов, написанный EstrellaYoshte для темы Penumbra, а большая часть кода взята из Тема Paperstack.

Для получения информации о других особенностях BLANKSTYLE CSS, перейдите в обсуждение статьи и просмотрите список изменений.

Представленные далее таблицы с цветными заголовками можно получить, обернув таблицу в блок с классами от "table1" до "table5", соответственно.Учтите, что оборачивание scp-image-block в один из таких блоков изменит фон его подписи. А это — пример BetterFootnote, подробности об использовании которого можно найти по ссылке выше.. Эти классы соответствуют 5 основным уровням плашки ACS. Ещё есть класс table6, использующийся для фиолетовых таблиц.

Примечание: Фиолетовый используется для обозначения объектов класса Таумиэль и документов с уровнем допуска 6 (Совершенно Секретно) или 6/Provisional (Thaumiel-Proviso). Это отражает синестетические предпочтения Placeholder McD и желание HarryBlank включать в свои статьи штуки, что мне понравились.

Блок с классом tableb отделяет клетки внутри вложенных таблиц.

_{А HarryBlank очень и очень долго форматировал свои таблички вручную. Вот же чудик.}