Skip to content

Commit

Permalink
Restyle admonitions to be smaller and match branding
Browse files Browse the repository at this point in the history
- Only the branding red and yellow admonitions colours are allowed
- Much smaller admonition headers, text, and padding overall
- Fixes to the text colour and background colours to match the site

In addition, definition lists now respect the smaller font size. Finally,
inline code spans are more compact.
  • Loading branch information
ichard26 committed Jan 31, 2025
1 parent 5e16a5a commit eca4bba
Showing 1 changed file with 26 additions and 7 deletions.
33 changes: 26 additions & 7 deletions assets/css/extended/overrides.css
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ a:hover {
.post-content dt em:nth-child(2) {
font-weight: 500;
}
.post-content dd {
font-size: var(--text-size);
}

/* Make navigation look nicer (thanks @pradyunsg) */
.paginav {
Expand Down Expand Up @@ -200,6 +203,7 @@ article.post-entry:has(a:hover) {

.post-content :not(.highlight > pre) > code {
white-space: nowrap;
padding: 3px 5px;
}

.post-content summary {
Expand All @@ -210,23 +214,38 @@ article.post-entry:has(a:hover) {
/* More compact admonitions */
.post-content .admonition-header {
font-size: 1rem;
padding: 0.2rem 1rem;
font-weight: 500;
padding: 0.1rem 0.8rem;
}
.post-content .admonition-content p {
font-size: calc(var(--text-size) - 1.5px);
}
.post-content .admonition-content {
padding: 0.8rem;
padding: 0.5rem 0.8rem;
}
/* Style adminition to match blog style */
body.dark .post-content .admonition {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4)
}
.admonition:not(.warning) {
border-left-color: var(--secondary) !important;
}
.admonition:not(.warning) .admonition-header {
color: var(--secondary) !important;
background-color: color-mix(in srgb, var(--secondary), transparent 92%) !important;
}
.post-content .admonition-header svg {
height: 1rem;
}
body .admonition-content {
background: white !important;
color: black !important;
color: var(--content) !important;
}
body.dark .admonition-content {
background: #1D1E20 !important;
color: #e6e6e6 !important;
}
.post-content .admonition-content p {
font-size: calc(var(--text-size) - 1px);
}
.post-content .admonition-content code {
background: var(--code-bg) !important;
color: var(--content) !important;
font-size: 0.78em; /* taken from papermod to override adminition's bad value */
}

0 comments on commit eca4bba

Please sign in to comment.