Adds style for warnings and notes

This commit is contained in:
Joao Fernandes 2017-04-10 10:28:43 -07:00 committed by Joao Fernandes
parent 9044812f0d
commit b6ea27dfa6
3 changed files with 57 additions and 12 deletions

35
_scss/_notes.scss Normal file
View File

@ -0,0 +1,35 @@
/*
* Infos, notes, and warnings
*/
$info-color: #1488C6;
$warning-color: #aa6708;
$danger-color: #ce4844;
blockquote {
border-left-color: $info-color;
}
blockquote > p:first-child {
margin-top: 0;
}
blockquote > p > strong {
color: $info-color;
}
blockquote.warning {
border-left-color: $warning-color;
}
blockquote.warning > p > strong {
color: $warning-color;
}
blockquote.danger {
border-left-color: $danger-color;
}
blockquote.danger > p > strong {
color: $danger-color;
}

View File

@ -15,3 +15,4 @@
@import "github";
@import "overrides";
@import "mobile";
@import "notes";

33
test.md
View File

@ -358,20 +358,31 @@ Bootstrap JS are loaded.
## Admonitions (notes)
> **Note**: This is a note.
> **Note**: This is a note using the old note style
> **Info**: This is an info.
> **This is a note using the new style**
>
> And you include a small description here telling users to be on the lookout
> **Tip**: This is a tip.
> **Be careful out there**
>
> Add the `warning` class to your blockquotes if you want to tell users
> to be careful about something.
{: .warning}
> **Warning**: This is a warning.
> **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.
>
> You can also add more paragraphs here if your explanation is
> super complex.
{: .danger}
> **Caution**: This is a caution.
> **Note**: One line of note text
> another line of note text
> **Note**: This is a note with a list and a table in it.
> **This is a crazy note**
>
> This note has tons of content in it:
>
> - List item 1
> - List item 2
@ -383,6 +394,7 @@ Bootstrap JS are loaded.
>
> And another sentence to top it all off.
## Comments
You can use XML style comments, which show up in the HTML "view source", or
@ -548,6 +560,3 @@ authorizedkeys:
volumes:
/root:/user:rw
```