Примеры
Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
Первый заголовок
Второй заголовок
Третий заголовок
Четвёртый заголовок
Пятой заголовок
Шестой заголовок
Как подключить
Для включения этой темы на вашей странице, добавьте этот код в любое место статьи:
[[include theme:wanderers-depths]]
Представьте что здесь Lorem Ipsum
.
А вот некоторые ссылки:
Это цитата, её можно создать поставив "> " в начале строки.
Больше текста
Это горизонтальная линия.
Вложенная цитата.
И ещё одна
[[div class="paper"]]
[[/div]]
Это цитата, её можно создать поставив "> " в начале строки.
Больше текста
Это горизонтальная линия.
Вложенная цитата.
Это | Таблица |
---|
Ты уже должен знать | как это |
сделать |
Шрифт тела статьи - Lato.
Шрифт хедера - Azimov Edge Italic, потому что Trade Winds не поддерживает кириллицу.
Шрифт названия и заголовков - Azimov Edge Italic, потому что Trade Winds не поддерживает кириллицу.
Моноширный шрифт - PT Mono.
/* Wanderer's Depths Theme */
/* 2020 Wikidot Theme */
/* By ROUNDERHOUSE, based off Dustjacket by Woedenaz and Croquembouche */
/* Logo by Bard Bard, using art from SunnyClockwork, licensed under CC BY SA 3.0 */
/* Header background CC BA SA 3.0, edited by ROUNDERHOUSE. */
/* Fonts */
@import url('https://fonts.googleapis.com/css?family=Trade+Winds&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');
@font-face {
font-family: "Azimov Edge Italic";
src: url("https://scpfoundation.net/local--files/theme:wanderers-depths/AsimovEdgeIt.otf") format('opentype');
}
/* All Vars Used */
:root {
/* S-CSS-P Integration */
/* If you're making a new CSS theme, please include the following three variables at minimum. */
--theme-base: "nuscp";
/* must be either "nuscp" or "sigma9" */
--theme-id: "WanderersDepths";
/* set this to the URL of your theme's page - eg for "component:ar-theme", set it to "ar-theme" */
--theme-name: "Wanderer's Depths";
/* set this to your theme's full name */
/* Header */
--logo-image: url("https://scpfoundation.net/local--files/theme:wanderers-depths/anchor.png");
/* Logo image made by Bard Bard using elements from SunnyClockwork, all licensed under CC BY SA 3.0 */
--header-title: "ГЛУБИНЫ СТРАННИКА";
/* Typefaces */
--header-font: "Azimov Edge Italic", 'Trade Winds', cursive;
--title-font: "Azimov Edge Italic", 'Trade Winds', cursive;
--mono-font: "PT Mono", "Andale Mono", "Courier New", Courier, monospace;
/* Standard Colors */
--white-monochrome: 252, 252, 252;
/* white */
--pale-gray-monochrome: 244, 244, 244;
/* v light gray for blockquotes and stuff */
--light-gray-monochrome: 170, 170, 170;
/* light accent gray for login status */
--gray-monochrome: 66, 66, 72;
/* gray */
--dark-gray-monochrome: 48, 48, 52;
/* dark accent gray for sidebar background */
--black-monochrome: 12, 12, 12;
/* black */
--bright-accent: 255, 219, 90;
/* bright yellow */
--bright-two: 31, 101, 193;
/* bright blue */
--medium-accent: 12, 64, 122;
/* blue */
--dark-accent: 0, 63, 96;
/* dark blue */
--newpage-color: 221, 102, 17;
/* pale orange */
/* Primary Theme Colors */
--swatch-background: var(--white-monochrome);
--swatch-primary: var(--medium-accent);
--swatch-primary-darker: var(--bright-accent);
--swatch-primary-darkest: var(--bright-two);
/* Primary Text Colors */
--swatch-text-dark: var(--black-monochrome);
--swatch-text-light: var(--white-monochrome);
--swatch-important-text: var(--bright-accent);
/* Primary Header Colors */
--swatch-headerh1-color: var(--white-monochrome);
--swatch-headerh2-color: var(--white-monochrome);
--swatch-topmenu-border-color: var(--bright-accent);
--swatch-topmenu-bg-color: var(--medium-accent);
--rating-module-button-color: var(--bright-accent);
--rating-module-text-color: var(--bright-accent);
/* Interwiki */
--head: var(--medium-accent);
--link: var(--bright-two);
}
#content-wrap {
background-image: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperbodybg.jpg);
}
div#extra-div-1 {
background-image: url(https://scpfoundation.net/local--files/theme:wanderers-depths/waterbg.png);
background-size: contain;
background-repeat: repeat-x;
}
#top-bar {
--dropdown-links-hover-color: var(--white-monochrome);
}
#top-bar div.top-bar > ul > li > a {
padding: 0.2em 1em;
}
#top-bar div.top-bar > ul > li > ul {
background: rgba(var(--dark-gray-monochrome), 1);
}
#top-bar div.top-bar > ul > li > ul > a {
color: rgb(var(--medium-accent));
}
#side-bar {
--sidebar-links-hover-text-color: var(--white-monochrome);
}
#side-bar:target {
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg)!important;
}
div#page-options-bottom > a,
div#page-options-bottom-2 > a {
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
border: 0.15rem solid rgba(var(--dark-accent), 1);
color: rgba(var(--dark-accent), 1);
}
div#page-options-bottom > a:hover,
div#page-options-bottom > a:active,
div#page-options-bottom-2 > a:hover,
div#page-options-bottom-2 > a:active {
background-color: rgba(var(--swatch-menubg-light-color), 0,25);
color: rgba(var(--bright-two), 1);
border: 0.15rem solid rgba(var(--bright-two), 1);
}
#page-title {
border-bottom: 1px dashed rgb(var(--swatch-menubg-medium-dark-color,66,66,72));
}
.page-rate-widget-box {
background: linear-gradient(to top, rgba(var(--dark-accent), 1) 0, rgba(var(--medium-accent), .75) 100%);
}
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
border: 1px solid rgb(var(--bright-accent));
}
#search-top-box:not(:focus-within)::before {
color: rgb(var(--bright-accent));
}
.blockquote, blockquote {
border: 3px ridge rgb(var(--dark-accent));
background: rgba(var(--medium-accent),0.05);
}
#main-content hr {
background-image: none;
background-color: rgba(var(--medium-accent))!important;
}
.footnotes-footer .title {
font-family: var(--title-font);
}
.footnotes-footer {
box-sizing: border-box;
display: block;
position: relative;
width: 95%;
height: auto;
margin: 1.5rem 1.5rem .5rem;
padding: .15em 1em 1em 0;
background-color: rgb(var(--pale-gray-monochrome));
box-shadow: inset .5em 0 0 0 rgba(var(--footnotes-footer-colorbar-color));
color: rgb(var(--footnotes-footer-text-color));
}
.footnotes-footer {
border: 3px ridge rgb(var(--dark-accent));
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
}
#toc {
border: 3px ridge rgb(var(--medium-accent));
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
}
#toc .title {
color: rgb(var(--bright-two));
}
.collection > .collapsible-block {
background-color: rgb(var(--white-monochrome));
border: 3px solid rgb(var(--dark-accent));
}
.collection .collapsible-block-unfolded-link {
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
border: 2px solid rgb(var(--white-monochrome));
}
.collection .collapsible-block-folded {
background: url(https://scpfoundaiton.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
border: 2px solid rgb(var(--white-monochrome));
}
.authorname {
color: rgb(var(--dark-accent));
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
border: 2px solid rgb(var(--white-monochrome));
}
.titlecolumn {
border: 2px solid rgb(var(--white-monochrome));
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
}
.articlecolumn {
background-color: rgb(var(--white-monochrome));
}
.paper {
font-family: 'Caveat', cursive;
font-style: bold;
font-size: 1.4rem;
background: url("https://scpfoundation.net/local--files/theme:wanderers-depths/paper.jpg") repeat 0px 8px;
/*Licensed under CC, produced by https://www.deviantart.com/jojo-ojoj*/
border: 3px ridge rgb(var(--dark-accent));
border-radius: 5px;
padding: 10px 10px;
margin: auto;
}
.page p,
.page ul {
line-height: 1.2em;
margin: 0;
}
.wl-translations {
background-color: none;
background: url(https://scpfoundation.net/local--files/theme:wanderers-depths/paperdivbg.jpg);
}
.wl-translations a {
color: rgb(var(--bright-two));
}
.wl-image-block .wl-image-caption {
background-color: rgb(var(--medium-accent));
}
a {
color: rgb(var(--bright-two));
}
a:visited {
color: rgb(var(--dark-accent));
}
a:hover {
color: rgba(var(--bright-two), .6);
}
/* mobile */
@media only screen and (max-width: 768px) {
#search-top-box form[id="search-top-box-form"]:not(:focus-within) input[type="text"] {
background-color: rgb(var(--medium-accent));
border-bottom: none;
border-right: none;
}
div#extra-div-1 {
background-size: cover;
}
div#extrac-div-1 {
background-image: url(https://scpfoundation.net/local--files/theme:wanderers-depths/waterbg.png);
background-size: var(--header-height-on-mobile);
background-repeat: no-repeat;
z-index: 3;
}
div#page-options-bottom {
width: 90%;
}
}

Логотип Станции Странника.
Примеры
Горизонтальная линия может быть создана при помощи 5 дефисов "-----" и проходит через всю страницу, если он не находится внутри чего-либо (например, цитат). Линии, разделяющие разделы этой страницы, представляют собой горизонтальные линии.
Заголовки можно создать, поставив от одного до шести плюс "+" в начале строки.
Первый заголовок
Второй заголовок
Третий заголовок
Четвёртый заголовок
Пятой заголовок
Шестой заголовок
Смотри, здесь больше текста.
Ещё больше.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Это длинная вкладка. Она содержит много текста.
Терминал #001
------
Добро пожаловать, Пользователь
------
Ссылкам в терминале добавляется префикс ">" при наведении.
вот так
Спасибо, что посмотрели на этот формат!
Это цитата, её можно создать поставив "> " в начале строки.
Больше текста
Это горизонтальная линия.
Вложенная цитата.
Это | Таблица |
---|
Ты уже должен знать | как это |
сделать |
Шрифт тела статьи - Lato.
Шрифт хедера - Xolonium Bold, потому что Audiowide не поддерживает кириллицу.
Шрифт названия и заголовков - Gugi.
Моноширный шрифт - PT Mono.
На любой странице с Sigma-9:
[[include theme:foxtrot]]
Что это?
Foxtrot - эстетическая тема, основанная на Sigma-9. Её цель — имитировать визуальный стиль крупного предстоящего обновления Basalt — совмещая современный "плоский" дизайн с удобством ранних тем Sigma-9.
Её можно рассматривать как промежуточную тему для тех, кто хочет воспользоваться новым внешним видом Basalt до его обновления.
Тема Foxtrot основана на множестве уже существующих тем, в частности Blankstyle и Penumbra. В неё встроены и светлый, и тёмный вариант, причём статьи можно легко переключать между ними.
1 Варианты
1.1 On Guard 43
[[include theme:foxtrot canada=a]]
1.2 S&C Plastics
[[include theme:foxtrot slothspit=a]]
1.3 From 120's Archives
[[include theme:foxtrot poland=a]]
1.4 Vanguard
[[include theme:foxtrot vanguard=a]]
1.5 Threshold
[[include theme:foxtrot threshold=a]]
1.6 Overwatch
[[include theme:foxtrot overwatch=a]]
1.7 Shark Punching Center
[[include theme:foxtrot spc=a]]
1.8 The Fishing Council
[[include theme:foxtrot fishing=a]]
1.9 NIGHTFALL
[[include theme:foxtrot nightfall=a]]
1.10 War On All Fronts
[[include theme:foxtrot hybrasil=a]]
1.11 Global Occult Coalition
[[include theme:foxtrot goc=a]]
1.12 Halloween
[[include theme:foxtrot spooky=a]]
1.13 Тёмный режим
Для использования тёмного варианта темы, добавьте параметр dark=a
. Несколько параметров можно передать, разделив их |
. Например, вот так:
[[include theme:foxtrot dark=a|threshold=a]]
2 Настройки
2.1 Переменные
Далее представлены переменные CSS, которые можно использовать для управления аспектами данной темы.
Basics
--header-title
— Основной текст хедера страницы.- Значение по умолчанию:
"SCP Foundation"
--header-subtitle
— Подтекст хедера страницы.- Значение по умолчанию:
"ОБЕЗОПАСИТЬ, УДЕРЖАТЬ, СОХРАНИТЬ"
--logo-img
— Изображение, отображаемое в хедере.- Значение по умолчанию:
url(https://files.scpfoundation.net/local--files/theme:foxtrot/fxtrt-scp_logo_lightmode.svg)
- Значение по умолчанию (тёмный вариант):
url(https://files.scpfoundation.net/local--files/theme:foxtrot/fxtrt-scp_logo_darkmode.svg)
--logo-opacity
— Прозрачность изображения, отображаемого в хедере.- Значение по умолчанию:
14%
- Значение по умолчанию (тёмный вариант):
30%
Цвета
--accent
— Акцентный цвет темы. (RGB)- Значение по умолчанию:
59, 59, 59
- Значение по умолчанию (тёмный вариант):
153, 187, 255
--header-txt-color
— Цвет основного текста в хедере.- Значение по умолчанию:
#333333
- Значение по умолчанию (тёмный вариант):
rgb(var(--accent))
--misc-txt-color
— Цвет всего остального текста в и рядом с хедером.- Значение по умолчанию:
#464646
- Значение по умолчанию (тёмный вариант):
var(--dark-txt-color)
--link-txt-color
— Цвет текста и фона ссылок.- Значение по умолчанию:
#E6283C
- Значение по умолчанию (тёмный вариант):
rgb(var(--accent))
--darkmode-gradient-top
— Цвет, с которого начинается градиент фона страницы в тёмном варианте.- Значение по умолчанию (тёмный вариант):
var(--dark-bg-1)
--darkmode-gradient-bottom
— Цвет, которым заканчивается градиент фона страницы в тёмном варианте.- Значение по умолчанию (тёмный вариант):
var(--dark-bg-2)
--dark-bg-1
— Первый из двух цветов фона для элементов в тёмном варианте.- Значение по умолчанию (тёмный вариант):
#21252E
--dark-bg-2
— Второй из двух цветов фона для элементов в тёмном варианте.- Значение по умолчанию (тёмный вариант):
#2F333C
--dark-txt-color
— Базовый цвет текста в тёмном варианте.- Значение по умолчанию (тёмный вариант):
#EDEDED
Шрифты
--head-font
— Шрифт для текста в хедере и заголовков страницы.- Значение по умолчанию:
Lexend
--page-font
— Шрифт для основного содержимого статьи.- Значение по умолчанию:
verdana
--ui-font
— Шрифт для элементов, не относящихся к содержимому статьи.- Значение по умолчанию:
Sofia Sans
--mono-font
— Шрифт блока с исходным кодом страницы.- Значение по умолчанию:
JetBrains Mono
--base-font-size
— Размер шрифта для элементов, не относящихся к содержимому статьи.- Значение по умолчанию:
0.9rem
--page-font-size
— Размер шрифта для содержимого статьи.- Значение по умолчанию:
1rem
3 Элементы
3.1 Блоки
Блоки, которые включены в тему или изменены ею.
[[div class="blockquote"]]
3.2 Окрашивание
Многие элементы можно окрасить, обернув их в блок с классом tableX
.
table1
соответствует зелёному,
table2
соответствует синему,
table3
соответствует жёлтому,
table4
соответствует оранжевому,
table5
соответствует красному,
и table6
соответствует пурпурному.
Эта система спроектирована так, чтобы перекликаться с цветами Системы классификации аномалий, где каждый цвет означает свой уровень допуска.
Обычная таблица |
---|
Тут текст |
Тут текст |
Тут текст |
Таблица с классом table2 |
---|
Тут текст |
Тут текст |
Тут текст |
Таблица с классом table5 |
---|
Тут текст |
Тут текст |
Тут текст |
3.3 Дополнительно
Несколько дополнительных советов.
- Оформление спойлеров, которое сильно изменено в этой теме, может быть сброшено до изначального, если их обернуть в блок с классом
default-col
.
- Почти любому элементу можно придать скруглённые края, если поместить его в блок с классом
round
.
- Параметр
hidetitle=a
скрывает заголовок страницы.
- Параметр
wide=a
расширяет ширину страницы, однако это может помешать каким-либо блокам со смещением (поддержка таких блоков встроена в эту тему).
- Параметр
verdana=a
переключает шрифт тела статьи на Verdana.