[[include draft:mitya-styles]]
Изменения в дизайне
- Изменён шрифт при редактировании текста. Теперь он моноширинный (JetBrains Mono).
- Изменены отступы у маркированных списков. Теперь на мобильных устройствах вложенные списки не создают слишком много пустого пространства.
- Добавлена куча блоков. У блоков есть два варианта кастомизации:
- Шкурки (может быть применена только одна из списка)
- Стили (может быть применено сколь угодно из списка если не сказано обратное)
Блоки текста
Стопка бумаг
[[div class="note"]] Lorem ipsum [[/div]]
Дополнительные классы:
- Шкурки
- older — состаривает бумагу
- modern — осветляет бумагу
- Стили
- handwritten — меняет шрифт на рукописный
Кастомизация:
--note-bg-color: var(--mit-note-bg-color); --note-border-color: var(--mit-note-border-color); --note-text-color: var(--mit-note-text-color, #333);
Стандартный
modern
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
older
handwritten
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
Более чёткое обозначение границ блока с помощью теней.
material-box
[[div class="material-box"]] Lorem ipsum [[/div]]
Взято из Magnus web format за авторством Magnus. Внесены небольшие корректировки в код, не более того.
Не кастомизируется и не имеет дополнительных стилей.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
olya-box
[[div class="olya-box"]] Lorem ipsum [[/div]]
Названные в честь автора статьи SCP-1376-RU - Словно Святая Хедвига, Хедвига на кресте,
Gattebara, она же Оленяшка, блоки вдохновляются теми, что были использованы для документов ГОК и ЦРБ в уже упомянутой статье.
Дополнительные классы:
- Шкурки (эмблемы за авторством EstrellaYoshte, Woedenaz и Kardalak)
- aiad — шкурка в стиле ОПИИ
- antimemetics / antimem — шкурка в стиле Отдела антимеметики
- council — шкурка в стиле Совета О5
- epistemics / epistem — шкурка в стиле Отдела эпистемических исследований (TBD)
- ethics — шкурка в стиле Комитета по этике
- infotech — шкурка в стиле Отдела информационных технологий
- memetics / mem — шкурка в стиле Отдела меметики (TBD)
- metaphysics / meta — шкурка в стиле Отдела метафизики
- miscommunications / miscdept — шкурка в стиле Отдела по недоразумениям
- ontokinetics / ontokinet — шкурка в стиле Отдела онтокинетики
- pataphysics / pata — шкурка в стиле Отдела патафизики
- quiet-current / qc — шкурка в стиле Отдела временной безошибочности
- raisa — шкурка в стиле АПАИБ
- semiospherics / semio — шкурка в стиле Отдела семиосферики
- surrealistics / surreal — шкурка в стиле Отдела сюрреалистики
- tactical-theology / tacttheo - шкурка в стиле Отдела тактической теологии (рескин Отдела онтокинетики)
- Стили
- smaller — немного сужает блок
Кастомизация:
--primary-color: var(--olya-primary-color); --bg-color: var(--olya-bg-color); --border-color: var(--olya-border-color); --underline-color: var(--primary-color);
Стандартный стиль
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Изображения на стопке бумаг
Пример надписи на картинке. Надписи довольно длинной и противной, на несколько строк.
Как использовать:
[[include component:image-block]]
Да, это буквально всё. Параметры не забудьте, ага. Альтернатива в лице rimg, limg и cimg намеренно оставлена нетронутой на случай, если вам потребуется создать какую-либо отличную конструкцию из изображений и подписей к ним.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.
Уведомления
[[div class="memo-general"]] Lorem ipsum [[/div]]
Дополнительные классы:
- Шкурки (эмблемы за авторством EstrellaYoshte, Woedenaz и Kardalak)
- aiad — шкурка в стиле ОПИИ
- antimemetics / antimem — шкурка в стиле Отдела антимеметики
- council — шкурка в стиле Совета О5
- epistemics / epistem — шкурка в стиле Отдела эпистемических исследований (TBD)
- ethics — шкурка в стиле Комитета по этике
- infotech — шкурка в стиле Отдела информационных технологий
- memetics / mem — шкурка в стиле Отдела меметики (TBD)
- metaphysics / meta — шкурка в стиле Отдела метафизики
- miscommunications / miscdept — шкурка в стиле Отдела по недоразумениям
- ontokinetics / ontokinet — шкурка в стиле Отдела онтокинетики
- pataphysics / pata — шкурка в стиле Отдела патафизики
- quiet-current / qc — шкурка в стиле Отдела временной безошибочности
- raisa — шкурка в стиле АПАИБ
- semiospherics / semio — шкурка в стиле Отдела семиосферики
- surrealistics / surreal — шкурка в стиле Отдела сюрреалистики
- tactical-theology / tacttheo - шкурка в стиле Отдела тактической теологии (рескин Отдела онтокинетики)
- Стили
- smaller — немного сужает блок
- padded — увеличивает внутренний отступ сверху и снизу
- clipped — добавляет клейкую ленту на блок. Занимает один селектор ::before
Кастомизация:
--memo-text-color: #333; --memo-border-color: #f2f2f2; --memo-bg-color: white; --memo-bg-image: url(https://files.scpfoundation.net/local--files/draft:mitya-styles/default.png);
Стандартное уведомление (без стилей)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin tortor purus platea sit eu id nisi litora libero. Neque vulputate consequat ac amet augue blandit maximus aliquet congue. Pharetra vestibulum posuere ornare faucibus fusce dictumst orci aenean eu facilisis ut volutpat commodo senectus purus himenaeos fames primis convallis nisi.
Phasellus fermentum malesuada phasellus netus dictum aenean placerat egestas amet. Ornare taciti semper dolor tristique morbi. Sem leo tincidunt aliquet semper eu lectus scelerisque quis. Sagittis vivamus mollis nisi mollis enim fermentum laoreet.
— Lorem ipsum
Спойлеры
Тут будут спойлеры trust
Длинный спойлер
Форк (kinda) широкого спойлера за авторством
ParussMan. Применяется только к одному спойлеру за раз, пускай можно применить и ко всем, обернув всю страницу в один
div
-элемент. Делать так, конечно, не стоит.
Исправляет кучу мелких багов которые мне мозолили глаза. А ещё замечательно смотрится на мобилках. А ещё кастомизация глубже, но это уже дело десятое.
[[div_ class="wcol-wrapper"]] [[collapsible]] Lorem ipsum [[/collapsible]] [[/div]]
Дополнительные классы:
- Шкурки
- auth — шкурка в стиле попытки аутентификации (смотрится лучше без стиля special)
- Стили
- smaller — немного сужает блок
- special - добавляет стрелки по бокам
- animated - добавляет анимацию свойству special
Кастомизация:
--header-bg-color-general: transparent; --header-text-color-general: #901; --header-bg-color-open: var(--header-bg-color-general); --header-bg-color-closed: var(--header-bg-color-general); --header-text-color-open: var(--header-text-color-general); --header-text-color-closed: var(--header-text-color-general); --body-bg-color: white; --body-border-color: #dcdcdc; --body-border-hover-color: #505052; --body-text-color: #333; --special-triangle-color: var(--header-text-color-closed); --special-bg-color: var(--special-triangle-color); --special-text-color: var(--body-bg-color); --special-triangle-color-open: var(--special-triangle-color); --special-triangle-color-closed: var(--special-triangle-color); --special-bg-color-open: var(--special-bg-color); --special-bg-color-closed: var(--special-bg-color); --special-text-color-open: var(--special-text-color); --special-text-color-closed: var(--special-text-color);