stripes for warnings

content/patterns/widgets/example2.md

@@ -22,7 +22,18 @@ tags = ["animated", "interactive"]
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
 
 {{<demo>}}
-
+<p>You must be having a laugh.</p>
+<style>
+p {
+  color: red !important;
+  font-family: cursive;
+}
+</style>
+<script>
+  demo.querySelector('p').addEventListener('click', function() {
+    alert('hello');
+  })
+</script>
 {{</demo>}}
 
 <p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>

themes/inclusive-pattern-docs/layouts/shortcodes/demo.html

@@ -3,18 +3,7 @@
   <div id="demo-{{ $uniq }}">
   </div>
   <template id="template-{{ $uniq }}">
-    <p>You must be joking.</p>
-    <style>
-    p {
-      color: red !important;
-      font-family: cursive;
-    }
-    </style>
-    <script>
-      demo.querySelector('p').addEventListener('click', function() {
-        alert('hello');
-      })
-    </script>
+    {{ .Inner }}
   </template>
   <script>
     (function() {

themes/inclusive-pattern-docs/static/css/styles.css

@@ -314,6 +314,17 @@ th:empty {
   margin-top: 0;
 }
 
+.note.warning {
+  border-left: 0;
+  background-image: url(images/stripe.svg);
+  background-size: 0.5rem auto;
+  background-repeat: repeat-y;
+}
+
+.note.warning > div {
+  margin-left: 1.25rem;
+}
+
 /* Tick lists */
 
 .ticks li {