Add `alert` shortcode

Alerts can be used to add side content such as tips, notes, or warnings to articles.

exampleSite/content/post/getting-started.md

@@ -73,7 +73,9 @@ Edit your biography in the *about* widget `content/home/about.md` that you copie
 
 Each widget is responsible for a section on the homepage and contains further parameters that can be edited as desired. The parameters can be found in the preamble/frontmatter (between the pair of `+++`) for each widget located in the `content/home/` folder.
 
+{{% alert note %}}
 By default, publications will be displayed in a simple list. If you prefer a more detailed list with abstract and image, you can enable the detailed publication list on the homepage by setting `detailed_list = true` in `content/home/publications.md`.
+{{% /alert %}}
 
 ### Add your content
 

exampleSite/content/post/writing-markdown-latex.md

@@ -6,7 +6,7 @@ title = "Writing content with Markdown, LaTeX, and Shortcodes"
 math = true
 +++
 
-Content can be written using [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet), [LaTeX math](https://en.wikibooks.org/wiki/LaTeX/Mathematics), and [Hugo Shortcodes](http://gohugo.io/extras/shortcodes/). Additionally, HTML may be used for advanced formatting.<!--more-->
+Content can be written using [Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet), [LaTeX math](https://en.wikibooks.org/wiki/LaTeX/Mathematics), and [Hugo Shortcodes](http://gohugo.io/extras/shortcodes/). Additionally, HTML may be used for advanced formatting.<!--more--> This article gives an overview of the most common formatting options.
 
 ## Sub-headings
 
@@ -132,3 +132,28 @@ Result:
 | ------------------| ------------------------------ |
 | `hugo`            | Build your website.            |
 | `hugo serve -w`   | View your website.             |
+
+
+## Alerts
+
+Alerts are a useful feature that add side content such as tips, notes, or warnings to your articles. They are especially handy when writing educational tutorial-style articles. Use the corresponding shortcodes to enable alerts inside your content:
+
+    {{%/* alert note */%}}
+    Here's a tip or note...
+    {{%/* /alert */%}}
+
+This will display the following *note* block:
+
+{{% alert note %}}
+Here's a tip or note...
+{{% /alert %}}
+
+    {{%/* alert warning */%}}
+    Here's some important information...
+    {{%/* /alert */%}}
+
+This will display the following *warning* block:
+
+{{% alert warning %}}
+Here's some important information...
+{{% /alert %}}

layouts/shortcodes/alert.html

@@ -0,0 +1,3 @@
+<div class="alert alert-{{ .Get 0 }}">
+  {{ .Inner }}
+</div>

static/css/hugo-academic.css

@@ -760,3 +760,49 @@ table > tbody > tr:hover > td,
 table > tbody > tr:hover > th {
   background-color: #e5e5e5;
 }
+
+/*************************************************
+ *  Alerts
+ **************************************************/
+
+div.alert {
+  border-radius: 10px;
+  margin-bottom: 1rem;
+}
+
+div.alert p {
+  position: relative;
+  display: block;
+  font-size: 1rem;
+  margin-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+div.alert p:first-child::before {
+  position: absolute;
+  top: -0.5rem;
+  left: -2rem;
+  font-family: 'FontAwesome';
+  font-size: 1.5rem;
+  color: #fff;
+  content: '\f05a';
+  width: 1.5rem;
+  text-align: center;
+}
+
+div.alert-warning p:first-child::before {
+  content: '\f071';
+}
+
+.alert-note {
+  color: #fff;
+  background-color: #03A9F4; /* Material LightBlue500 */
+  border-color: #bce8f1;
+}
+
+.alert-warning {
+  color: #fff;
+  background-color: #f44336; /* Material Red500 */
+  border-color: #ebccd1;
+}