OCram85/beautifulSA-jekyll
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

adds boxes (#227)

Browse Source 
* update fontawesome to 4.7

* adds remarkup inspired boxes

* adds markdown example as image

* adds draft post with usage examples

* move box definitions in main.css

* Revert "update fontawesome to 4.7"

This reverts commit 9d7c96cbb2586cd93b91dd099d95c2558aca3bb7.

* moves box examples into showcase post

* fix line endings in test-markdown

* fix line endings
This commit is contained in:
OCram85 2017-08-17 17:51:45 +02:00 committed by Dean Attali
parent ffb3c843b2
commit 7292e04267
2 changed files with 77 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
_posts/2015-02-20-test-markdown.md
View File

@ -11,14 +11,14 @@ You can write regular [markdown](http://markdowntutorial.com/) here and Jekyll w
## Here is a secondary heading ## Here is a secondary heading
Here's a useless table: Here's a useless table:
| Number | Next number | Previous number | | Number | Next number | Previous number |
| :------ |:--- | :--- | | :------ |:--- | :--- |
| Five | Six | Four | | Five | Six | Four |
| Ten | Eleven | Nine | | Ten | Eleven | Nine |
| Seven | Eight | Six | | Seven | Eight | Six |
| Two | Three | One | | Two | Three | One |
How about a yummy crepe? How about a yummy crepe?
@ -50,3 +50,21 @@ var foo = function(x) {
} }
foo(3) foo(3)
{% endhighlight %} {% endhighlight %}
## Boxes
You can add notification, warning and error boxes like this:
### Notification
{: .box-note}
<i class="fa fa-commenting icon-blue" aria-hidden="true"></i> **Note:** This is a notification box.
### Warning
{: .box-warning}
<i class="fa fa-bolt icon-yellow" aria-hidden="true"></i> **Warning:** This is a warning box.
### Error
{: .box-error}
<i class="fa fa-exclamation circle icon-red" aria-hidden="true"></i> **Error:** This is a error box.

57
css/main.css
View File

@ -680,3 +680,60 @@ td.gutter {
#social-share-section { #social-share-section {
margin-bottom: 30px; margin-bottom: 30px;
} }
/* --- Notification boxes --- */
.box-note {
background-color: #eee;
padding: 15px;
padding-left: 10px;
margin: 20px;
margin-left: 5px;
border: 1px solid #eee;
border-left-width: 5px;
border-left-color: #2980b9;
border-radius: 3px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.box-warning {
background-color: #fdf5d4;
padding: 15px;
padding-left: 10px;
margin: 20px;
margin-left: 5px;
border: 1px solid #eee;
border-left-width: 5px;
border-left-color: #f1c40f;
border-radius: 3px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.box-error {
background-color: #f4dddb;
padding: 15px;
padding-left: 10px;
margin: 20px;
margin-left: 5px;
border: 1px solid #eee;
border-left-width: 5px;
border-left-color: #c0392b;
border-radius: 3px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* Icon Colors */
.icon-blue {
color: #2980b9;
}
.icon-yellow {
color: #f1c40f;
}
.icon-red{
color: #c0392b;
}