🎨 Витрина стилей адмонишенов

Демонстрация современных стилей для всех типов адмонишенов (admonitions) в духе Tailwind CSS.

🎯 Основные типы адмонишенов

📝 Note (Заметка)

Стандартный тип для обычных заметок:

Кастомный заголовок

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

примечание

Заметка без кастомного заголовка использует тип по умолчанию.

---

💡 Tip (Совет)

Зеленый дизайн для полезных советов:

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

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

Особенности:

• Зеленый градиент в заголовке
• Тонкий цветной фон в содержимом
• Hover-эффекты с подъемом

подсказка

Советы могут быть без заголовка и содержать код, жирный текст и другие элементы разметки.

---

ℹ️ Info (Информация)

Синий дизайн для важной информации:

Важная информация

Это информационный блок с важной информацией, которую стоит выделить.

Поддерживает:

• Списки элементов
• Множественные абзацы
• Форматированный текст
• Inline код

И даже блоки кода:

console.log('Адмонишены поддерживают код!');

---

⚠️ Warning (Предупреждение)

Желто-оранжевый для предупреждений:

Внимание

Это предупреждение о потенциальных проблемах или важных моментах, требующих внимания пользователя.

Когда использовать:

• Потенциальные проблемы
• Важные ограничения
• Моменты, требующие особого внимания

---

🚨 Caution (Осторожно)

Оранжевый для призывов к осторожности:

Осторожно

Будьте осторожны при выполнении этих действий. Неправильное выполнение может привести к нежелательным последствиям.

Специальные эффекты:

• Анимация "пульса" при наведении
• Усиленные hover-эффекты
• Повышенная контрастность

---

⛔ Danger (Опасность)

Красный для критических предупреждений:

Критическая опасность

Это критически важная информация или предупреждение об опасности. Игнорирование может привести к серьезным проблемам!

⚠️ ВНИМАНИЕ:

• Может повредить систему
• Потеря данных возможна
• Требует опытного пользователя

Наведите курсор для просмотра анимации пульса!

---

🎨 Особенности дизайна

🌈 Цветовая схема

Каждый тип адмонишена имеет свою уникальную цветовую схему в стиле Tailwind CSS:

Тип	Цвет заголовка	Акцентная граница	Градиент содержимого
Note	Серо-синий	#6b7280	Нейтральный
Tip	Зеленый	#10b981	Зеленый тонкий
Info	Синий	#3b82f6	Синий тонкий
Warning	Желто-оранжевый	#f59e0b	Оранжевый тонкий
Caution	Оранжевый	#ea580c	Оранжевый средний
Danger	Красный	#ef4444	Красный тонкий

✨ Интерактивные эффекты

Hover-эффекты

Наведите курсор на любой адмонишен, чтобы увидеть:

• Подъем на 2px (translateY(-2px))
• Усиление тени
• Плавные переходы (0.3s ease)

Специальная анимация

Danger и Caution имеют специальную анимацию "пульса" при наведении курсора!

🎭 Визуальные особенности

Современные эффекты

• Border-radius: 12px для плавных углов
• Box-shadow: Многослойные тени в стиле Tailwind
• Backdrop-filter: Размытие фона для глубины
• Gradients: Линейные градиенты в заголовках
• Typography: Улучшенные отступы и размеры шрифтов

---

📱 Адаптивность

Мобильная оптимизация

На мобильных устройствах (< 768px):

• Уменьшенные отступы
• Компактные border-radius (8px)
• Оптимизированные размеры иконок
• Адаптированные размеры шрифтов

---

🌙 Темная тема

Автоматическая адаптация

Все адмонишены автоматически адаптируются под темную тему:

• Темный фон содержимого (rgba(31, 41, 55, 0.95))
• Светлый текст (rgba(243, 244, 246, 1))
• Корректная контрастность для кода
• Сохранение всех эффектов

---

♿ Доступность

Поддержка доступности

• Анимации отключаются при prefers-reduced-motion: reduce
• Высокая контрастность соответствует WCAG
• Семантическая структура сохранена
• Клавиатурная навигация работает корректно

---

🎯 Результат

Что получилось

Теперь все адмонишены в документации имеют:

• ✅ Современный дизайн в стиле Tailwind CSS
• ✅ Красивые градиенты и эффекты глубины
• ✅ Интерактивные hover-эффекты
• ✅ Специальные анимации для критических типов
• ✅ Полную поддержку темной темы
• ✅ Адаптивность для всех устройств
• ✅ Улучшенную типографику
• ✅ Соблюдение принципов доступности

🎮 Попробуйте: Наведите курсор на разные адмонишены выше, чтобы увидеть все эффекты в действии!