Эгея Power-Ups

Решил опубликовать несколько своих доработок, которые добавляют в движок новые функции. Вы можете их свободно использовать в любых ваших целях.

Список улучшений

Кнопка «подробнее» или кат внутри заметок
Заметки на полях
Хайлайты
Мини галерея

Кнопка «подробнее» или кат

Когда пишешь статью и у тебя много исходников, удобно их скрыть под кат, чтобы они не увеличивали размер статьи не отвлекали от текста. Для этого добавил поддержку катов внутри заметок. Для этого нужно сделать 2 вещи:

Пометить текст, который будет выступать в качестве кнопки: .cut-button Название кнопки.
Следующим элементов разместить блок div с классом cut-content и в него поместить нужный контент для скрытия.

Как это выглядит в коде:

.cut-button Два лучших вопроса для собеседования
<div class="cut-content">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как это работает

Два лучших вопроса для собеседования

Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?

Стилизация в виде карточке

Если необходимо выделить какой-то блок текста в заметке можно использовать хайлайты. Для этого достаточно обернуть текст, который хотите выделить в div с классом highlight.

Как выглядит в коде:

<div class="highlight">
Как бы вы описали идеального кандидата на эту должность?
Как вы будете судить, хорош ли я в том, что потребуется от меня через 1-3 месяца?
</div>

Как работает

Заметки на полях

Блог с реализацией заметок: http://mopsicus.ru.

Эту функциональность я подсмотрел в другом блоге и решил перенести в свой. Пригодится, когда нужно указать ссылку на ресурс по теме или просто примечание. Также добавил возможность указывать тип заметки. По умолчанию заметка не занимает отдельный абзац в тексте.

Как выглядит в коде:

.note Блог с реализацией заметок:  ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).
.note-md Блог с реализацией заметок: ((http://mopsicus.ru/all/aegea-field-notes/ http://mopsicus.ru)).

Как выглядит на мобиле:

Во всю ширину экрана.

Обтекаемый текст.

Мини галерея
Можно вывести несколько изображений в ряд. Пока что это реализовано тольк для 3 и 4 картинок. В будущем планирую добавить возможность открывать изображение на весь экран.

Как выглядит в коде:

<div class="card-gallery card-gallery-4">
    <!-- Список ссылок на изображения -->
</div>

<div class="card-gallery card-gallery-3">
    <!-- Список ссылок на изображения -->
</div>

Как выглядит на страницу