Add "tip" shortcode and documentation

Closes rdwatters/hugo-docs-concept#59

.gitignore

@@ -1,2 +1,3 @@
 pipeline/node_modules
 ryans-notes.md
+themes/hugo-docs-concept/pipeline/node_modules

content/contribute/documentation.md

@@ -305,6 +305,8 @@ Previous versions of Hugo documentation used blockquotes to draw attention to te
 
 > Admonitions are specially marked "topics" that can appear anywhere an ordinary body element can. They contain arbitrary body elements. Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type. - [SourceForge][sourceforge]
 
+The Hugo docs contain three admonitions: `note`, `tip`, and `warning`.
+
 ### `note` Admonition
 
 Use the `note` shortcode when you want to draw attention to information subtly. `note` is intended to be less of an interruption in content than is `warning`.
@@ -335,6 +337,36 @@ Here is a piece of information I would like to draw your **attention** to.
 Here is a piece of information I would like to draw your **attention** to.
 {{% /note %}}
 
+### `tip` Admonition
+
+Use the `tip` shortcode when you want to give the reader advice. `tip`, like `note`, is intended to be less of an interruption in content than is `warning`.
+
+#### Example `tip` Input
+
+{{% code file="using-tip.md" %}}
+```markdown
+{{%/* tip */%}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{%/* /tip */%}}
+```
+{{% /code %}}
+
+#### Example `tip` Output
+
+{{% output file="tip-output.html" %}}
+```html
+{{% tip %}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{% /tip %}}
+```
+{{% /output %}}
+
+#### Example `tip` Display
+
+{{% tip %}}
+Here's a bit of advice to improve your productivity with Hugo.
+{{% /tip %}}
+
 ### `warning` Admonition
 
 Use the `warning` shortcode when you want to draw the user's attention to something important. A good usage example is for articulating breaking changes in Hugo versions, known bugs, or templating "gotchas."

themes/hugo-docs-concept/layouts/shortcodes/tip.html

@@ -0,0 +1,8 @@
+<aside class="admonition tip">
+	<div class="tip-icon">
+		{{partial "svg-icons/exclamation.svg" .}}
+	</div>
+	<!-- <h2 id="{{if .Get 0}}{{.Get 0 | urlize}}{{else}}tip{{end}}">{{if .Get 0}}{{.Get 0 | markdownify}}{{else}}Tip{{end}}</h2> -->
+	<!-- <h3>Tip</h3> -->
+	<div class="admonition-content">{{- .Inner -}}</div>
+</aside>

themes/hugo-docs-concept/pipeline/scss/components/_admonitions.scss

@@ -3,6 +3,7 @@
 }
 
 .note,
+.tip,
 .warning {
   display: block;
   margin-bottom: 20px;
@@ -19,10 +20,10 @@
     position: absolute;
     top: 20%;
     left: -12px;
-    background-color: white;
+    background:$body-bg-color;
   }
   h2 {
-    display:none;
+    display: none;
   }
   .admonition-content {
     display: block;
@@ -34,12 +35,13 @@
     p:last-child {
       margin-bottom: 0px;
     }
-    ul,ol {
+    ul,
+    ol {
       &:last-child {
-        margin-bottom:0px;
+        margin-bottom: 0px;
       }
       &:last-child + p {
-        margin-top:1em;
+        margin-top: 1em;
       }
     }
   }
@@ -53,6 +55,15 @@
   }
 }
 
+.tip {
+  border-color: $hugo-gold;
+  background-color: desaturate(lighten($hugo-yellow, 40%), 20%);
+  #exclamation-icon {
+    fill: $hugo-gold;
+
+  }
+}
+
 .warning {
   border-color: $hugo-pink;
   background-color: lighten($hugo-pink, 54%);