Random Theme
alt_logo_tyrian.png

.

Flopstyle: DARK

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

alt_logo_tyrian.png

Рейтинг

рейтинг: 4.2
6/83%


Что это?


Это тема, созданная Lt Flops 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, не беспокойтесь — вы всё ещё можете устанавливать родителя своим фрагментам как обычно, но делать это обычным способом. В данном случае функциональность важнее внешнего вида.

uKmDCe1.png

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

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




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




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


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

1.1. Анимация плашки ACS за авторством EstrellaYoshte EstrellaYoshte
1.2. Альтернативные сноски (BetterFootnotes) за авторством EstrellaYoshte EstrellaYoshte
1.3. Набор визуальных элементов Croqstyle CSS за авторством Croquembouche Croquembouche
1.4. Проявление страницы (с параметром speed=1) за авторством Croquembouche Croquembouche
1.5. Переписка в стиле мессенджера за авторством JaonHax JaonHax
1.6. Скрываемый сайдбар для Sigma-9 за авторством EstrellaYoshte 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 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 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.


🡹

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

рейтинг: 3.5
1/100%

Usage

To import this theme to your page, put the following anywhere inside it:

[[include theme:creepypasta]]

The standard CSS @import method won't work. This is intentional (thanks to Пользователь 'stormbreath' не существует for providing the CSS code!). Importing the theme using [[include]] adds your page to a list of Backlinks. This is useful for seeing what pages would be affected when this theme is updated, and allows any errors caused by that to be noticed and corrected much faster.

You can view any page's Backlinks by clicking "+ Options" at the bottom of the page, then "Backlinks".


Examples

rook.png

Parawatch Logo.

A horizontal rule can be created with 5 hyphens "-----" and extends across the whole page if it's not placed inside anything (eg a blockquote). The lines separating sections of this document are horizontal rules.

Titles can be created by putting between one and six plus "+" at the start of the line

This is a tab view.

This is a blockquote, created by putting "> " at the start of each line.

More text


That's a horizontal rule

Nested blockquotes

This is atable
You should knowhow to make these
already
рейтинг: 0.0
1/0%
black-highlighter-logo.svg

This is a theme for the REDTAPE // ALLCAPS timeline of articles by ROUNDERHOUSE. Please inquire if you'd like to use the theme and contribute!


redtapeexample.png

REDTAPE


Theme Colors

Ship Gray--gray-monochrome#424248
Firebrick--bright-accent#c02727
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}

Persian Plum--medium-accent#711515
Dryblood--dark-accent#460d0d
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

redtapethemethumbnail.png

REDTAPE thumbnail.

Note:

This is a Black Highlighter based theme. You will need to import the Black Highlighter theme as well in order to use this theme. To learn more go here.

On any wiki:

[[include theme:black-highlighter-theme]]
[[include theme:redtape
|dark=--] <- This is an optional argument if you would like to use the dark mode version of the theme. If you omit this, it will default to light mode.
|years=XX <- This sets the minutes to midnight in the subheader and the clock. For all articles that subscribe to the REDTAPE timeline, midnight is 2057.
]]

Examples

A horizontal rule can be created with 4 hyphens "----" and extends across the whole page if it's not placed inside anything (e.g. a blockquote). The lines separating sections of this document are horizontal rules.


Titles can be created by putting between one and six plus "+" at the start of the line

Just use your imagination and pretend there's Lorem Ipsum here.

  • Visited link
  • Unvisited link
  • Missing link

This is a blockquote, created by putting "> " at the start of each line, or use [[div class="blockquote"]].

More text


That's a horizontal rule

Nested blockquotes

And another1


This is atable
You should knowhow to make these
already

This article has a number of assorted divs you can use to make your article's formatting pop out. Here's a list:

» Addendum Header

ATTACHED TRANSCRIPT - JUNE 1983

[[div class="doc"]]
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

[[div class="addendum"]]
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum


» Header Angled

[[image imagename.png class="angled"]]

newtempest.png


» Foundation Divs

FOUNDATION NOTICE

[[div class="foundation"]]

FOUNDATION NOTICE 'SNOW'

[[div class="foundation snow"]]

NOTICE FROM THE FOUNDATION RECORDS, ARCHIVAL, AND INFORMATION SECURITY ADMINISTRATION

[[div class="foundation raisa"]]

FOUNDATION NOTICE 'GUERRE'

[[div class="foundation alt"]]


» GOC div

GLOBAL OCCULT COALITION FILE


[[div class="addendum goc"]]


GLOBAL OCCULT COALITION NOTICE


[[div class="addendum goc notice"]]



» Generic Color Divs

Generic FILESERV Notice


[[div class="generic red"]]

Generic FILESERV Notice


[[div class="generic blue"]]

Generic FILESERV Notice


[[div class="generic yellow"]]

Generic FILESERV Notice


[[div class="generic purple"]]


» Navbar

REDTAPE also has a baked-in sick-ass modular navbar. Check out some of its variants:


001s

Series Entry w/ hub link

First entry in a series

Most Recent entry in a series

RAISA

COMING SOON


The Header and Title font is Secular One.
The Body font is Telex.
The Monospace font used is PT Mono.


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