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:
parent
d5b1676216
commit
65dae11e47
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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%);
|
||||||
|
|
Loading…
Reference in New Issue