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

Как создавать своё оформление заметок в Obsidian

Создание фрагментов css кода (сниппетов)

Фрагменты css кода это обычные файлы вёрстки содержащие css. Располагать данные файлы необходимо в каталоге \.obsidian\snippets\

Для удобства можно принять что имя файла фрагмента это базовый класс, на который стоит опираться при описании стилей. Например если имя файла my-grid.css то декларация для стилей должна начинаться с .my-grid

Применение фрагментов css кода

Помимо правильного расположения файла css, его также необходимо явно включить в настройках Obsidian -> Оформление -> Фрагменты css кода

В самой заметке для применения фрагмента необходимо создать атрибут с ключом cssclasses и значением (одним или несколько) с базовым классом, описанным в этом фрагменте т.е. my-grid

Вёрстка

Очевидным способом вёрстки является использование консоли разработчика, которая открывается комбинацией Ctrl + Shift + i, где можно с помощью инспектора анализировать элементы и дописывать туда желаемые стили, после чего переносить их в файл фрагмента.

Полезные советы

1) Режимы просмотра

Стоит учесть что режимы редактора и просмотра заметки имеют разные родительские классы .markdown-preview-view и .markdown-source-view

2) Адаптивная вёрстка

Отдельные заметки, открытые рядом, как и боковые панели, образуют единую область просмотра, поэтому сделать адаптивную вёрстку страницы заметки через media-query не получится. Вместо этого можно использовать container-query.

Пример:

/**
    Назначение элемента контейнером, для использования его размера как опорной точчки
*/
.my-grid .markdown-preview-sizer.markdown-preview-section {
    container-type: inline-size;
    container-name: db-card-preview-section;
}

/**
    Применение стиля к элементу исходя из размера определённого выше контейнера
*/
@container db-card-preview-section (width <= 900px) {
    .my-grid.markdown-preview-view .markdown-preview-sizer > div {
        width: 300px;
    }
}