Добро пожаловать. Здесь вы найдёте плашки, вдохновлённые и выполненные в стиле интерфейса файлового менеджера Norton Commander. Плашки созданы для того, чтобы подходить по стилю визуальной теме Y2K, однако она также может использоваться и без неё, нужно лишь найти применение.

Пример простой горизонтальной плашки

Если навестись на блок, то стиль заголовка поменяется так, будто это окно выбрано в данный момент. Для использования плашки в статье вы должны добавить в начале вашей статьи «[[include draft:mitrotsky-norton-tablets]]», тем самым включив вашу статью все необходимые стили. Собирать плашку из блоков придётся вручную, пример кода представлен ниже.

Код плашки

[[div_ class="norton-wrapper-flexbox"]]
[[div_ class="norton-notification"]]
[[div_ class="norton-header"]] заголовок [[/div]]
[[div_ class="norton-body"]]
[[div_ class="norton-body-section"]]
Здесь текст первой секции. Он лежит внутри довольно плотно, поскольку не обёрнут в тег **@@[[p]]@@**.
[[/div]]
[[div_ class="norton-body-section"]][[p]]
Здесь текст второй секции. В этот раз он обёрнут в **@@[[p]]@@**, а потому выглядит более свободно.
[[/p]][[/div]]
[[div_ class="norton-body-section"]][[p]]
Третья секция.
Секций может быть сколь угодно много. Да, даже ни одной.
[[/p]][[/div]]
[[/div]][[/div]]
[[/div]]
@@@@

Да, солидное количество div'ов для одной коробочки. Красота требует жертв. В теории, можно избавиться от «norton-wrapper-flexbox» полностью, если в блоке «norton-notification» добавить «style="margin: auto;"», но это остаётся на ваше усмотрение. Если вы не планируете создавать многостраничный вид, то можете обойтись без обёртки.

О кастомизации

Заголовок — первое, что видит человек. В поле заголовка вы можете вписать любой сырой текст, и он автоматически преобразуется в центрированный жирный текст в верхнем регистре. Старайтесь не давать ему слишком длинное имя, поскольку текст в этом блоке не переносится на новые строки, подумайте о бедных пользователях мобильных устройств. Но даже несмотря на это, вы всё ещё можете уместить довольно длинные строчки. Рекомендуемая максимальная длина - 32 символа.

Секции ставятся по порядку для стилистического разделения текста. Несмотря на то, что текст обрабатывается корректно независимо от наличия или отсутствия блока секции, вместе с ним текст не выглядит как безумное нагромождение букв. А ещё они очень красивые.

Цвета плашки настраиваются вручную. Полный перечень настраиваемых цветов следующий:

.norton-notification {
    --norton-body-bg-color: #0AA;
    --norton-body-border-color: black;
    --norton-body-text-color: var(--norton-body-border-color);
    --norton-header-text-color: var(--norton-body-border-color);
    --norton-header-text-color-active: var(--norton-body-bg-color);
    --norton-header-bg-color: var(--norton-body-bg-color);
    --norton-header-bg-color-active: var(--norton-body-border-color);
}

Как вы видите, все переменные наследуются от первых двух. Потому, если вы хотите минимальную кастомизацию, вы можете изменить лишь первые две переменные, поменяв таким образом цвет всей плашки.

Чтобы изменить стиль всех плашек на странице, вставьте описанный выше код, предварительно обернув его в модуль [[module CSS]] с нужными вам значениями. Если вы хотите менять значения индивидуально для отдельного блока, то в таком случае в блоке «norton-notification» добавьте соответствующий стиль «style="переменная: значение; …"». В сравнении с пресетами, данные изменения имеют меньший приоритет.

Немного об обёртке

Выше уже был упомянут блок «norton-wrapper-flexbox», который является обёрточным. Для одной плашки он избыточен, однако он сам позволяет поместить две или больше плашек в одну плоскость, создавая такую себе многостраничность. Посмотрите сами:

На мобильных устройствах на строку помещается максимум 2 блока плашки, остальные будут переноситься на новую строку, на ПК же число разнится от браузера к браузеру, от экрана к экрану. Рекомендую не делать больше трёх блоков в обёртке. А также в секциях нет переноса строк, так что если вы используете слова длиной во весь экран, то и блок будет занимать весь экран. Данное поведение таковым задумано (не хочется повторять судьбу таблиц) и исправляться не будет.

Пресеты

Если вам самим лень придумать нужное сочетание цветов, то я спешу вам представить пресеты. Это уже готовые комбинации цветов, которые вы можете использовать в плашке. На данный момент есть 19 различных расцветок. Чтобы использовать пресеты в вашей плашке, добавьте к классу «norton-notification» любой из перечисленных классов ниже. В результате у вас должна получиться строчка, похожая на следующую: «[[div_ class="norton-notification norcol-grey"]]».

Пресеты при определении цвета имеет высший приоритет, т.е. они всегда будут перезаписывать ранее установленный вами цвет.

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

Алайменты

По умолчанию заголовок находится в центре плашки. Это не всегда является желанным результатом, а потому это тоже можно исправить с использованием алайментов. Алайменты добавляются также, как и пресеты, но на этот раз в класс «norton-header» соответственно. Пример использования: «[[div_ class="norton-header norali-center"]] Lorem ipsum [[/div]]».

А также положение заголовка можно менять в вертикальной оси. Он может находиться либо свеху, либо снизу. Да, данное свойство сочетается с алайментами выше, их можно использовать вместе. Экспериментируйте.

Колонки и ряды

По умолчанию секции таблички форматируются как ряды. Это можно изменить, добавив к «norton-body» класс «nordir-columns». «nordir-columns» — единственный параметр этой категории, а потому код с его использованием всегда выглядит так: «[[div_ class="norton-body nordir-columns"]]».

Блоки автоматически меняют свой размер в зависимости от текста, расположенного внутри. Совмещать таким способом колонки и ряды нельзя, потому что класс «norton-body» должен обеспечивать постоянство внутри себя. Сымитировать подобное возможно с помощью многостраничности.

Палитра используемых цветов