mirror of https://github.com/docker/docs.git
Improve accessibility of notes (#2795)
This commit is contained in:
parent
fda9515c57
commit
85bf026404
|
@ -12,24 +12,45 @@ blockquote {
|
|||
|
||||
blockquote > p:first-child {
|
||||
margin-top: 0;
|
||||
font-weight: 700;
|
||||
color: $info-color;
|
||||
}
|
||||
|
||||
blockquote > p > strong {
|
||||
color: $info-color;
|
||||
blockquote > p:first-child::before {
|
||||
content: 'Note: ';
|
||||
}
|
||||
|
||||
blockquote.warning {
|
||||
border-left-color: $warning-color;
|
||||
}
|
||||
|
||||
blockquote.warning > p > strong {
|
||||
blockquote.warning > p:first-child {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
blockquote.warning > p:first-child::before {
|
||||
content: 'Important: ';
|
||||
}
|
||||
|
||||
blockquote.danger {
|
||||
border-left-color: $danger-color;
|
||||
}
|
||||
|
||||
blockquote.danger > p > strong {
|
||||
blockquote.danger > p:first-child {
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
blockquote.danger > p:first-child::before {
|
||||
content: 'Warning: '
|
||||
}
|
||||
|
||||
/* Maintain backwards compatibility with old
|
||||
* note style
|
||||
*/
|
||||
blockquote > p:only-child {
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
blockquote > p:only-child::before {
|
||||
content: none;
|
||||
}
|
||||
|
|
27
test.md
27
test.md
|
@ -142,13 +142,13 @@ might be interesting. You can use them with Markdown or HTML images.
|
|||
|
||||
Some tables in markdown and html.
|
||||
|
||||
| Permission level | Access |
|
||||
| ---------------- | ------------- |
|
||||
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
|
||||
| | Previous cell is empty. A `--flag` in mono text. |
|
||||
| Read | Pull |
|
||||
| Read/Write | Pull, push |
|
||||
| Admin | All of the above, plus update description, create and delete |
|
||||
| Permission level | Access |
|
||||
|:-------------------------------------------------------------------------|:-------------------------------------------------------------|
|
||||
| **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | |
|
||||
| | Previous cell is empty. A `--flag` in mono text. |
|
||||
| Read | Pull |
|
||||
| Read/Write | Pull, push |
|
||||
| Admin | All of the above, plus update description, create and delete |
|
||||
|
||||
The alignment of the cells in the source doesn't really matter. The ending pipe
|
||||
character is optional (unless the last cell is supposed to be empty). The header
|
||||
|
@ -362,17 +362,20 @@ Bootstrap JS are loaded.
|
|||
|
||||
> **Note**: This is a note using the old note style
|
||||
|
||||
> **This is a note using the new style**
|
||||
>
|
||||
> And you include a small description here telling users to be on the lookout
|
||||
> **Note**: This is a note using
|
||||
> the old style and has multiple lines, but a single paragraph
|
||||
|
||||
> **Be careful out there**
|
||||
> Pssst, wanna know something?
|
||||
>
|
||||
> You include a small description here telling users to be on the lookout
|
||||
|
||||
> It's not safe out there, take this Moby with you
|
||||
>
|
||||
> Add the `warning` class to your blockquotes if you want to tell users
|
||||
> to be careful about something.
|
||||
{: .warning}
|
||||
|
||||
> **Ouch, don't do that!**
|
||||
> Ouch, don't do that!
|
||||
>
|
||||
> Use the `danger` class to let people know this is dangerous or they
|
||||
> should pay close attention to this part of the road.
|
||||
|
|
Loading…
Reference in New Issue