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
|
||||
\{{#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);
|
||||
}
|
||||
|
||||
.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 {
|
||||
background-color: var(--table-border-color);
|
||||
border-radius: 4px;
|
||||
|
|
|
@ -38,6 +38,8 @@
|
|||
--quote-bg: hsl(226, 15%, 17%);
|
||||
--quote-border: hsl(226, 15%, 22%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(210, 25%, 13%);
|
||||
--table-header-bg: hsl(210, 25%, 28%);
|
||||
--table-alternate-bg: hsl(210, 25%, 11%);
|
||||
|
@ -80,6 +82,8 @@
|
|||
--quote-bg: hsl(234, 21%, 18%);
|
||||
--quote-border: hsl(234, 21%, 23%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(200, 7%, 13%);
|
||||
--table-header-bg: hsl(200, 7%, 28%);
|
||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
||||
|
@ -122,6 +126,8 @@
|
|||
--quote-bg: hsl(197, 37%, 96%);
|
||||
--quote-border: hsl(197, 37%, 91%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(0, 0%, 95%);
|
||||
--table-header-bg: hsl(0, 0%, 80%);
|
||||
--table-alternate-bg: hsl(0, 0%, 97%);
|
||||
|
@ -164,6 +170,8 @@
|
|||
--quote-bg: hsl(226, 15%, 17%);
|
||||
--quote-border: hsl(226, 15%, 22%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(226, 23%, 16%);
|
||||
--table-header-bg: hsl(226, 23%, 31%);
|
||||
--table-alternate-bg: hsl(226, 23%, 14%);
|
||||
|
@ -206,6 +214,8 @@
|
|||
--quote-bg: hsl(60, 5%, 75%);
|
||||
--quote-border: hsl(60, 5%, 70%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(60, 9%, 82%);
|
||||
--table-header-bg: #b3a497;
|
||||
--table-alternate-bg: hsl(60, 9%, 84%);
|
||||
|
@ -249,6 +259,8 @@
|
|||
--quote-bg: hsl(234, 21%, 18%);
|
||||
--quote-border: hsl(234, 21%, 23%);
|
||||
|
||||
--warning-border: #ff8e00;
|
||||
|
||||
--table-border-color: hsl(200, 7%, 13%);
|
||||
--table-header-bg: hsl(200, 7%, 28%);
|
||||
--table-alternate-bg: hsl(200, 7%, 11%);
|
||||
|
|
Loading…
Reference in New Issue