🖥 26 строк CSS вместо 500 тем оформления

На 👽 Reddit человек признался, что перебрал около полусотни тем, и ни одна ему не подошла для решения задачи. (в заголовке там 500, но автор признался что явно приукрасил).

А задача в целом простая как три копейки: скроллишь длинную заметку - и не понимаешь, где заголовок второго уровня, а где третьего. Закончилось все тем, что он вернулся на дефолтную тему и дописал к ней сниппет.

Ну вообще конечно претензия в сторону Obsidian обоснованная и справедливая.

Встроенная шкала заголовков в Obsidian сжатая: h1 — 1.618em, h2 — 1.462em, h3 — 1.318em.

Между соседними уровнями около 10% размера, а жирность везде почти одинаковая: 700 у первого и 680, 660, 640, 620 у остальных. Глазу зацепиться не за что.

Сниппет делает две вещи:

1️⃣ Добавляет воздуха перед заголовком, чтобы блоки текста отделялись друг от друга.
2️⃣ Разгоняет шкалу: h1 вырастает до 2.9em, а жирность, наоборот, падает до 400 и 300. Крупно и тонко - иерархия читается мгновенно.

.cm-s-obsidian .cm-line.HyperMD-header {
  padding-top: calc(var(--p-spacing) * 2);
  padding-bottom: calc(var(--p-spacing) * 0.6);
}

body {
  --h1-size: 2.9em;
  --h2-size: 2.362em;
  --h3-size: 1.818em;
  --h4-size: 1.488em;

  --h1-line-height: 1.0;
  --h2-line-height: 1.0;
  --h3-line-height: 1.1;
  --h4-line-height: 1.1;

  --h1-weight: 400;
  --h2-weight: 400;
  --h3-weight: 400;
  --h4-weight: 300;
  --h5-weight: 300;
  --h6-weight: 300;
}

Кладём файл в папку сниппетов (Settings → Appearance → CSS snippets → иконка папки) и включаем тумблер.

Три нюанса, которых в оригинальном посте ни слова:

◽️ Первый блок работает только в редакторе. .cm-line - класс CodeMirror, в режиме чтения такого элемента просто не существует. Там отступ перед заголовком Obsidian берёт из своей переменной -heading-spacing (по умолчанию calc(var(--p-spacing) * 2.5)). Хотите одинаково в обоих режимах - допишите в блок body строку --heading-spacing: calc(var(--p-spacing) * 3);.

◽️ Жирность 300 отрисуется, только если у шрифта есть light-начертание. Дефолтный шрифт Obsidian - системный (SF Pro на Mac, Segoe UI на Windows), light-начертание у него есть, и 300 он отдаст нормально. А если вы поставили свой шрифт из системы, тонкого начертания может не оказаться - и вес молча округлится до обычного.

◽️ В оригинале задавались ещё --h5-size: 1.076em и --h6-size: 1em. Я их выкинул: это дефолтные значения Obsidian, обе строки ничего не меняют. Размеры автор по факту перекроил только у h1–h4, а вот жирность - у всех шести.

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

#ProObsidian #ДмитрийЛаухин #css
================================
🎯 E-mail-рассылка Second Brain Press | 🧠 Демо-хранилище Second Brain Vault |🗿 Полный курс по изучению Obsidian | 📍 Zotero. Ваша личная библиотека | 📱 Obsidian + AI |🤭 Консалтинг PKM | 🤖 Claude + Obsidian | 💜 Второй мозг для Бизнеса