Styling of sidenotes and important notes.

docs/sass/defold-md.sass

@@ -19,6 +19,7 @@ body
   line-height: 1.44em
 
 .documentation
+  position: relative
   width: 682px
   padding: 24px
   margin-left: auto
@@ -75,16 +76,44 @@ body
     font-size: 1rem
     padding: 0.5em
 
-  .sidenote,
-  .important
-    padding: 0.1em 1em
-    background-color: rgb(255, 247, 212)
+  .note
+    position: relative
+
+  .sidenote
+    position: absolute
+    right: -18em
+    width: 14em
+    transform: translateY(-50%)
+    background-color: #fff7d4
     outline-style: solid
     outline-width: 1px
     outline-offset: -1px
+    outline-color: #e3d9aa
+    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .04)
+
+    .note-content
+      font-size: 80%
+      padding: .6em 1.2em
 
   .important
-    background-color: rgb(255, 147, 112)
+    border: 1px solid #fd6623
+    background-color: #fff7d4
+    box-shadow: 0 3px 0 0 rgba(0, 0, 0, .04)
+    margin: 1.25rem 0
+
+    .note-icon
+      color: #fd6623
+      display: table-cell
+      width: 3em
+      text-align: center
+
+    .note-icon::before
+      font-family: 'fontello'
+      content: '\e871'
+
+    .note-content
+      display: table-cell
+      padding: 1em 1em 1em 0em
 
   pre
     font-family: 'Source Code Pro', monospace

gulpfile.js

@@ -49,8 +49,21 @@ md.use(md_deflist);
 md.use(md_attrs);
 md.use(md_sub);
 md.use(md_sup);
-md.use(md_container, 'sidenote', {});
-md.use(md_container, 'important', {});
+
+md.use(md_container, 'sidenote', { render: rendernote });
+md.use(md_container, 'important', { render: rendernote });
+
+// Notes are rendered as two divs so they can be styled right
+function rendernote(tokens, idx) {
+    if (tokens[idx].nesting === 1) {
+      // opening tag
+      var type = tokens[idx].info.trim().match(/^(\w+).*$/)[1];
+      return '<div class="note ' + type + '"><div class="note-icon"></div><div class="note-content">';
+    } else {
+      // closing tag
+      return '</div></div>\n';
+    }
+};
 
 function slugname(str) {
     return '_' + slugify(str, '_').toLowerCase();