Інформаційний модуль "попередження про контент"

СТОРІНКА ШАБЛОНУ

Це сторінка шаблону, який використовується у цієї Wiki.

Будь ласка, не редагуйте цю сторінку
без дозволу адміністрації сайту

---

Що це таке

Це купа різноманітних «покращень» CSS, які я, Croquembouche, використовую на купі сторінок, бо думаю, що це полегшує роботу з ними.

Зміни, які вносить цей компонент, — це купа справді тривіальних модифікацій, щоб полегшити досвід написання та полегшити документування компонентів (що я часто роблю). Це нічого не змінює на сторінці візуально для читача — але змінює для автора.

Я б не очікував, що переклади статей, які використовують цей компонент, також використовуватимуть цей компонент. Але якщо перекладачу це подобається, він може його використовувати.

Цей компонент, ймовірно, не конфліктуватиме з іншими компонентами чи темами, і навіть якщо конфліктуватиме, це, ймовірно, не матиме великого значення.

Використання

На інших вікі:

[[include :scp-ukrainian:component:croqstyle]]

Цей компонент призначений для використання з іншими компонентами. Під час використання в коді іншого компоненту будьте впевнені, що компонент додано всередину блока [[iftags]], щоб користувачі вашого компонента не були змушені також використовувати Croqstyle.

Пов'язані компоненти

Інші власні компоненти стилів (які теж змінюють багато речей):

• Компонент RSO — Rounderhouse

Особисті теми стилю (які є візуальними змінами):

• Magnus Web Format — DrMagnus
• Flopstyle CSS — Lt Flops
• Blankstyle CSS — HarryBlank
• Placestyle CSS — Placeholder McD
• Jakstyle — JakdragonX

Зміни CSS

Виноски розумного розміру

Виноски не мають ширини в мільйон миль, щоб ви могли їх прочитати.

.hovertip { max-width: 400px; }

Моноширинне поле редагування та код

Робить текстове поле редагування моноширинним, а також змінює весь моноширинний текст на шрифт Fira Code, явно кращий серед моноширинних шрифтів.

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');
 
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Фони телетайпу

Додає світло-сірий фон до елементів <tt> ({{text}}), тому фрагменти коду виділяються більше.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;
}

Геть занадто великі аватари

Запобігає появі великих зображень, коли ви наводите курсор на чиєсь зображення аватара. Це зроблено тому що вони дурні та дуже дратують, і ви можете просто натиснути на них, якщо хочете побачити велику версію.

.avatar-hover { display: none !important; }

Розриви та бавовна

Будь-який текст усередині div із класом nobreak може бути розірваний у будь-якому місці.

.nobreak { word-break: break-all; }

Кольори коду

Слід додати кольори для терміналу у якості змінних. Можливо, колись я зміню це на більш поширену тему терміналу, як-от Monokai або щось подібне, але поки що це лише моя особиста тема, яка походить від Tomorrow Night Eighties.

Також, додайте клас .terminal до фейкового кодового блоку таким чином: [[div class="code terminal"]]. Це надає вигляд, схожий на термінал, з темним фоном. Але це не працює з [[code]], тому що Wikidot вставляє купу підсвічувань синтаксису, яку ви не можете змінити самостійно без купи CSS. Використовуйте його лише для фрагментів коду, які не належать до [[code]].

Швидкий інструмент для розфарбовування «стандартного» прикладу використання цього компонента Wikidot за допомогою наведених вище змінних: посилання

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
}
 
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;
}

Режим налагодження

Намалюйте лінії навколо будь-чого всередині .debug-mode. Колір ліній червоний, але може бути зміненим за допомогою змінної CSS --debug-colour.

Ви також можете додати div.debug-info.over і div.debug-info.under всередину елемента, щоб анотувати вікна налагодження. Хоча вам потрібно переконатися, що залишилося достатньо вертикального простору щоб анотація не перекривала те, що знаходиться вище чи нижче.

…на кшталт цього!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
}
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
}
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

Sigma-9	Тема "Night Rush"
Тема Black Highlighter	Тема "Extra Black Highlighter"

Це компонент, який додає невелике ненав’язливе сповіщення про вміст. Він призначений для розміщення під інформаційним модулем таким чином, щоб маленька стрілка вказувала на маленьку кнопку інформації.

Все, що він робить, це спрямовує увагу на інформаційний модуль, в якому ви можете написати своє попередження щодо вмісту.

Читачі, для яких попередження щодо змісту важливі, мають можливість прочитати його. Читачі, які не бажають читати спойлер щодо попередження про вміст, можуть його ігнорувати. Усі читачі знають, що існує попередження щодо вмісту, і це важливо.

Якщо ви бажаєте, щоб усі ваші читачі перш за все попередження про вміст, вам не слід використовувати цей компонент. Натомість розмістіть попередження щодо вмісту в самій статті.

Будь ласка, зверніть увагу, що автори не зобов’язані надавати попередження щодо вмісту своєї роботи, але якщо ви вирішите це зробити, цей компонент, я сподіваюся, полегшить роботу.

Немає гарантії, що цей компонент буде добре працюватиме з будь-якою темою (окрім Sigma-9 і BHL); якщо будуть мати місце якісь проблеми, повідомте про це автору теми Croquembouche.

Використання

Додавати цей компонент відразу після інформаційного модулю:

[[include :scp-ukrainian:info:start]]
Інформація стосовно цієї статті.
⚠️ **Попередження про зміст:** Ця стаття містить попередження про зміст.
[[include :scp-ukrainian:info:end]]

[[include :scp-ukrainian:component:info-cw]]

Цей компонент навмисно постачається без вбудованих параметрів налаштування, оскільки він має бути серйозним поза всесвітом Фонду, і його розташування перед статтею допомагає в цьому.

Якщо ви бажаєте використовувати його разом з інформаційним компонентом від Ayers, я рекомендую використати замість нього такий текст по центру:

= ⚠️ попередження про контент ↑

⚠️ Попередження про контент