Add note, caution, and warn shortcodes

content/functions/countwords.md

@@ -15,3 +15,19 @@ slug:
 aliases: []
 notes:
 ---
+
+## Heading
+
+Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, praesentium quod magnam veritatis, itaque tenetur minima nihil a at cum doloremque accusantium fugiat quam! Cumque ad vero provident enim temporibus!
+
+{{% note title="Note" %}}
+Here is *something in italic* in a shortcode. Here is **something in bold**.
+{{% /note %}}
+
+{{% caution title="Caution" %}}
+Here is *something in italic* in a shortcode. Here is **something in bold**.
+{{% /caution %}}
+
+{{% warn title="Warn" %}}
+Here is *something in italic* in a shortcode. Here is **something in bold**.
+{{% /warn %}}

content/hosting-and-deployment/_index.md

@@ -1,5 +1,5 @@
 ---
-title: Hosting and Deployment Overview
+title: Building Your Static Site
 linktitle:
 description: Build process, automated deployments, and popular hosting solutions.
 date: 2016-11-01

content/hosting-and-deployment/hosting-on-gitlab.md

@@ -1,5 +1,5 @@
 ---
-title: Hostingon GitLab
+title: Hosting on GitLab
 linktitle:
 description:
 date: 2017-02-01

themes/hugodocs/layouts/shortcodes/caution.html

@@ -0,0 +1,6 @@
+<div class="caution">
+	<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
+	<div class="shortcode-content">
+	{{.Inner}}
+	</div>
+</div>

themes/hugodocs/layouts/shortcodes/note.html

@@ -0,0 +1,6 @@
+<div class="note">
+	<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
+	<div class="shortcode-content">
+	{{.Inner}}
+	</div>
+</div>

themes/hugodocs/layouts/shortcodes/warn.html

@@ -0,0 +1,6 @@
+<div class="warn">
+	<h2>{{with .Get "title"}}{{.}}{{else}}Note{{end}}</h2>
+	<div class="shortcode-content">
+	{{.Inner}}
+	</div>
+</div>

themes/hugodocs/pipeline/scss/_variables.scss

@@ -12,8 +12,10 @@ $HUGE:1600px;
 $hugo-black:#000000;
 $hugo-white:#ffffff;
 $hugo-pink:#ff4088;
+$hugo-pink-dark:#C9177E;
 $hugo-blue:#0594CB;
-
+$hugo-yellow:#FCD804;
+$hugo-gold:#EBB951;
 $default-anchor-color:$hugo-pink;
 $default-anchor-weight: 500;
 $active-color: $default-anchor-color;

themes/hugodocs/pipeline/scss/components/_note-and-warn.scss

@@ -0,0 +1,48 @@
+.note,
+.caution,.warn {
+  display: block;
+  margin-bottom: 1em;
+  width: 100%;
+  h2 {
+    font-size: 1.1em;
+    color: $hugo-white;
+    width: 100%;
+    display: block;
+    margin: 0px;
+    padding: .25em 12px;
+    border: none;
+    outline: none;
+  }
+  .shortcode-content {
+    display: block;
+    margin: 0px;
+    padding: 12px;
+  }
+}
+
+.note {
+  > h2 {
+    background-color: $hugo-blue;
+  }
+  .shortcode-content {
+    background-color: lighten($hugo-blue, 50%);
+  }
+}
+
+.caution {
+  > h2 {
+    background-color: $hugo-gold;
+  }
+  .shortcode-content {
+  	background-color: lighten($hugo-gold, 30%);
+  }
+}
+
+.warn {
+  > h2 {
+    background-color: $hugo-pink-dark;
+  }
+  .shortcode-content {
+  	background-color: lighten($hugo-pink-dark, 50%);
+  }
+}

themes/hugodocs/pipeline/scss/layout/_site-navigation.scss

@@ -22,6 +22,9 @@
     display: inline-block;
     margin-left: auto;
     margin-right: auto;
+    @include MQ(L) {
+      margin-top: $site-header-height + 10px;
+    }
     a {
       color: $base-font-color;
       font-weight: $base-font-weight;

themes/hugodocs/pipeline/scss/style.scss

@@ -14,6 +14,7 @@
 @import 'components/buttons';
 @import 'components/lists';
 @import 'components/anchors';
+@import 'components/note-and-warn';
 // @import 'components/navigation-menu';
 
 //major layout parts/chrome