| Flopstyle: DARK |
|---|
Это рабочий пример sidebox. |
 |
|---|
Это flavorbox
Обратитесь к подсекции Sidebox'ы за подробностями.
Хаб визуальных тем » Тема Flopstyle: DARK
Рейтинг
Что это?
Это тема, созданная Lt Flops. Она предназначена для широкого применения в любой статье, где желательна тёмная тема.
Используйте данную тему, только если понимаете, что вы делаете.
Данная тема несовместима с Black Highlighter, BASALT и Sigma+.
Как использовать
Основы
Пожалуйста, ознакомьтесь с этим введением прежде чем добавлять Flopstyle: DARK в свою статью.
ШАГ 1. ПОДКЛЮЧИТЕ ТЕМУ Скопируйте этот код и вставьте его в начало своей статьи:
[[include theme:flopstyle-dark]]
ШАГ 2. УСТАНОВИТЕ ЗАГОЛОВОК СТРАНИЦЫ Скопируйте этот код и вставьте его в начало текста своей статьи:
[[div class="meta-title"]]
Сюда заголовок
[[/div]]
В целях улучшения доступности, это необходимо обязательно делать на любой странице, использующей Flopstyle: DARK.
ШАГ 3. СОЗДАЙТЕ НАВИГАЦИОННУЮ ЦЕПОЧКУ Скопируйте код ниже и вставьте его прямо под предыдущим блоком с заголовком статьи:
[[div class="pseudocrumbs"]]
[[[parent-page-url1|Заголовок первой страницы-родителя]]] » Заголовок дочерней страницы
[[[parent-page-url2|Заголовок второй страницы-родителя]]] » Заголовок дочерней страницы
[[/div]]
‼️ Если вы создаёте статью с использованием ListPages, не беспокойтесь — вы всё ещё можете устанавливать родителя своим фрагментам как обычно, но делать это обычным способом. В данном случае функциональность важнее внешнего вида.
Пример работы шагов 3 и 4.
А теперь... Если от Flopstyle: DARK вам нужна только базовая эстетика, можете взять код выше и свалить. Но если продолжите чтение, я покажу вам насколько глубока эта кроличья нора.
Flopstyle: DARK разрабатывался с учётом следующих компонентов...
1. Встроенные компоненты
Эта тема содержит 6 компонентов:
1.1. Анимация плашки ACS за авторством EstrellaYoshte
1.2. Альтернативные сноски (BetterFootnotes) за авторством EstrellaYoshte
1.3. Набор визуальных элементов Croqstyle CSS за авторством Croquembouche
1.4. Проявление страницы (с параметром speed=1) за авторством Croquembouche
1.5. Переписка в стиле мессенджера за авторством JaonHax
1.6. Скрываемый сайдбар для Sigma-9 за авторством EstrellaYoshte
2. Переменные темы
(Меняйте их только если понимаете, что делаете)
Любые переменные должны находиться в модуле CSS — [[module CSS]]. Все перечисленные переменные необходимо помещать в селектор :root.
2.1. ЦВЕТА Вы можете менять большинство цветов темы по своему вкусу. Просто скопируйте нужные вам переменные из блока ниже и измените их значение:
[[module CSS]]
:root{
/* -- ЦВЕТА -- */
--accentColor: акцентный_цвет;
--accentColorLite: светлый_акцентный_цвет;
--hue: тон;
/* Значения по умолчанию (не копировать!):
* accentColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* accentColorLite:
Soft Tyrian pink hsla(325, 80%, 70%, .5).
* hue: 325deg.
**/
Наиболее используемая переменная — accentColor. Обычно пользователи данной темы меняют лишь эту переменную.
Когда вы меняете значение accentColor, вы также должны изменить две другие переменные:
2.1. (A) accentColorLite: У этого цвета светлота должна быть выше, а значение альфа-канала ниже, чем у accentColor. Я рекомендую светлоту как минимум на 10% больше чем у accentColor, а значение альфа-канала 0.5
2.1. (B) hue: Это значение должно соответствовать тону вашего accentColor.
Для выбора цвета я рекомендую использовать HSL Color Picker. HSL — удобная цветовая модель, которая расшифровывается как Hue (тон), Saturation (насыщенность), Lightness (светлота). Она также может быть расширена до HSLA, которая также включает Alpha-значение (прозрачность).
Чтобы убедиться, что выбранный вами accentColor отвечает Руководству по доступности веб-контента (WCAG), проверьте его коэффициент контрастности. Просто вставьте
#2F333C в поле "Background" и выбранный вами accentColor в шестнадцатеричном формате в поле "Text color". Для читабельности текста, согласно WCAG, коэффициент должен быть 3 или выше.
2.2. ЛОГОТИП И ШРИФТЫ Вы можете поменять логотип, шрифты и т.д.:
/* -- ЛОГОТИП -- */
--lgurl: url(URL_ИЗОБРАЖЕНИЯ);
/* -- ШРИФТЫ -- */
--header-font: "вашШрифт", sans-serif;
--body-font: "вашШрифт", sans-serif;
/* Значения по умолчанию (не копировать!):
* header-font: Montserrat, sans-serif
* body-font: Inter, sans-serif
**/
2.3. ЗАГОЛОВКИ В ХЕДЭРЕ Вы можете изменить заголовок, подзаголовок и их цвета:
/* -- ЗАГОЛОВКИ -- */
--header-title: "ЗАГОЛОВОК";
--header-subtitle: "ПОДЗАГОЛОВОК";
--titleColor: цвет_заголовка;
--subtitleColor: цвет_подзаголовка;
/* Значения по умолчанию (не копировать!):
* titleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
* subtitleColor:
Bright Tyrian pink hsl(325, 80%, 60%).
**/
}
[[/module]]
3. Плашка Lt Flops
Flopstyle: DARK предоставляет тёмный вариант плашки Lt Flops:
[[include component:flops-header
|item=
|containment=
|level=
|security=
|disruption=
|disruption-bg-color=
]]
Пример плашки Lt Flops в действии.
4. Sidebox'ы
Sidebox'ы - встроенные компоненты, которые бывают двух типов:
- Type-A
authorboxиsidebox - Type-B
sidecontainer
Инструкции по использованию зависят от типа.
authorboxиsideboxне отображаются на экранах с ширинойwidth=1280pxи меньше, включая мобильные устройства. Их можно использовать для отображения информации о странице и авторе.sidecontainerсворачивается за границу страницы на экранах с ширинойwidth=1280pxи меньше. На таких экранах он доступен при нажатии на него или наведении курсора. Его можно использовать для отображения дополнительной информации.
Учтите эти ограничения перед тем как добавлять эти компоненты в свою статью — большая часть аудитории SCP вики просматривает сайт с мобильных устройств.
Тип A Authorbox и Sidebox
(См. верхний левый и правый край страницы)
Адаптированы из темы Penumbra за авторством EstrellaYoshte
Решением АМС authorbox отключён в русскоязычном филиале.
АЛЬТЕРНАТИВА 1 Для создания sidebox, скопируйте код ниже и вставьте его в модуль CSS в начале своей страницы:
[[div class="anchor"]]Устанавливает позицию sidebox.
[[div class="sidebox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] Автор: [[/span]] %%created_by_linked%% ||
||~ Опубликовано %%created_at|%d %b %Y%% ||
[[/module]]
[[div class="flavorbox"]]Создаём flavorbox для sidebox.
Здесь текст flavorbox'а.
[[/div]]
[[/div]]
[[/div]]Устанавливает конец якоря.
Если вы планируете добавлять sidecontainer'ы на свою страницу, я настоятельно рекомендую использовать authorbox, а не sidebox, по той причине, что когда sidebox используется вместе с sidecontainer, происходит визуальное наложение элементов, что будет выглядеть очень некрасиво. Это может запутать читателей, так что лучше оставить всё на безопасной стороне.
Вы можете настроить sidebox для отображения той же информации, что и authorbox. Или, как я сделал на этой странице, — вы можете добавить остроумный слоган и иконку.
Как и к любой другой таблице, вы можете применить уникальный оттенок — например, текущий зелёный, создаваемый с помощью table1. За подробностями обратитесь к спойлеру Форматирование таблиц в секции Примеры форматирования (ОБЩИЕ).
Тип B Sidecontainer
(См. ниже)
Предоставлено Woedenaz
sidecontainer по умолчанию выключен. Создать его можно следующим образом:
[[div class="limit"]]Устанавливает начало якоря.
[[div class="anchor"]]Устанавливает позицию sidecontainer'а.
[[div class="sidecontainer"]]
Тут пишется желаемый текст для sidecontainer.
[[/div]]
[[/div]]
Текст, рядом с которым должен висеть sidecontainer.
[[/div]]Устанавливает конец якоря.
Я рекомендую вручную ставить перенос строки после текста, рядом с которым висит sidecontainer. Это можно сделать, добавив sidecontainer появится возле этого текста, когда вы прокрутите мимо него.
ПОМНИТЕ — Без div limit, anchor заставит sidecontainer висеть на протяжении всей статьи, после того как вы прокрутите мимо точки начала якоря..
5. Прочие изменяемые аспекты
При надобности вы можете изменить любые из этих свойств CSS под свою страницу.
Изменить прозрачность логотипа
#extra-div-1{
filter: opacity(процент);
}
Значение прозрачности по умолчанию = 33%
6. Вариации темы
Если вы передадите атрибуты в блок include с темой, вы можете применить заранее созданный вариант темы на свою страницу.
Шрифт ХЕДЭРА Montserrat.
Шрифт ТЕЛА статьи Inter.
МОНОШИРНЫЙ шрифт Fira Code.
РУКОПИСНЫЙ шрифт Comic Neue.
Вернуться к началу
Рейтинг:
Пример форматирования
#/media/File:Section_break_01_by_Pengo.jpg){kind=link}
Что это?
Это тема, созданная Lt Flops. Она является эстетическим улучшением Sigma-101, на которой основана.
Используйте данную тему, только если понимаете, что вы делаете.
Данная тема несовместима с Black Highlighter, BASALT или Sigma+.
Как использовать
Для подключения этой темы, пожалуйста, скопируйте данный синтаксис и вставьте его в самое начало своей статьи:
[[include theme:flopstyle]]
Если вы хотите использовать эту тему с другой темой, основанной на Sigma-9 или Sigma-10, сначала вставьте Flopstyle, а потом уже выбранную вами тему. Также может потребоваться тонкая настройка визуальной темы.
Прошу также учесть, что данная тема включает в себя следующие компоненты:
- Набор визуальных элементов Croqstyle CSS за авторством Croquembouche
- Проявление страницы (с параметром speed=1) за авторством Croquembouche
- Скрываемый сайдбар для Sigma-9 за авторством EstrellaYoshte
Эта тема была создана с учётом следующих компонентов...
Центрированный заголовок Sigma-9
Для использования этого компонента, вставьте код ниже после подключения Flopstyle. Если ваша статья использует тему на базе Sigma-9 помимо Flopstyle, вставьте этот код после подключения второй темы:
[[include component:centered-header-sigma-9]]
Вы можете по своему желанию изменить заголовок, подзаголовок, их цвета и логотип в хедэре. Просто вставьте этот код после include с компонентом заголовка, а затем отредактируйте соответствующим образом:
[[module CSS]]
:root {
--header-title: "ЗАГОЛОВОК";
--header-subtitle: "ПОДЗАГОЛОВОК";
--titleColor: цвет_заголовка;
--subtitleColor: цвет_подзаголовка;
--lgurl: url(АДРЕС_ЛОГОТИПА);
}
[[/module]]
Плашка Flops
[[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 появится возле этого текста, когда вы прокрутите мимо него.
Помните про 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;
}