Admonition shortcodes for note, tip and warning

README.md

@@ -15,6 +15,7 @@ Hermit is a minimal and fast theme for Hugo. It's built for bloggers who want a
 * Extremely lightweight and load fast. No third party framework, no unnecessary code.
 * All code fields feature syntax highlighting and a code-copy function
 * Responsive & Retina Ready. Scales gracefully from a big screen all the way down to the smallest mobile phone. Assets in vector format ensures that it looks sharp on high-resolution screens.
+* Admonition shortcodes for note, tip and warning to highlight parts of a blog post
 
 **[Theme Demo](https://hugo-theme-hermit.netlify.com/)** (uses contents and config from the `exampleSite` folder)
 
@@ -73,6 +74,18 @@ The following icons are supported, please make sure the `name` filed is exactly
 
 If that's not enough, you can see [Overriding templates](#overriding-templates) section.
 
+#### Admonition Shortcodes
+
+Shortcodes are available for note, tip and warning.
+
+```md
+{{% note %}}
+This will be shown in a box with note highlight.
+{{% /note %}}
+```
+
+See the [shortcode docs](https://gohugo.io/content-management/shortcodes/) from hugo.
+
 ### Manage content
 
 * Keep your regular pages in the `content` folder. To create a new page, run `hugo new page-title.md`
@@ -85,12 +98,15 @@ If that's not enough, you can see [Overriding templates](#overriding-templates)
 In Hugo, layouts can live in either the project’s (root) or the themes’ layout folders, any template inside the root layout folder will override theme's layout that relative to it, for example: `layouts/_default/baseof.html` will override `themes/hermit/layouts/_default/baseof.html`. So, you can easily customize the theme without edit it directly, which makes updating the theme easier. Here's some common customizations:
 
 ##### Customize social icons
+
 You can modify or add any svg icons in site's `layouts/partials/svg.html`.
 
 ##### Customize comment system
+
 We only have built-in support for Disqus at the moment, if that doesn't fit your needs, you can just add html to site's `layouts/partials/comments.html`.
 
 ##### Add custom analytics
+
 If you prefer to use different analytics system other than google analytics, then add them inside `layouts/partials/analytics.html`.
 
 #### Customize CSS

assets/scss/_admonition.scss

@@ -0,0 +1,28 @@
+/*admonition styles */
+
+.admonition-icon {
+	fill: $text;
+	width: 20px;
+	margin: 6px;
+	margin-left: -27px;
+	position: absolute;
+	top: 10px;
+  }
+
+.admonition-highlight {
+	border-left-width: 35px;
+	border-left-style: solid;
+	position: relative;
+	border-color: $admonition-highlight;
+	display: block;
+}
+
+.admonition-content {
+	display: block;
+	margin: 0px;
+	padding: .125em 1em;
+	margin-top: 2em;
+	margin-bottom: 2em;
+	overflow-x: auto;
+	background-color: $highlight-grey;
+}

assets/scss/_predefined.scss

@@ -6,6 +6,7 @@ $light-grey: #494f5c;
 $dark-grey: #3B3E48;
 $highlight-grey: #7d828a;
 $midnightblue: #2c3e50;
+$admonition-highlight : #0594CB;
 
 // Fonts
 //

assets/scss/style.scss

@@ -2,6 +2,7 @@
 @import "normalize.scss";
 @import "syntax.scss";
 @import "animate.scss";
+@import "admonition.scss";
 
 /* Webkit Scrollbar Customize */
 ::-webkit-scrollbar {

layouts/shortcodes/note.html

@@ -0,0 +1,10 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<aside class="admonition-highlight">
+	<div class="admonition-icon">
+		{{partial "svg/sticky-note.svg" }}
+	</div>
+	<div class="admonition-content">
+		{{- .Inner -}}
+	</div>
+</aside> 

layouts/shortcodes/tip.html

@@ -0,0 +1,10 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<aside class="admonition-highlight">
+	<div class="admonition-icon">
+		{{partial "svg/lightbulb.svg" }}
+	</div>
+	<div class="admonition-content">
+		{{- .Inner -}}
+	</div>
+</aside> 

layouts/shortcodes/warning.html

@@ -0,0 +1,10 @@
+{{ $_hugo_config := `{ "version": 1 }` }}
+
+<aside class="admonition-highlight">
+	<div class="admonition-icon">
+		{{partial "svg/exclamation.svg" }}
+	</div>
+	<div class="admonition-content">
+		{{- .Inner -}}
+	</div>
+</aside>