Тема Flopstyle: LITE
Эта страница содержит визуальную тему, используемую на данной вики.
Подключение темы к другим страницам осуществляется с помощью следующего кода (указывается в начале страницы) Нажмите на блок, чтобы скопировать код:
Страница, объединяющая все визуальные темы в единый список, расположена по ссылке: Хаб визуальных тем.
Здесь должен был быть рабочий пример authorbox. Обратитесь к подсекции Sideboxes за информацией.
⮤ Это flavorbox ⮥
Для его создания, скопируйте блок ниже
и вставьте его в свой authorbox:
[[div class="flavorbox"]]
Пример форматирования
В каждом примере блоков div представлено:
- Визуальное оформление.
- Синтаксис для использования.
- Некоторые могут также включать краткое описание для чего они предназначены.
⚠️ ПРЕДУПРЕЖДЕНИЕ ⚠️
[[div class="content-warning"]]
⚠️ **ПРЕДУПРЕЖДЕНИЕ** ⚠️
Текст
[[/div]]
Обычный блок с цитатой
[[div class="blockquote"]]
Текст
[[/div]]
Дополнительный блок с цитатой
[[div class="alt-blockquote"]]
Текст
[[/div]]
Минималистичный блок с цитатой
[[div class="lightweight"]]
Текст
[[/div]]
Красивый блок с цитатой
[[div class="card-block"]]
Текст
[[/div]]
Блок отчёта
Для внутренней документации
[[div class="report-box"]]
+++* Заголовок
----
Текст
[[/div]]
Блок отчёта, но с тенью
[[div class="report-box realistic-shadow"]]
Альтернативные блоки отчёта:
[[div class="report-box red-tint"]]
[[div class="report-box orange-tint"]]
[[div class="report-box yellow-tint"]]
[[div class="report-box green-tint"]]
[[div class="report-box cyan-tint"]]
[[div class="report-box blue-tint"]]
[[div class="report-box magenta-tint"]]
[[div class="report-box grey-tint"]]
Блок документа Смотрителя
[[div class="o5-box"]]
Текст
[[/div]]
Фальшивый блок "Исходник страницы"
[[div class="faux-source"]]
Текст
[[/div]]
Блок с закадровым текстом
Lorem ipsum dolor sit amet, quis habeo facilisi eum an. Habeo denique consequuntur nec at, id his agam inciderint. Ex veri doming disputationi quo, error clita eruditi ei quo. Melius labitur comprehensam pro cu. Ut dico veritus assueverit sed.
Duo justo vitae dicant cu, ut his vitae appetere eloquentiam. Repudiare consequat ei eum, ex eam vocibus denique iracundia. Vix vocent minimum sensibus in, ad quando phaedrum intellegam sed. Fastidii argumentum ne vel, ad sint errem.
[[div class="narration justified indented"]]
Текст
[[/div]]
ПРЕДУПРЕЖДЕНИЕ: БЛОК УВЕДОМЛЕНИЯ
Для вызова сердечного приступа у читателя
[[div class="warning-notice"]]
+* ПРЕДУПРЕЖДЕНИЕ
----
Текст
[[/div]]
Субъект: Блок дневника
Для аутентичности
[[div class="journal"]]
Текст
[[/div]]
Учтите: Этот блок не позволяет делать двойной перенос строки. Для этого вам необходимо сделать следующее:
1. После каждой строки текста нажать enter.
2. На новой строке напишите [[lines 1]].
3. Снова нажмите enter и можете продолжать.
Блок в виде SMS 😳
[[div class="sms-message"]]
Текст
[[/div]]
Если SMS-блок один, вставьте код ниже после него.
Если SMS-блоков несколько, вставьте код ниже после последнего блока.
[[div style="clear: left;"]]
[[/div]]
В каждом примере особого форматирования представлено:
- Визуальное оформление.
- Синтаксис для использования.
Красный текст
Прививка распространена.
[[span class="rev-red"]] Текст [[/span]]
Зелёный текст
Устаревшая информация помечается зелёным.
[[span class="rev-green"]] Текст [[/span]]
Синий текст
Прививка завершена!
[[span class="rev-blue"]] Текст [[/span]]
Жёлтый текст
Загрузка остановлена. Обновить?
[[span class="rev-yellow"]] Текст [[/span]]
Текст в компьютерном терминале
[РЕДАКТИРОВАНИЕ]
[ИСКЛЮЧЕНИЕ]
[ДАННЫЕ УТЕРЯНЫ]
[[span class="terminal-span"]] [ТЕКСТ] [[/span]]
Мигающий текстовый курсор
_
или
|
[[span class="blinkbar"]]|[[/span]]
Особый блок с заголовком 1
ЗАГОЛОВОК
ПОДЗАГОЛОВОК
[[div class="lite-heading"]]
----
++* ЗАГОЛОВОК
+++* ПОДЗАГОЛОВОК
----
[[/div]]
Особый блок с заголовком 2
МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
[[div class="lite-heading"]]
----
++* МАТЕРИАЛЫ ПРИЛОЖЕНИЙ
----
[[/div]]
Альтернативный показ изображения
[[div class="image-showcase block-center"]]
[[=image АДРЕС_СЮДА]]
[[/div]]
Красивый разделитель сцен/секций
[[=image АДРЕС_СЮДА class="scene-break"]]
Навигационные элементы для ListPages
[[div class="listPagesNav"]]
[[div class="listPagesNav-next"]]
[[>]]
**Следующая итерация ▷**
[[/>]]
[[/div]]
[[div class="listPagesNav-prev"]]
**◁ Назад**
[[/div]]
[[/div]]
Исчезающий градиент
[[div class="fade-away"]]
[[/div]]
Конец страницы
[[div class="footing"]]
[[/div]]
Блок с связанными статьями
[[div class="related-flex"]]
[[div class="related"]]
**__См. также:__**
* **[[[ссылка-на-страницу|Пользовательский текст]]]**
[[/div]]
[[/div]]
Навигация по циклу
« Предыдущая статья | Текущая статья | Следующая статья »
[[div class="series-nav"]]
« Предыдущая статья | [[size 120%]]Текущая статья[[/size]] | Следующая статья »
[[/div]]
ЗАГОЛОВОК / ПРЕДУПРЕЖДЕНИЕ
ПОДЗАГОЛОВОК / ТОЛЬКО ЛИЧНО СОТРУДНИКАМ ПОДРАЗДЕЛЕНИЯ / ТИП ДОКУМЕНТА
Данный файл требует уровня допуска Уровень-X/XXXX.
Неавторизованный доступ запрещён.
НОМЕР ОБЪЕКТА / НАЗВАНИЕ ПРОЕКТА
Исходный код
----
[[div class="orderwrapper"]]
[[div class="council"]]
[[/div]]
[[div class="ordertitle"]]
+* ЗАГОЛОВОК / ПРЕДУПРЕЖДЕНИЕ
[[/div]]
[[div class="orderdescription"]]
_
+* ПОДЗАГОЛОВОК / ТОЛЬКО ЛИЧНО СОТРУДНИКАМ ПОДРАЗДЕЛЕНИЯ / ТИП ДОКУМЕНТА
Данный файл требует уровня допуска Уровень-X/XXXX.
Неавторизованный доступ запрещён.
[[/div]]
[[div class="itemno"]]
+* НОМЕР ОБЪЕКТА / НАЗВАНИЕ ПРОЕКТА
[[/div]]
[[/div]]
----
Что это?
Это тема, созданная Lt Flops. Она является эстетическим улучшением Sigma-10, на которой основана.
Используйте данную тему, только если понимаете, что вы делаете.
Данная тема несовместима с Black Highlighter, BASALT или Sigma+.
Эта тема была создана с учётом следующих компонентов…
Для использования этого компонента, вставьте код ниже после подключения Flopstyle. Если ваша статья использует тему на базе Sigma-9 помимо Flopstyle, вставьте этот код после подключения второй темы:
[[include component:centered-header-sigma-9]]
Вы можете по своему желанию изменить заголовок, подзаголовок, их цвета и логотип в хедэре. Просто вставьте этот код после include с компонентом заголовка, а затем отредактируйте соответствующим образом:
[[module CSS]]
:root {
--header-title: "ЗАГОЛОВОК";
--header-subtitle: "ПОДЗАГОЛОВОК";
--titleColor: цвет_заголовка;
--subtitleColor: цвет_подзаголовка;
--lgurl: url(АДРЕС_ЛОГОТИПА);
}
[[/module]]
[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
Sidebox'ы
Адаптированы из темы Penumbra за авторством EstrellaYoshte.
Sidebox'ы - встроенные компоненты, которые бывают двух типов:
- authorbox
- sidebox
Инструкции по использованию зависят от типа.
- authorbox не отображается на экранах с шириной меньше width=1200px, включая мобильные устройства. Его можно использовать для отображения информации о статье и авторе.
- sidebox сворачивается за границу страницы на экранах с шириной меньше width=1200px. На таких экранах он доступен при нажатии на него или наведении курсора. Его можно использовать для отображения дополнительной информации.
Учтите эти ограничения перед тем как добавлять эти компоненты в свою статью — большая часть аудитории SCP вики просматривает сайт с мобильных устройств.
1. Authorbox
(См. верхний левый угол страницы)
Решением АМС authorbox отключён в русскоязычном филиале.
2. Sidebox
sidebox по умолчанию выключен. Создать его можно следующим образом:
[[div class="limit"]] Устанавливает начало якоря.
[[div class="anchor"]] Устанавливает позицию sidebox'а.
[[div class="sidebox"]]
Тут пишется желаемый текст для sidebox.
[[/div]]
[[/div]]
А тут уже текст, рядом с которым должен висеть sidebox.
[[/div]] Устанавливает конец якоря.
Я рекомендую вручную ставить перенос строки после текста, рядом с которым висит sidebox. Это можно сделать, добавив [[lines 1]] на пустой строке. sidebox появится возле этого текста, когда вы прокрутите мимо него.
С определённой хитростью вполне возможно
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non molestie nulla. Morbi vitae massa auctor, porta arcu eget, dictum tellus. Etiam scelerisque aliquam ipsum, ac convallis lorem scelerisque eget.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In finibus purus non commodo porttitor. Integer sed felis dui. Nulla nec tincidunt velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
создать несколько блоков sidebox
Vivamus sapien sem, gravida non vulputate eu, vestibulum vel lacus. Nulla massa erat, sodales dignissim vehicula non, fringilla id ante. Morbi eleifend lacus non nisl finibus aliquam. Proin tristique, lacus eu varius porttitor, lorem justo ullamcorper massa, sed ultricies elit dolor vitae nisi. Fusce varius nec sapien malesuada luctus. Pellentesque efficitur porttitor turpis sit amet rhoncus.
Sed non sollicitudin nisl. Suspendisse finibus, est et venenatis placerat, diam lorem porttitor elit, ac sollicitudin arcu erat et orci. Curabitur erat mi, congue quis imperdiet ut, fringilla vitae sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis nec ante pretium est commodo convallis id a sapien. Morbi sit amet ultricies urna.
которые будут работать так.
Ut semper, tellus vel tristique convallis, nulla mi laoreet nisi, eu malesuada ipsum magna sed dolor. Pellentesque nec lorem eu ante tristique efficitur. Sed auctor tortor ipsum. Morbi laoreet interdum scelerisque. Vivamus id enim nisl. Donec vitae leo suscipit, venenatis tortor eget, laoreet diam.
Sed sollicitudin, arcu ut condimentum vulputate, dui diam convallis velit, vitae ultricies leo libero non metus. Vestibulum at aliquam nisi. Aenean molestie tortor orci, ac volutpat magna eleifend vitae. Morbi tristique risus tortor, feugiat efficitur augue imperdiet ut. Aliquam nec urna lacinia, pretium ligula ut, gravida ex.
Помните про div limit. Без limit, anchor заставит sidebox висеть на протяжении всей статьи, после того как вы прокрутите мимо точки начала якоря.
Прочие изменяемые секции
При надобности вы можете также изменить любые из этих свойств CSS, чтобы они лучше подходили под ваши нужды. Этот список не покрывает все стили Flopstyle, однако он является хорошей отправной точкой.
Изменить свойства компонента Info
.info-container {
/* = Изменяйте цвет в соответствии с темой сайта = */
--barColour: цвет_полосы;
}
#u-author_block {
display: none;
}
Изменить цвет подзаголовка lite-heading
.lite-heading h3 {
/* = Изменяйте цвет в соответствии с темой сайта = */
color: цвет_lite_heading;
}
Изменить цвет левого края card-block и sidebox
:root {
--accentColor: акцентный_цвет;
}
Изменить логотип простого блока-предупреждения
(Изображение должно быть прозрачным)
.warning-notice {
background-image: url(АДРЕС_ЛОГОТИПА);
background-size: 400px;
}
Изменить логотип продвинутого блока-предупреждения
(Изображение должно быть прозрачным)
.council {
background-image: url(АДРЕС_ЛОГОТИПА);
}
Изменить фон навигации по циклу
.series-nav {
background:
linear-gradient(
to bottom right,
hsla(0, 0%, 100%, 1),
ЦВЕТ_СЮДА);
}
Скрыть заголовок страницы
#page-title {
display: none;
}
Скрыть футер со сносками
.footnotes-footer {
display: none;
}