Оформление авторских статей: Настраиваемые блоки

Оформление авторских статей: Оглавление » Оформление авторских статей: Настраиваемые блоки

Далее представлены шаблоны, полезные при оформлении и добавлении настраиваемых блоков в Вашей статье.

Если Вы хотите получить больше подробностей, примеров употребления, а также информацию о расширенном функционале сайта, пройдите на страницу-оглавление для разделов инструкции по оформлению.

Вы также всегда можете открыть исходный код практически любой страницы на сайте (в том числе этой), чтобы увидеть, как те или иные функции были применены автором статьи.

Свернуть

Содержание

Теория вёрстки гипертекстового документа

Блоки [[span]] и [[p]] или [[paragraph]]

Примеры оформления с использованием [[span]]

Цензура в документе

Спрятанный в цензуре текст

Блоки [[div]] и [[table]]

Уведомление АПАИБ

УВЕДОМЛЕНИЕ АПАИБ

Цитирование и интервью

Журнал испытаний

Заключение Совета О5

Транскрипция на терминале

Предупреждение от административной службы

ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ОТНОСИТСЯ К X/XXXX УРОВНЮ СЕКРЕТНОСТИ

ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА X/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.

Шаблон "переписки" SCiPNET

Пользовательские -u ID

:hover и иные селекторы

Теория вёрстки гипертекстового документа

Все страницы в интернет-браузерах представлены в виде документов с расширением .html, в том числе даже когда они конвертируются с какого-то иного языка вёрстки, вроде XML, JavaScript, PHP и так далее.

Основные понятия:

HTML — "HyperText Markup Language", "язык гипертекстовой разметки".
CSS — "Cascading Style Sheets", "вложенные таблицы стилей"

По большей части, данное руководство предлагает Вам экспериментировать с настраиваемыми блоками, так как правил CSS огромное количество, а функционал HTML на сайте весьма ограничен. Далее будут наиболее распространённые примеры употребления блоков [[div]], в то время как для [[span]] были выбраны лишь несколько специфических функций.

HTML-вёрстку лучше всего демонстрирует следующий пример:


[[div class="blockquote"]]
[[HTML]]
<br>
<p>Так выглядит текст в HTML-вёрстке.<p>
<p>Мало того, его ещё и сложно редактировать, так как каждый чих требует открывающего / закрывающего тега.</p>

Это на самом деле не так, но в то же время это даёт лучшее управление над каждым отдельным абзацем на странице, особенно, когда Вы пишете интерактивную историю, литRPG и так далее.

<p><b>Сам по себе HTML - примитивный</b>, <em>простой</em>, с лишь <u>небольшим</u> количеством опций для оформления.</p>
<br>
[[/html]]
[[/div]]

Представьте каждую страницу в интернете, как основу дома, с голыми стенами, в отсутствии мебели, удобств, простых коммуникаций, вроде труб отопления, водопровода и электрической проводки. Для того, чтобы превратить дом в удобный для жизни, нам потребуется использовать CSS-свойства, независимо от того, как мы создаём наш документ.

Мы можем прописать свойства в отдельном файле формата .css, или прямо в теге, вроде <span> или <div>, используя свойство style="". В дальнейшем, в статье об оформлении интерактивного контента мы узнаем также о том, как для тега [[HTML]] использовать тег <style> и вносить CSS в документ через тег <script>.

Для того, чтобы распространить свойства CSS на весь документ или на всю статью, нам потребуется использовать тег [[module CSS]], внутри которого нам нужно прописывать правила оформления, которые будут применяться или к классам, или к идентификационным номерам. Классы отличаются тем, что, обычно, применяются для оформления повторяющихся элементов, а номера - для уникальных.

Например, если Вы откроете в своём браузере "Средства разработки", обычно, с помощью кнопки F12, то Вы увидите появившееся в браузере окно, в котором будет вкладка "Элементы". В структуре, начинающейся со строки "<!DOCTIPE html>", Вы можете увидеть тег <body id="html-body">. Если же Вы начнёте раскрывать с помощью значков "►" эти строки, Вы сможете увидеть, например, в <div id="side-bar"> блоки <div class="side-block">, которые отвечают за оформление разделов бокового меню слева на страницах сайта.

При этом, в "Средствах разработки" Вы можете, выбрав строку, увидеть в меню слева во вкладке "Элементы" присуждённые этой строке свойства CSS. Вы можете изменять их, и тут же увидите результат Вашей деятельности на странице. Тем не менее, Ваши действия не сохраняются и будут возвращены к дефолту после перезагрузки страницы. Вы всё равно можете экспериментировать с известными Вам свойствами CSS для того, чтобы впоследствии переписать их в правила в [[module CSS]].

Правила с идентификационными номерами начинаются как #правила{свойства:переменные; …}. Классы выглядят как .правила{свойства:переменные; …}.

Для комплексных правил, когда Вы хотите взаимодействовать с несколькими блоками правил, Вы можете использовать "селекторы", вроде "+" или ">", как, например, .правила1 > #правила2{свойства:переменные; …}. Это сделает так, что на странице все классы .правила1, в которых содержится #правила2, будут применять для этих #правила2 прописанные свойства, но .правила1 без #правила2 внутри или сами по себе #правила2 данным свойствам следовать не будут.

Названия правил не стоит писать через пробел. Это приведёт к тому, что Вы перечисляете название правил, которые должны разделять одни и те же свойства. То есть, .правила1 правила2{свойства:переменные; …} заставит браузер искать написанный Вами .правила1 и перечисленный среди уникальных имён блоков браузера блок под названием "правила 2", и применять к ним одни и те же свойства. Это можно использовать для того, чтобы перечислить общие для правил свойства, и потом прописывать меньший по размерам код для индивидуальных блоков.

Уникальными именами, зарезервированными для браузеров, являются всякие "a", "em", "u", "span", "div", "input", "label", "body", "head", "html" и так далее. Не стоит использовать в качестве названий такие имена, если только Вы не пропишете их как, скажем, "a1", "spanOne", "divX". Иначе a{свойства:переменные; …} будет применяться ко всем <a> на странице, а это — совершенно все ссылки, которые здесь есть. В том числе ссылки для редактирования страницы, (<a id="edit-button" class="btn btn-default" href="#">Редактировать</a>), так что, если Вы напортачите, все ссылки на странице могут или исчезнуть, или стать нечитабельными и недоступными.

В случае, если Вы испортили страницу и не можете её редактировать, Вы можете отключить написанные Вами свойства в "Средствах разработки", после чего отредактировать страницу и сохранить внесённые в текст изменения.

Блоки [[span]] и [[p]] или [[paragraph]]

Блок [[span]] выполняет роль настраиваемого блока посреди текста. Он отличается от остальных способов форматирования, вроде курсива или подчёркивания тем, что может быть настроен и при редактировании HTML-вёрстки выглядит как <span>-блок.

Жирный текст является <b>-тегом, курсив - <em>-тегом, подчёркивание - <u>-тегом, а [[span]] может быть всем сразу и даже более того. К тегу [[span]] применимо свойство style="", которое позволяет прописывать в нём любые правила CSS, что также возможно для блоков [[div]] и [[p]].

Тег [[p]] по функционалу соответствует тегу <p>. Он используется для создания параграфов и уже в него может быть включен тег <span>, а сам <p> включён в <div>.

Пример:

[[div style="background: orange;"]]
[[p style="background: yellow"]]**Особые условия содержания:** [[[SCP-ES-013]]] не представляет опасности, поэтому может храниться в стандартном контейнере, промаркированном согласно актуальным правилам Фонда. Контейнер должен быть изготовлен из изоляционного материала для содержания объекта в подходящих условиях: температура внутри него не должна опускаться ниже 5°С или подниматься выше 40°С. [[span style="background: lightgreen"]]В связи с основным эффектом SCP-ES-013, рекомендуется ограничить доступ к нему минимально необходимым количеством сотрудников[[/span]].[[/p]]
[[p style="background: yellow"]]**Описание:** SCP-ES-013 на первый взгляд представляет собой ручку с синими чернилами популярной марки ███. [[span style="background: lightgreen"]]Объект имеет форму шестиугольной призмы, также в комплекте с ним идут конический колпачок и круглая пробка, все элементы находятся в превосходном состоянии.[[/span]] Размеры объекта составляют 148 мм в высоту x 8 мм в ширину x 8 мм в длину. Ничего во внешнем виде объекта не указывает на то, что он не был произведён на заводе ███; неизвестно, существуют ли аналогичные ему предметы, также отсутствуют какие-либо данные о том, что производитель был осведомлён о его свойствах.[[/p]]
[[/div]]

Результат:

Особые условия содержания: SCP-ES-013 не представляет опасности, поэтому может храниться в стандартном контейнере, промаркированном согласно актуальным правилам Фонда. Контейнер должен быть изготовлен из изоляционного материала для содержания объекта в подходящих условиях: температура внутри него не должна опускаться ниже 5°С или подниматься выше 40°С. В связи с основным эффектом SCP-ES-013, рекомендуется ограничить доступ к нему минимально необходимым количеством сотрудников.
Описание: SCP-ES-013 на первый взгляд представляет собой ручку с синими чернилами популярной марки ███. Объект имеет форму шестиугольной призмы, также в комплекте с ним идут конический колпачок и круглая пробка, все элементы находятся в превосходном состоянии. Размеры объекта составляют 148 мм в высоту x 8 мм в ширину x 8 мм в длину. Ничего во внешнем виде объекта не указывает на то, что он не был произведён на заводе ███; неизвестно, существуют ли аналогичные ему предметы, также отсутствуют какие-либо данные о том, что производитель был осведомлён о его свойствах.

[[p]] лучше всего подходит для "второго" уровня оформления: первым будет весь [[div]], третьим будет каждое отдельное предложение или [[span]]. Используя [[p]], как описывалось ранее, возможно получить полный контроль в оформлении каждого абзаца.

Например, Вы можете использовать [[module CSS]] для того, чтобы не прописывать класс у [[span]] при каждом его вызове в [[p]].

Пример:

[[module CSS]]
.pCensoredSpans > span {
background: #333;
}
[[/module]]
[[p class="pCensoredSpans"]]**Особые условия содержания:** SCP-863-1 должен [[span]]содержаться в камере размерами 2х2 метра[[/span]] и [[span]]снабжаться питанием согласно пищевой карте 863-1-1[[/span]]. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности [[span]]SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены[[/span]].[[/p]]

Результат:

Особые условия содержания: SCP-863-1 должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте 863-1-1. В связи с низким риском нарушения условий содержания SCP-863-1 разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-863-1 должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Блоки [[span]] могут использоваться внутри тега [[a]], чтобы оформлять отдельные части ссылки:

Код

[[a href="" style="background: #901; color: white;"]]Это пустая ссылка, но [[span style="font-weight: bold; background: darkgoldenrod; color: black;"]] она демонстрирует вам то, [[/span]]как можно оформить текст внутри ссылок[[/a]], не используя при этом [[[ссылки такого синтаксиса]]].

Результат

Это пустая ссылка, но она демонстрирует вам то, как можно оформить текст внутри ссылок, не используя при этом [[[ссылки такого синтаксиса]]].

В отличии от обычного HTML, тегам, кроме [[a]], нельзя присвоить атрибут "href", кроме тега [[image]]. Это значит, что Вы не можете сделать ссылкой на другую страницу отдельные абзацы, [[span]] или [[div]].

Примеры оформления с использованием [[span]]

Цензура в документе

При оформлении статьи участники часто делают замечание о соответствии цензуры стандартам оформления. Со включенным NumPad Вы можете зажать клавишу "Alt", после чего ввести на боковой клавиатуре 2-1-9, и символ "█" появится в тексте на месте курсора.

Очевидно, что символы цензуры не должны выглядеть как SCP-^███, SCP-▄▄▄, SCP-▀▀▀, SCP-░░░, SCP-▒▒▒, SCP-▓▓▓ и SCP-▮▮▮. Как минимум, потому что стандарт уже давно был установлен.

При этом, возможно заметить небольшие пробелы белого цвета между символами "█", особенно в длинной череде символов "████████████████". Альтернативным решением является использования [[span]] тегов, которые используют фон для того, чтобы "спрятать" текст.

Код

**Особые условия содержания:** SCP-[[span style="background: #333"]]███[[/span]]-█ должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте [[span style="background: #333"]]███[[/span]]-█-█. В связи с низким риском нарушения условий содержания SCP-[[span style="background: #333"]]███[[/span]]-█ разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-███-█ должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Результат

Особые условия содержания: SCP-███-█ должен содержаться в камере размерами 2х2 метра и снабжаться питанием согласно пищевой карте ███-█-█. В связи с низким риском нарушения условий содержания SCP-███-█ разрешено оставлять под охраной одного (1) сотрудника службы безопасности. В случае потери конечности SCP-███-█ должна быть предоставлена аналогичная конечность приблизительно одинакового по размерам краба для замены.

Зачастую, это того не стоит. Данное решение не влияет на восприятие текста или на "красоту" статьи, тратит Ваше время и вызывает фрустрацию, если Вы видите, что пропустили где-то закрывающий или открывающий тег. Особенно в статьях с большим количеством цензуры.

Спрятанный в цензуре текст

Текст возможно "спрятать" в поле цензуры. Пример далее:

Код

**Особые условия содержания:** SCP-███-█ должен содержаться в [[span style="background: #333"]]камере размерами 2х2 метра[[/span]] и снабжаться [[span style="background: #333"]]питанием согласно пищевой карте ███[[/span]]-█-█. В связи с низким риском [[span style="background: #333"]]нарушения условий содержания[[/span]] SCP-███-█ разрешено оставлять под охраной [[span style="background: #333"]]одного (1) сотрудника[[/span]] службы безопасности. В случае потери конечности SCP-███-█ должна быть [[span style="background: #333"]]предоставлена аналогичная конечность приблизительно одинакового по размерам[[/span]] краба для замены.

Результат

При выделении текста, как при копировании, Вы увидите скрытый текст. Если же Вы используете следующий код, то сможете полностью спрятать текст, пока его кто-то не скопирует или не откроет в Исходнике страницы.

Код

[[module CSS]]
.spanCensored {
background: #333;
}
.spanCensored::selection {
background: #334;
/* color: #000; */
}
[[/module]]

**Особые условия содержания:** SCP-███-█ должен содержаться в [[span class="spanCensored"]]камере размерами 2х2 метра[[/span]] и снабжаться [[span class="spanCensored"]]питанием согласно пищевой карте ███[[/span]]-█-█. В связи с низким риском [[span class="spanCensored"]]нарушения условий содержания[[/span]] SCP-███-█ разрешено оставлять под охраной [[span class="spanCensored"]]одного (1) сотрудника[[/span]] службы безопасности. В случае потери конечности SCP-███-█ должна быть [[span class="spanCensored"]]предоставлена аналогичная конечность приблизительно одинакового по размерам[[/span]] краба для замены.

Результат

Проблема становится очевидной после выделения всего абзаца — обычная цензура резко выделяется по сравнению с поддельной. Данный трюк является непрактичным и весьма примитивным, время- и трудозатратным, если только Вы не делаете статью, специально прячущую какую-то информацию от читателя, навроде SCP-4000, который переправляет читателя на [ИСКЛЮЧЕНО СОГЛАСНО ПРОТОКОЛУ 4000-ЭШУ́].

Блоки [[div]] и [[table]]

Далее перечислены примеры употребления блочных конструкций, наиболее часто встречающиеся в англоязычных статьях.

Уведомление АПАИБ

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
++++ УВЕДОМЛЕНИЕ АПАИБ

Здесь описать уведомление.

-- Мария Джонс, директор АПАИБ
[[/=]]
[[/div]]

УВЕДОМЛЕНИЕ АПАИБ

Здесь описать уведомление.

— Мария Джонс, директор АПАИБ

Цитирование и интервью

[[quote]]
**Опрашиваемый:** [Опрашиваемые субъект, субъекты или SCP]

**Опрашивающий:** [Опрашивающий, может быть зацензурен с помощью "█"]

**Предисловие:** [Небольшой абзац, описывающий интервью]

**<Начало записи, [необязательное указание даты-времени]>**

**Опрашивающий:** [речь]

**Субъект:** [речь]

[Повторять по мере необходимости]

**<Окончание записи, [необязательное указание даты-времени]>**

**Заключение:** [Заключение и описание последующих событий]
[[/quote]]

Опрашиваемый: [Опрашиваемые субъект, субъекты или SCP]
Опрашивающий: [Опрашивающий, может быть зацензурен с помощью "█"]
Предисловие: [Небольшой абзац, описывающий интервью]
<Начало записи, [необязательное указание даты-времени]>
Опрашивающий: [речь]
Субъект: [речь]
[Повторять по мере необходимости]
<Окончание записи, [необязательное указание даты-времени]>
Заключение: [Заключение и описание последующих событий]

Журнал испытаний

[[table  style="border-collapse:collapse; max-width: 600px;"]]
[[row]]
[[cell style="font-weight:bold;padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver; width: 20%;"]]
ЗАГОЛОВОК И ПРОЧЕЕ
[[/cell]]
[[cell style="font-weight:bold; padding: .3em .7em; text-align: center; border: 1px solid black; background-color: silver;"]]
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Субъект
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
ИНФОРМАЦИЯ
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; padding: .3em .7em; border: 1px solid black"]]
Протокол
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
ИНФОРМАЦИЯ
[[/cell]]
[[/row]]
[[row]]
[[cell style="text-align: center; border: 1px solid black"]]
Результаты
[[/cell]]
[[cell style="border: 1px solid black; padding: .3em .7em;"]]
ИНФОРМАЦИЯ
[[/cell]]
[[/row]]
[[/table]]

ЗАГОЛОВОК И ПРОЧЕЕ
Субъект	ИНФОРМАЦИЯ
Протокол	ИНФОРМАЦИЯ
Результаты	ИНФОРМАЦИЯ

Заключение Совета О5

= ИТОГИ ГОЛОСОВАНИЯ СОВЕТА:
||~ ЗА ||~ ПРОТИВ ||~ ВОЗДЕРЖАЛИСЬ ||
|| O5-1 ||  ||  ||
|| O5-2 ||  ||  ||
|| O5-3 ||  ||  ||
|| O5-4 ||  ||  ||
|| O5-5 ||  ||  ||
||  || О5-6 ||  ||
|| O5-7 ||  ||  ||
|| O5-8 ||  ||  ||
||  || О5-9 ||  ||
||  || О5-10 ||  ||
|| O5-11 ||  ||  ||
|| O5-12 ||  ||  ||
|| O5-13 ||  ||  ||
||||||~ИТОГ ||
|||||| [10] голосов "ЗА", [3] голоса "ПРОТИВ"||
||||||~СТАТУС ||
|||||| ##057800|**ОДОБРЕНО / ПРИНЯТО**## ||

ИТОГИ ГОЛОСОВАНИЯ СОВЕТА:

ЗА	ПРОТИВ	ВОЗДЕРЖАЛИСЬ
O5-1
O5-2
O5-3
O5-4
O5-5
	О5-6
O5-7
O5-8
	О5-9
	О5-10
O5-11
O5-12
O5-13
ИТОГ
[10] голосов "ЗА", [3] голоса "ПРОТИВ"
СТАТУС
ОДОБРЕНО / ПРИНЯТО

Транскрипция на терминале

[[module CSS]]

div.terminal{
    border: 1px solid black;
    border: solid 3px #BBBBBB;
    border-radius: 16px;
    background-color: #131;
    /* чёрная тень наверху терминала */
    background-image:
        radial-gradient(ellipse 1000% 100% at 50% 90%, transparent, #121);
    background-position: center;
    display: block;
    /* тень вокруг терминала */
    box-shadow: inset 0 0 10em 1em rgba(0,0,0,0.5);
    /* не даёт линии "скана" создавать полосу прокрутки */
    overflow:hidden;
}
div.terminal blockquote {
    background-color: black;
    border: double 3px #80FF80
}
div.scanline{
    margin-top: -40%;
    width: 100%;
    height: 60px;
    position: relative;
    pointer-events: none;
    /* поддержка Safari 4.0 - 8.0 */
    -webkit-animation: scan 12s linear 0s infinite; /* Может потребоваться изменение. Если слишком быстро — ставьте "5s". */
    animation: scan 12s linear 0s infinite; /* То же, как и в предыдущей строке. */
    background: linear-gradient(to bottom, rgba(56, 112, 82,0), rgba(56, 112, 82,0.1)) !important;
}

div.text{
    color: rgba(128,255,128,0.8);
    padding-left: 2em;
    padding-top: 40%;
    font-family: monospace;
    font-size: 1.2em;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* В зависимости от размера терминала может потребоваться это поменять. Если линия "скана" останавливается на полпути, то увеличьте номер в "to{}".*/
}

@keyframes scan{
    from{ transform: translateY(-10%);}
    to{  transform: translateY(5000%);} /* То же, что и в предыдущей анимации.*/
}

div.text a {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a.newpage {
    color: #90EE90;
    text-decoration: none;
    background: transparent;
}
div.text a:hover {
    color: #131;
    text-decoration: underline;
    background-color: #80FF80;
    padding: 1px;
}
div.text a:hover::before{
    content: "> ";
}
[[/module]]

[[div class="terminal"]]
[[div class="scanline"]]
[[/div]]
[[div class="text"]]
[[=]]
[[size 150%]] __Терминал #001__[[/size]]
@@ @@
@@ @@
@@------@@
Добро пожаловать, User
@@------@@
[[/=]]
@@ @@
@@ @@
@@ @@
> Все ссылки внутри терминала приобретают символ ">" перед ними, когда на них наводят курсором.
> [https://www.google.com Вроде такого].
@@ @@
@@ @@
[[/div]]
[[/div]]

Терминал #001

------
Добро пожаловать, User
------

Все ссылки внутри терминала приобретают символ ">" перед ними, когда на них наводят курсором.
Вроде такого.

Предупреждение от административной службы

[[=]]
[[div style="background: url(https://files.scpfoundation.net/local--files/draft:article-design-customizable-blocks/scp_trans.png) center no-repeat; float: center; border: solid 2px #000; padding: 1px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
+ ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ПРИЧИСЛЕН К УРОВНЮ #/XXXX СЕКРЕТНОСТИ
----
+++ ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА 4/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.
[[/div]]
[[/=]]

ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ОТНОСИТСЯ К X/XXXX УРОВНЮ СЕКРЕТНОСТИ

ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА X/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.

[[div style="background: url(https://files.scpfoundation.net/local--files/draft:article-design-customizable-blocks/scp_trans.png) center center no-repeat; background-size: 40%; text-align: center; width: 600px; margin: 0 auto; font-size: 20px; padding: 0px;"]]

@@ @@
@@ @@

@@ @@

@@ @@

[[=]]
++* ##black|ПО РАСПОРЯЖЕНИЮ СОВЕТА СМОТРИТЕЛЕЙ##
##black|Следующий файл относится к X/XXXX уровню секретности. Неавторизированный доступ запрещён.##
[[/=]]
= **##black|XXXX##**

@@ @@

@@ @@

[[/div]]

ПО РАСПОРЯЖЕНИЮ СОВЕТА СМОТРИТЕЛЕЙ

Следующий файл относится к X/XXXX уровню секретности. Неавторизированный доступ запрещён.

XXXX

Шаблон "переписки" SCiPNET

[[module CSS]]
.email-example .collapsible-block-folded a.collapsible-block-link {
    animation: blink 0.8s ease-in-out infinite alternate;
}
@keyframes blink {
    0% { color: transparent; }
    50%, 100% { color: #b01; }
}
.email {border: solid 2px #000000; width: 88%; padding: 1px 15px; margin: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.5)}
.email-example a.collapsible-block-link {font-weight: bold;}
.tofrom {margin-left: 10px; margin-top: 5px; padding: 1px 15px; border-left: solid 3px maroon}
[[/module]]

[[div class="email-example"]]
[[=]]
------
[[collapsible show="Подключиться к Почте SCiPNET? У Вас (1) новое сообщение!" hide="Re:ТЕМА"]]
[[<]]
[[div class="email"]]
[[div class="tofrom"]]
**Кому:** ПОЛУЧАТЕЛЬ
**От кого:** ОТПРАВИТЕЛЬ
**Тема:** ТЕМА
[[/div]]
------
текст
[[/div]]
@@ @@
[[div class="email"]]
[[div class="tofrom"]]
**Кому:** ПОЛУЧАТЕЛЬ
**От кого:** ОТПРАВИТЕЛЬ
**Тема:** ТЕМА
[[/div]]
------
текст
[[/div]]
[[/<]]
[[/collapsible]]
[[/=]]
[[/div]]

Подключиться к Почте SCiPNET? У Вас (1) новое сообщение!

Пользовательские -u ID

:hover и иные селекторы

версия страницы: 28, Последняя правка: 12 Фев. 2024, 11:21 (95 дней назад)

SCP Foundation

Russian Branch

Теги | Поиск по тегам

Теория вёрстки гипертекстового документа

Блоки [[span]] и [[p]] или [[paragraph]]

Примеры оформления с использованием [[span]]

Цензура в документе

Спрятанный в цензуре текст

Блоки [[div]] и [[table]]

Уведомление АПАИБ

УВЕДОМЛЕНИЕ АПАИБ

Цитирование и интервью

Журнал испытаний

Заключение Совета О5

Транскрипция на терминале

Предупреждение от административной службы

ВНИМАНИЕ: СЛЕДУЮЩИЙ ФАЙЛ ОТНОСИТСЯ К X/XXXX УРОВНЮ СЕКРЕТНОСТИ

ЛЮБАЯ ПОПЫТКА ДОСТУПА К ЭТОМУ ФАЙЛУ БЕЗ УРОВНЯ ДОПУСКА X/XXXX БУДЕТ ЗАФИКСИРОВАНА И ПРИВЕДЁТ К НЕМЕДЛЕННОМУ ДИСЦИПЛИНАРНОМУ ВЗЫСКАНИЮ.

ПО РАСПОРЯЖЕНИЮ СОВЕТА СМОТРИТЕЛЕЙ

Шаблон "переписки" SCiPNET

Пользовательские -u ID

:hover и иные селекторы