Skip to content

feat: add admonition styles with Dracula colors and Font Awesome icons#33

Open
FernandoCelmer wants to merge 4 commits intodevelopfrom
feature/29
Open

feat: add admonition styles with Dracula colors and Font Awesome icons#33
FernandoCelmer wants to merge 4 commits intodevelopfrom
feature/29

Conversation

@FernandoCelmer
Copy link
Member

Description

  • template/assets/css/mkdocs.css: added admonition styles covering all MkDocs admonition types
  • mkdocs_dracula_theme/assets/css/mkdocs.min.css: added the same styles to the served stylesheet

Motivation and Context

Admonition blocks (!!! note, !!! warning, etc.) rendered without any visual styling in the theme. MkDocs emits the correct HTML structure but the theme had no .admonition CSS rules at all.

This adds styled admonitions using the Dracula color palette (CSS variables from dracula-ui.min.css) and Font Awesome 4.7 icons — which are already loaded unconditionally in base.html. Each admonition type gets a color-coded left border, a matching transparent background, and an icon in the title bar.

Closes #29

Types of changes

  • Bug fix (change that fixes an issue)
  • New feature (change which adds functionality)
  • Documentation

Checklist

  • I have performed a self-review of my own code
  • I have added tests that prove my fix is effective or that my feature works
  • I have updated the CHANGELOG
  • I have updated the documentation accordingly

@FernandoCelmer FernandoCelmer changed the base branch from main to develop March 25, 2026 00:43
Copy link
Member Author

@FernandoCelmer FernandoCelmer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔍 Code Review

Code issues found: 3

See inline comments below.

- revert version bump to 1.0.9-dev1 (let CI handle release)
- minify admonition CSS in mkdocs.min.css
- replace fa-fire with fa-lightbulb-o for tip/hint/important admonitions

Refs #29
Add pytest suite covering admonition CSS rules introduced in this PR:
- CSS coverage: all 26 admonition types present in source and minified files
- Icon validation: correct Font Awesome 4.7 codepoints per type
- Color validation: Dracula CSS variables used (no hardcoded hex)
- Minified format: single-line, no comments, shorthand values

Refs #29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Development

Successfully merging this pull request may close these issues.

Admonitions should have box, color and icon

2 participants