Random Theme

Тема Flopstyle: DARK
Переводчик: Dasha Dasha
Опубликовано 20:30 10.12.2023

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

Свернуть

Оглавление

I. Что это?
II. Как использовать
1. Встроенные компоненты
2. Переменные темы
3. Плашка Lt Flops
4. Sidebox'ы
5. Прочие изменяемые аспекты
6. Варианты темы
III. Примеры оформления (ОБЩИЕ)
IV. Примеры оформления (ПРОДВИНУТЫЕ)

alt_logo_tyrian.png

.

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

Это flavorbox

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

Flopstyle: DARK

Хаб визуальных тем » Тема Flopstyle: DARK

alt_logo_tyrian.png

Рейтинг

рейтинг: 4.0
4/75%


Что это?

Это тема, созданная Lt Flops. Она предназначена для широкого применения в любой статье, где желательна тёмная тема.

Используйте данную тему, только если понимаете, что вы делаете.

Данная тема несовместима с Black Highlighter, BASALT и Sigma+.

ИНФОРМАЦИЯ ОБ АВТОРАХ
» ЧТО НОВОГО (англ.) «


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

Основы

Пожалуйста, ознакомьтесь с этим введением прежде чем добавлять Flopstyle: DARK в свою статью.

ШАГ 1. ПОДКЛЮЧИТЕ ТЕМУ Скопируйте этот код и вставьте его в начало своей статьи:

[[include theme:flopstyle-dark]]

[ПО ЖЕЛАНИЮ] ШАГ 2. ДОБАВЬТЕ ПОДПИСЬ Скопируйте код ниже и вставьте его под блоком рейтинга:

[[module Rate]]

[[div class="byline"]]
[[span]] Автор: authorLink [[/span]](A)
[[span]] # [[/span]](B)
[[/div]]

2. (A) Замените authorLink на ник автора или ники соавторов с ссылкой/ссылками на их авторские страницы.

2. (B) Замените # на примерное время, необходимое для полного прочтения вашей статьи (в минутах). Для определения этого времени, вы можете скопировать текст статьи и вставить его в Read-o-Meter, а затем округлить до ближайшей минуты..ДИСКЛЕЙМЕР Read-o-Meter не записывает и не хранит ваши данные.

‼️ Убедитесь, что между элементами span нет пустых строк, иначе это не сработает!

hCGnFsp.png

Пример шага 2 в действии.

ШАГ 3. УСТАНОВИТЕ ЗАГОЛОВОК СТРАНИЦЫ Скопируйте этот код и вставьте его в начало текста своей статьи:

[[div class="meta-title"]]
Сюда заголовок
[[/div]]

В целях улучшения доступности, это необходимо обязательно делать на любой странице, использующей Flopstyle: DARK.

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

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

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

uKmDCe1.png

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

А теперь… Если от Flopstyle: DARK вам нужна только базовая эстетика, можете взять код выше и свалить. Но если продолжите чтение, я покажу вам насколько глубока эта кроличья нора.




Flopstyle: DARK разрабатывался с учётом следующих компонентов…




1. Встроенные компоненты

Эта тема содержит 6 компонентов:

1.1. Визуальный элемент для анимации плашки ACS за авторством EstrellaYoshte
1.2. BetterFootnotes за авторством EstrellaYoshte
1.3. Набор визуальных элементов Croqstyle CSS за авторством Croquembouche
1.4. Визуальный элемент Fade In (с параметром speed=1) за авторством Croquembouche
1.5. Text Style (By JaonHax) за авторством JaonHax
1.6. Визуальный элемент Toggle Sidebar за авторством 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=
]]

cGbnRpP.png

Пример плашки 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 включён на всех страницах, что используют Flopstyle: DARK. Если вы хотите убрать его, замените:

[[include theme:flopstyle-dark]]

На это:

[[div style="display: none;"]]
[[include theme:flopstyle-dark]]
[[/div]]

АЛЬТЕРНАТИВА 1 После удаления authorbox, вы можете заменить его собственной версией, которая будет отображать ту информацию, которую вы хотите. TЭтот функционал может быть особенно полезен для совместных, переписанных или переведённых статей. Для примера, вот код для создания authorbox:

[[div class="anchor"]]Устанавливает позицию authorbox'а.
[[div class="authorbox tableb"]]
[[module ListPages name="="]]
||~ %%title%% ||
||= [[span class="bt bb"]] Автор: [[/span]] %%created_by_linked%% ||
||~ Опубликовано %%created_at|%d %b %Y%% ||
[[/module]]

[[div class="flavorbox"]]Создаём flavorbox для authorbox.
Здесь текст flavorbox'а.
[[/div]]

[[/div]]
[[/div]]Устанавливает конец якоря.

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

Вы также можете отредактировать свой пользовательский authorbox чтобы в нём отображался специфический для вашей страницы текст. Например, заметка для читателей.

ПОМНИТЕ — Использование flavorbox не обязательно. Но это единственный div, который вы можете использовать внутри authorbox.

АЛЬТЕРНАТИВА 2 Если хотите, вы можете переместить authorbox на правую часть страницы, заменив его sidebox'ом. Для создания 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 с темой, вы можете применить заранее созданный вариант темы на свою страницу.


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


Примеры оформления (ОБЩИЕ)


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


Примеры оформления (ПРОДВИНУТЫЕ)


Показать плашку-предупреждение о содержимом
Показать новые блоки div
Показать особое форматирование


Исходный код

Ищите в исходнике страницы.


Шрифт ХЕДЭРА Montserrat.

Шрифт ТЕЛА статьи Inter.

МОНОШИРНЫЙ шрифт Fira Code.

РУКОПИСНЫЙ шрифт Comic Neue.


🡹

Вернуться к началу 

#header {
    background-image: url('/local--files/theme:sandbox-classic-theme/logo.png');
}

#header h1 a span, #header h2 span {
    display: none;
}

#header h1 a::before {
    content: 'SCP Sandbox';
    color: rgb(238, 238, 238);
    text-shadow: 3px 3px 5px #000;
}

#header h2::before {
    content: 'Осторожно! Идут испытания!';
    color: rgb(240, 240, 192);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .8);
}

рейтинг: 4.1
7/71%

basalt-theme-logo.svg


На любой странице:
[[include theme:basalt]]

Информация

Basalt - эстетическая тема для вики SCP за авторством Liryn и Placeholder McD, работающая как надстройка над Bedrock, основной темой, созданной специально для этого проекта. За подробностями, включая полный перечень переменных CSS, предоставляемых темой, посетите страницу Bedrock на вики или домашнюю страницу Basalt на GitHub.

Настройки темы

Добавьте параметры в тег [[include]], чтобы изменить аспекты Basalt.

[[include theme:basalt параметр1]]

[[include theme:basalt параметр1|параметр2]]

Список доступных на данный момент параметров:

  • darkmode=a Включает тёмную тему
  • wide=a Растягивает страницу вширь
  • hidetitle=a Скрывает название страницы
  • centertitle=a Центрирует название страницы
  • acs-itemnum=a Восстанавливает текст "Объект №:" в СКА
  • disable-acs-anim=a Отключает компонент анимации СКА

Элементы страницы


[[span class="st"]] [[span class="specialtext"]]

[[span class="bt"]] [[span class="bigtext"]]

[[div class="blockquote"]]

[[div class="notation"]]

[[div class="jotting"]]

[[div class="modal"]]

[[div class="smallmodal"]]

[[div class="papernote"]]

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. In ligula ipsum, posuere sit amet turpis in, cursus euismod tellus.

[[div class="floatbox"]]

Это плавающий блок. Сюда можно поместить что угодно (кроме BetterFootnotes, пока что). Эти блоки будут смещены к краю страницы, плавая относительно окружающего их содержимого.

Maecenas vestibulum nunc in euismod auctor. Donec ultrices tempor felis sit amet ornare. Nam nec lectus sit amet nisl bibendum condimentum. Morbi eu arcu quis mi pulvinar fringilla. Ut fringilla interdum urna, at porta sapien vulputate quis. Integer eu scelerisque urna. Morbi luctus, justo eget viverra feugiat, leo quam egestas velit, sit amet feugiat nisi nibh molestie metus. Phasellus ut blandit ex. Ut aliquam, nisl ut aliquam volutpat, sem lorem tempor mi, sit amet ultricies nunc ante eu libero. Aenean lacinia porta nisi, in finibus quam. Aliquam erat volutpat. Aliquam malesuada libero id dapibus efficitur. Cras bibendum, dolor sit amet sagittis scelerisque, lorem magna ornare purus, vel accumsan leo tortor sit amet dolor. Maecenas finibus ante eget purus ullamcorper, vel elementum purus auctor. Quisque sagittis, leo et pretium efficitur, orci nulla interdum enim, in dignissim enim quam in neque.

[[div class="floatbox right"]]

Curabitur sed dui nec libero fringilla placerat. Pellentesque imperdiet ac dolor et sagittis. Vestibulum rhoncus justo magna, vel ornare eros iaculis et. Praesent suscipit massa eu urna convallis molestie. Vestibulum molestie faucibus eleifend. Nullam ut felis ac sapien aliquet consequat a sit amet ipsum. Sed rutrum diam quis urna ullamcorper, sit amet tristique lacus faucibus. Cras facilisis consequat sem, et egestas elit blandit ut. Cras sagittis velit ut posuere semper. Vestibulum in ipsum orci.

[[div class="document"]]

[[div class="darkdocument"]]

[[div class="raisa_memo"]]

+ Больше плашек

basalt_scp_logo-for_lightmode.svg

Блок с картинкой.

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

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

Первый заголовок

Второй заголовок

Третий заголовок

Четвёртый заголовок

Пятый заголовок
Шестой заголовок

Это вкладки.

ЭтоТаблица
Ты уже должен знатькак это
сделать
Сноски

Окраска элементов

Некоторым элементам можно изменить цвет с помощью классов tableX.
Эта система разработана для использования вместе с Системой классификации аномалий; каждый цвет обозначает соответствующий уровень допуска.

.table1
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table1

.table2
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table2

.table3
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table3

.table4
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table4

.table5
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table5

.table6
Тут текст
Тут текст
Тут текст
basaltlogo.svg

.table6

Включено в Basalt

Шрифт хедера и интерфейса - Sofia Sans.
Шрифт тела статьи - Inter.
Моноширный шрифт - JetBrains Mono.

страница 1 из 30 1 2 3 ... 29 30 следующая »
Структурные: публичный_черновик
версия страницы: 3, Последняя правка: 23 Авг. 2023, 15:18 (586 дней назад)
Пока не указано иное, содержимое этой страницы распространяется по лицензии Creative Commons Attribution-ShareAlike 3.0 License.