Skip to content

Commit

Permalink
Add .warning class for doc author use
Browse files Browse the repository at this point in the history
This is designed to be compatible with rustdoc's version, in
rust-lang/rust#106561
  • Loading branch information
notriddle committed Sep 8, 2023
1 parent d5b1676 commit 65dae11
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 0 deletions.
26 changes: 26 additions & 0 deletions guide/src/format/mdbook.md
Expand Up @@ -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>
23 changes: 23 additions & 0 deletions src/theme/css/general.css
Expand Up @@ -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;
Expand Down
12 changes: 12 additions & 0 deletions src/theme/css/variables.css
Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down Expand Up @@ -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%);
Expand Down

0 comments on commit 65dae11

Please sign in to comment.