Add `.warning` class for doc author use

This is designed to be compatible with rustdoc's version, in
https://github.com/rust-lang/rust/pull/106561
This commit is contained in:
Michael Howell 2023-09-08 13:14:54 -07:00
parent d5b1676216
commit 65dae11e47
3 changed files with 61 additions and 0 deletions

View File

@ -314,3 +314,29 @@ contents (sidebar) by including a `\{{#title ...}}` near the top of the page.
```hbs ```hbs
\{{#title My Title}} \{{#title My Title}}
``` ```
## HTML classes provided by mdBook
The `class="warning"` can be applied to make a warning, or similar note, stand out.
```html
<div class="warning">
This is a bad thing that you should pay attention to.
Warning blocks should be used sparingly in documentation, to avoid "warning
fatique," where people are trained to ignore them because they usually don't
matter for what they're doing.
</div>
```
<div class="warning">
This is a bad thing that you should pay attention to.
Warning blocks should be used sparingly in documentation, to avoid "warning
fatique," where people are trained to ignore them because they usually don't
matter for what they're doing.
</div>

View File

@ -156,6 +156,29 @@ blockquote {
border-block-end: .1em solid var(--quote-border); border-block-end: .1em solid var(--quote-border);
} }
.warning {
margin: 20px;
padding: 0 20px;
border-inline-start: 2px solid var(--warning-border);
}
.warning:before {
position: absolute;
width: 3rem;
height: 3rem;
margin-inline-start: calc(-1.5rem - 21px);
content: "ⓘ";
text-align: center;
background-color: var(--bg);
color: var(--warning-border);
font-weight: bold;
font-size: 2rem;
}
blockquote .warning:before {
background-color: var(--quote-bg);
}
kbd { kbd {
background-color: var(--table-border-color); background-color: var(--table-border-color);
border-radius: 4px; border-radius: 4px;

View File

@ -38,6 +38,8 @@
--quote-bg: hsl(226, 15%, 17%); --quote-bg: hsl(226, 15%, 17%);
--quote-border: hsl(226, 15%, 22%); --quote-border: hsl(226, 15%, 22%);
--warning-border: #ff8e00;
--table-border-color: hsl(210, 25%, 13%); --table-border-color: hsl(210, 25%, 13%);
--table-header-bg: hsl(210, 25%, 28%); --table-header-bg: hsl(210, 25%, 28%);
--table-alternate-bg: hsl(210, 25%, 11%); --table-alternate-bg: hsl(210, 25%, 11%);
@ -80,6 +82,8 @@
--quote-bg: hsl(234, 21%, 18%); --quote-bg: hsl(234, 21%, 18%);
--quote-border: hsl(234, 21%, 23%); --quote-border: hsl(234, 21%, 23%);
--warning-border: #ff8e00;
--table-border-color: hsl(200, 7%, 13%); --table-border-color: hsl(200, 7%, 13%);
--table-header-bg: hsl(200, 7%, 28%); --table-header-bg: hsl(200, 7%, 28%);
--table-alternate-bg: hsl(200, 7%, 11%); --table-alternate-bg: hsl(200, 7%, 11%);
@ -122,6 +126,8 @@
--quote-bg: hsl(197, 37%, 96%); --quote-bg: hsl(197, 37%, 96%);
--quote-border: hsl(197, 37%, 91%); --quote-border: hsl(197, 37%, 91%);
--warning-border: #ff8e00;
--table-border-color: hsl(0, 0%, 95%); --table-border-color: hsl(0, 0%, 95%);
--table-header-bg: hsl(0, 0%, 80%); --table-header-bg: hsl(0, 0%, 80%);
--table-alternate-bg: hsl(0, 0%, 97%); --table-alternate-bg: hsl(0, 0%, 97%);
@ -164,6 +170,8 @@
--quote-bg: hsl(226, 15%, 17%); --quote-bg: hsl(226, 15%, 17%);
--quote-border: hsl(226, 15%, 22%); --quote-border: hsl(226, 15%, 22%);
--warning-border: #ff8e00;
--table-border-color: hsl(226, 23%, 16%); --table-border-color: hsl(226, 23%, 16%);
--table-header-bg: hsl(226, 23%, 31%); --table-header-bg: hsl(226, 23%, 31%);
--table-alternate-bg: hsl(226, 23%, 14%); --table-alternate-bg: hsl(226, 23%, 14%);
@ -206,6 +214,8 @@
--quote-bg: hsl(60, 5%, 75%); --quote-bg: hsl(60, 5%, 75%);
--quote-border: hsl(60, 5%, 70%); --quote-border: hsl(60, 5%, 70%);
--warning-border: #ff8e00;
--table-border-color: hsl(60, 9%, 82%); --table-border-color: hsl(60, 9%, 82%);
--table-header-bg: #b3a497; --table-header-bg: #b3a497;
--table-alternate-bg: hsl(60, 9%, 84%); --table-alternate-bg: hsl(60, 9%, 84%);
@ -249,6 +259,8 @@
--quote-bg: hsl(234, 21%, 18%); --quote-bg: hsl(234, 21%, 18%);
--quote-border: hsl(234, 21%, 23%); --quote-border: hsl(234, 21%, 23%);
--warning-border: #ff8e00;
--table-border-color: hsl(200, 7%, 13%); --table-border-color: hsl(200, 7%, 13%);
--table-header-bg: hsl(200, 7%, 28%); --table-header-bg: hsl(200, 7%, 28%);
--table-alternate-bg: hsl(200, 7%, 11%); --table-alternate-bg: hsl(200, 7%, 11%);