CSS и оформление: всё из канала

Старт: первый сниппет и как его включить

Если раньше не трогали CSS — эти четыре поста закрывают всю матчасть.

• Что такое CSS-сниппет и как его подключить — Куда класть .css, как включить в настройках, зачем держать несколько файлов
• Где брать готовые сниппеты — Живая коллекция вместо древних примеров, на которые ведёт справка Obsidian
• DevTools: найти нужный селектор — Ctrl+Shift+I: прицелиться в элемент и утащить CSS с любого сайта
• PDF-шпаргалка на 30 сниппетов — Свод по 14 темам плюс разбор, почему чужой сниппет ломается после обновления

Типографика и читаемость текста

Шесть точечных правок, после которых длинную заметку становится легче читать.

• Шкала заголовков через переменные темы — Иерархия h1-h6 в 26 строк + разбор трёх мест, где исходный рецепт врёт
• Красная строка в абзацах — Книжный вид: отступ первой строки и без пустых строк между абзацами
• Многоуровневая нумерация списков — Списки вида 1.1.1 вместо сброса счёта на каждом уровне вложенности
• Убрать стрелки-индикаторы у списков — Два селектора — и сворачиваемые списки перестают мельтешить стрелками
• Крупный шрифт для отдельного фрагмента — Свой класс плюс span: увеличить кусок текста, не трогая остальную заметку

Внутри заметки: вставки, картинки, карточки

Как выглядит содержимое, а не интерфейс: эмбеды, изображения, врезки-карточки.

• Вставки без рамок (naked embeds) — Вложенные заметки перестают выглядеть чужеродными блоками в рамке
• Увеличение картинки по клику — Клик по изображению разворачивает его на весь экран, повторный — сворачивает
• Баннер-шапка заметки — Картинка с градиентным затуханием под свойствами плюс набор заготовок
• Инфобокс в стиле Wikipedia — Карточка с картинкой и таблицами внутри — на обычном синтаксисе callout

Интерфейс: проводник, вкладки, скроллбар, мобильный

Правки окружения — того, что видно всегда, независимо от открытой заметки.

• Цветной файловый менеджер — Плашки для папок и цвет по типу файла, настройка мышкой через Style Settings
• Тонкий скроллбар в цвет темы — Убирает стрелки и толщину, цвет берётся из переменной темы автоматически
• Вкладки как в Safari — Активная вкладка растягивается — видно, где вы, без вглядывания в заголовки (проект не развивается)
• Мобильный интерфейс без скруглений — Возвращает прежний вид телефонной версии после редизайна с округлостями

Свойства, теги и callout'ы

Три элемента, которые встречаются в каждой заметке и чаще всего раздражают.

• Тюнинг блока свойств — Компактный заголовок с иконкой, рамки и отступы; на скринах было и стало
• Скрыть свойства в одной заметке — Приём cssclasses: стиль для конкретного файла, а не для всего хранилища
• Цветные теги без плагина — Шесть строк красят теги акцентом; во frontmatter приём не действует
• Callout'ы в стиле AnuPpuccin — Заголовок с заливкой и аккуратная рамка вместо дефолтной полоски слева
• Градиентная рамка у callout — Свечение через SVG-маску: не ломает фон, отступы и иконки чужой темы
• Конструктор callout без кода — Свой тип блока: цвет, иконка, вставка по хоткею; CSS плагин пишет сам

Темы целиком и Style Settings

Когда точечных правок мало: пять живых тем под разные задачи.

• AnuPpuccin — эталон настраиваемой темы — Цветовые схемы, цветные папки и тонкая настройка мышкой в Style Settings (проект не развивается)
• Velocity — минимализм с поддержкой Bases — Свои веса шрифтов под macOS/Windows/Linux и стили для таблиц Bases
• Aubade — тема под письмо — Акценты и шрифты меняются в Style Settings; есть нюансы с Dashboard++
• Brutalist — тема под чтение лонгридов — Прямые углы, ширина заметки глобально и для отдельного файла через cssclasses
• Soft Paper — тёплая тема для долгой работы — Надстройка над AnuPpuccin: спокойные оттенки и выверенная типографика

Продвинутое: когда сниппет заменяет плагин

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

• Резюме на CSS и печать в PDF — cssclasses плюс @media print: A4-вёрстка резюме из обычной заметки
• Прогресс-бары на чистом CSS — Звёздный рейтинг с дробями и цветом по заполнению — для свойств и дашбордов
• Эффект книжной обложки в Bases — Карточки Bases с корешком, тенью и подъёмом при наведении
• Блоки кода: кнопка Copy и сворачивание — Хранить сниппеты и промпты прямо в заметках становится удобно