code.H3RALD.com — hastyscribe: df89b8a8ef28e091ca1b7920331580d220bf4b83

Added FontAwesome badge and link styles.

h3rald h3rald@h3rald.com

Sat, 10 May 2014 22:35:56 +0200

commit

df89b8a8ef28e091ca1b7920331580d220bf4b83

parent

9a2afe3d602a5066feec2ec167e23d58d8d12b73

9 files changed, 716 insertions(+), 87 deletions(-)

jump to

assets/styles/badges.less

assets/styles/elements.less

assets/styles/hastyscribe.css

assets/styles/hastyscribe.less

assets/styles/links.less

assets/styles/mixins.less

assets/styles/notes.less

test/test.htm

test/test.md

M assets/styles/badges.less → assets/styles/badges.less

@@ -11,7 +11,24 @@ .green-circle {.mix-circle(@bright-green)}
 .yellow-circle {.mix-circle(@bright-yellow)}
 .gray-circle {.mix-circle(@gray)}
 
-.star { .mix-symbol("\2605", @bright-yellow)}
-.heart {.mix-symbol("\2665", @bright-red)}
-.cross {.mix-symbol("\2718 ", @bright-red)}
-.check {.mix-symbol("\2714 ", @bright-green)}
+.star { .mix-symbol(@fa-var-star, @bright-yellow)}
+.heart {.mix-symbol(@fa-var-heart, @bright-red)}
+.square {.mix-symbol(@fa-var-square-o, @bright-red)}
+.check {.mix-symbol(@fa-var-check-square-o, @bright-green)}
+.lock {.mix-symbol(@fa-var-lock, @bright-yellow)}
+.unlock {.mix-symbol(@fa-var-unlock, @bright-yellow)}
+.bug {.mix-symbol(@fa-var-bug, @bright-red)}
+.tag {.mix-symbol(@fa-var-tag, @bright-blue)}
+.date {.mix-symbol(@fa-var-calendar, @bright-blue)}
+.attachment {.mix-symbol(@fa-var-paperclip, @text-color)}
+
+.btc {.mix-symbol(@fa-var-btc, @text-color, 90%, "")}
+.eur {.mix-symbol(@fa-var-eur, @text-color, 90%, "")}
+.usd {.mix-symbol(@fa-var-usd, @text-color, 90%, "")}
+.gbp {.mix-symbol(@fa-var-gbp, @text-color, 90%, "")}
+.jpy {.mix-symbol(@fa-var-jpy, @text-color, 90%, "")}
+.inr {.mix-symbol(@fa-var-inr, @text-color, 90%, "")}
+.krw {.mix-symbol(@fa-var-krw, @text-color, 90%, "")}
+.rub {.mix-symbol(@fa-var-rub, @text-color, 90%, "")}
+.try {.mix-symbol(@fa-var-try, @text-color, 90%, "")}
+

M assets/styles/elements.less → assets/styles/elements.less

@@ -154,11 +154,12 @@ }
 
 kbd, span.kbd {
   .mix-inline-box(@light-gray, @dark-gray, @gray);
+  font-family: @monospace-font;
   font-weight: bold;
   border-right: 1px solid @dark-gray;
   border-bottom: 1px solid @dark-gray;
-  line-height: 0.9em;
-  font-size: 85%;
+  line-height: 1em;
+  font-size: 80%;
   .mix-hyphens(none);
 }
 
@@ -217,12 +218,3 @@ &:hover {
     text-decoration:underline;
   }
 }
-a[href^="http://"]:before, 
-a[href^="https://"]:before,
-a[href^="ftp://"]:before,
-a[href^="sftp://"]:before,
-a[href^="mailto://"]:before
-{
-  content: "\2197";
-  font-size: 0.8em;
-}

M assets/styles/hastyscribe.css → assets/styles/hastyscribe.css

@@ -1801,11 +1801,12 @@ -webkit-background-clip: padding-box;
   background-clip: padding-box;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-family: "Source Code Pro", "Monaco", "DejaVu Sans Mono", "Courier New", monospace;
   font-weight: bold;
   border-right: 1px solid #333333;
   border-bottom: 1px solid #333333;
-  line-height: 0.9em;
-  font-size: 85%;
+  line-height: 1em;
+  font-size: 80%;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
@@ -1910,10 +1911,78 @@ }
 a[href^="http://"]:before,
 a[href^="https://"]:before,
 a[href^="ftp://"]:before,
-a[href^="sftp://"]:before,
+a[href^="sftp://"]:before {
+  content: "\f064" " ";
+  font-family: "FontAwesome";
+}
 a[href^="mailto://"]:before {
-  content: "\2197";
-  font-size: 0.8em;
+  content: "\f0e0" " ";
+  font-family: "FontAwesome";
+}
+a[href^="skype://"]:before,
+a[href*="skype.com"]:before {
+  content: "\f17e" " ";
+  font-family: "FontAwesome";
+}
+a[href*="twitter.com"]:before {
+  content: "\f099" " ";
+  font-family: "FontAwesome";
+}
+a[href*="linkedin.com"]:before {
+  content: "\f08c" " ";
+  font-family: "FontAwesome";
+}
+a[href*="foursquare.com"]:before {
+  content: "\f180" " ";
+  font-family: "FontAwesome";
+}
+a[href*="facebook.com"]:before {
+  content: "\f082" " ";
+  font-family: "FontAwesome";
+}
+a[href*="flickr.com"]:before {
+  content: "\f16e" " ";
+  font-family: "FontAwesome";
+}
+a[href*="github.com"]:before {
+  content: "\f09b" " ";
+  font-family: "FontAwesome";
+}
+a[href*="stackoverflow.com"]:before {
+  content: "\f16c" " ";
+  font-family: "FontAwesome";
+}
+a[href*="youtube.com"]:before {
+  content: "\f167" " ";
+  font-family: "FontAwesome";
+}
+a[href*="dropbox.com"]:before {
+  content: "\f16b" " ";
+  font-family: "FontAwesome";
+}
+a[href*="instagram.com"]:before {
+  content: "\f16d" " ";
+  font-family: "FontAwesome";
+}
+a[href*="plus.google.com"]:before {
+  content: "\f0d4" " ";
+  font-family: "FontAwesome";
+}
+a[href*="tumblr.com"]:before {
+  content: "\f174" " ";
+  font-family: "FontAwesome";
+}
+a[href*="vimeo.com"]:before {
+  content: "\f194" " ";
+  font-family: "FontAwesome";
+}
+a[href*="bitbucket.com"]:before {
+  content: "\f171" " ";
+  font-family: "FontAwesome";
+}
+a[href*="pinterest.com"]:before {
+  content: "\f0d2" " ";
+  font-family: "FontAwesome";
 }
 .note {
   -moz-background-clip: padding;
@@ -1926,9 +1995,9 @@ margin: 10px auto;
   padding: 7px 7px 0 7px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-  color: #555555;
-  background-color: #efefef;
-  border: 1px solid #efefef;
+  color: #264c72;
+  background-color: #d8ebf8;
+  border: 1px solid #264c72;
 }
 .note p {
   margin-top: 0;
@@ -1936,8 +2005,48 @@ margin-bottom: 0;
 }
 .note p:first-child {
   font-size: 105%;
-  font-style: italic;
-  color: #333333;
+  font-weight: bold;
+  color: #264c72;
+}
+.note p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #264c72;
+  content: "\f08d" " ";
+}
+.tip {
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  margin: 10px auto;
+  padding: 7px 7px 0 7px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+  color: #009926;
+  background-color: #d8f5cd;
+  border: 1px solid #009926;
+}
+.tip p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tip p:first-child {
+  font-size: 105%;
+  font-weight: bold;
+  color: #009926;
+}
+.tip p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #009926;
+  content: "\f0eb" " ";
 }
 .warning {
   -moz-background-clip: padding;
@@ -1947,12 +2056,12 @@ -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   margin: 10px auto;
+  padding: 7px 7px 0 7px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-  color: #555555;
-  background-color: #efefef;
-  border: 1px solid #555555;
-  padding: 7px 7px 0 7px;
+  color: #9c2400;
+  background-color: #f8d8d8;
+  border: 1px solid #9c2400;
 }
 .warning p {
   margin-top: 0;
@@ -1961,7 +2070,15 @@ }
 .warning p:first-child {
   font-size: 105%;
   font-weight: bold;
-  color: #333333;
+  color: #9c2400;
+}
+.warning p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #9c2400;
+  content: "\f071" " ";
 }
 .sidebar {
   -moz-background-clip: padding;
@@ -1976,7 +2093,7 @@ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
   color: #555555;
   background-color: #efefef;
-  border: 1px solid #efefef;
+  border: 1px solid #555555;
 }
 .sidebar p {
   margin-top: 0;
@@ -1985,10 +2102,19 @@ }
 .sidebar p:first-child {
   font-size: 105%;
   font-weight: bold;
-  color: #333333;
+  color: #444444;
+}
+.sidebar p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444444;
+  content: "\f05a" " ";
 }
 .note,
-.warning {
+.warning,
+.tip {
   width: 66.6667%;
 }
 @media screen and (max-width: 599px) {
@@ -2060,52 +2186,188 @@ margin-right: 3px;
   content: "[comment]";
 }
 .red-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .green-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #00cc33;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .yellow-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #f5b800;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .gray-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #999999;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .star:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #f5b800;
-  content: "\2605";
+  content: "\f005" " ";
 }
 .heart:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\2665";
+  content: "\f004" " ";
 }
-.cross:before {
+.square:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\2718 ";
+  content: "\f096" " ";
 }
 .check:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #00cc33;
-  content: "\2714 ";
+  content: "\f046" " ";
+}
+.lock:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #f5b800;
+  content: "\f023" " ";
+}
+.unlock:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #f5b800;
+  content: "\f09c" " ";
+}
+.bug:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #cc3300;
+  content: "\f188" " ";
+}
+.tag:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #0f4bff;
+  content: "\f02b" " ";
+}
+.date:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #0f4bff;
+  content: "\f073" " ";
+}
+.attachment:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #333333;
+  content: "\f0c6" " ";
+}
+.btc:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f15a" "";
+}
+.eur:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f153" "";
+}
+.usd:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f155" "";
+}
+.gbp:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f154" "";
+}
+.jpy:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f157" "";
+}
+.inr:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f156" "";
+}
+.krw:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f159" "";
+}
+.rub:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f158" "";
+}
+.try:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f195" "";
 }
 .headings h1 {
   font-size: 2em;

M assets/styles/hastyscribe.less → assets/styles/hastyscribe.less

@@ -5,6 +5,7 @@ @import "fa_icons.less";
 @import "mixins.less";
 @import "github.less";
 @import "elements.less";
+@import "links.less";
 @import "notes.less";
 @import "badges.less";
 @import "headings.less";

A assets/styles/links.less

@@ -0,0 +1,22 @@ 
+a[href^="http://"], 
+a[href^="https://"],
+a[href^="ftp://"],
+a[href^="sftp://"]{ .mix-link-icon(@fa-var-share);}
+a[href^="mailto://"] { .mix-link-icon(@fa-var-envelope);}
+a[href^="skype://"], a[href*="skype.com"] { .mix-link-icon(@fa-var-skype);}
+a[href*="twitter.com"] { .mix-link-icon(@fa-var-twitter); }
+a[href*="linkedin.com"] { .mix-link-icon(@fa-var-linkedin-square); }
+a[href*="foursquare.com"] { .mix-link-icon(@fa-var-foursquare); }
+a[href*="facebook.com"] { .mix-link-icon(@fa-var-facebook-square); }
+a[href*="flickr.com"] { .mix-link-icon(@fa-var-flickr); }
+a[href*="github.com"] { .mix-link-icon(@fa-var-github); }
+a[href*="stackoverflow.com"] { .mix-link-icon(@fa-var-stack-overflow); }
+a[href*="youtube.com"] { .mix-link-icon(@fa-var-youtube); }
+a[href*="dropbox.com"] { .mix-link-icon(@fa-var-dropbox); }
+a[href*="instagram.com"] { .mix-link-icon(@fa-var-instagram); }
+a[href*="plus.google.com"] { .mix-link-icon(@fa-var-google-plus-square); }
+a[href*="tumblr.com"] { .mix-link-icon(@fa-var-tumblr-square); }
+a[href*="vimeo.com"] { .mix-link-icon(@fa-var-vimeo-square); }
+a[href*="bitbucket.com"] { .mix-link-icon(@fa-var-bitbucket); }
+a[href*="pinterest.com"] { .mix-link-icon(@fa-var-pinterest); }
+

M assets/styles/mixins.less → assets/styles/mixins.less

@@ -51,17 +51,19 @@ .mix-green-badge (@text){
   .mix-badge(@text, @bright-green);
 }
 
-.mix-symbol (@symbol, @color, @size:100%){
+.mix-symbol (@symbol, @color, @size:100%, @space:" "){
   &:before {
+    font-family: "FontAwesome";
     font-style: normal;
+    font-weight: normal;
     font-size: @size;
     color: @color;
-    content: @symbol;
+    content: @symbol @space;
   }
 }
 
 .mix-circle (@color, @size:100%){
-  .mix-symbol("\25CF", @color, @size);
+  .mix-symbol(@fa-var-circle, @color, @size);
 }
 
 .mix-hyphens (@val) {
@@ -71,3 +73,10 @@ -ms-hyphens: @val;
 	-o-hyphens: @val; 
 	hyphens: @val;
 }
+
+.mix-link-icon (@icon) {
+  &:before {
+    content: @icon " ";
+    font-family: "FontAwesome";
+  }
+}

M assets/styles/notes.less → assets/styles/notes.less

@@ -1,22 +1,37 @@ 
 // TODO
 
 .note {
-  .mix-box(@light-gray, @gray-5, @light-gray);
+  .mix-box(@light-blue, @dark-blue, @dark-blue);
   p {
     margin-top: 0;
     margin-bottom: 0;
 
     &:first-child {
       font-size: 105%;
-      font-style: italic;
-      color: @text-color;
+      font-weight: bold;
+      color: @dark-blue;
+      .mix-symbol(@fa-var-thumb-tack, @dark-blue)
+    }
+  }
+}
+
+.tip {
+  .mix-box(@light-green, @dark-green, @dark-green);
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:first-child {
+      font-size: 105%;
+      font-weight: bold;
+      color: @dark-green;
+      .mix-symbol(@fa-var-lightbulb-o, @dark-green)
     }
   }
 }
 
 .warning {
-  .mix-box(@light-gray, @gray-5, @gray-5);
-  padding:7px 7px 0 7px;
+  .mix-box(@light-red, @dark-red, @dark-red);
   p {
     margin-top: 0;
     margin-bottom: 0;
@@ -24,13 +39,14 @@ 
     &:first-child {
       font-size: 105%;
       font-weight: bold;
-      color: @text-color;
+      color: @dark-red;
+      .mix-symbol(@fa-var-exclamation-triangle, @dark-red)
     }
   }
 }
 
 .sidebar {
-  .mix-box(@light-gray, @gray-5, @light-gray);
+  .mix-box(@light-gray, @gray-5, @gray-5);
   p {
     margin-top: 0;
     margin-bottom: 0;
@@ -38,12 +54,13 @@ 
     &:first-child {
       font-size: 105%;
       font-weight: bold;
-      color: @text-color;
+      color: @gray-4;
+      .mix-symbol(@fa-var-info-circle, @gray-4)
     }
   }
 }
 
-.note, .warning {
+.note, .warning, .tip {
   width: 66.6667%;
 }

M test/test.htm → test/test.htm

@@ -1858,11 +1858,12 @@ -webkit-background-clip: padding-box;
   background-clip: padding-box;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  font-family: "Source Code Pro", "Monaco", "DejaVu Sans Mono", "Courier New", monospace;
   font-weight: bold;
   border-right: 1px solid #333333;
   border-bottom: 1px solid #333333;
-  line-height: 0.9em;
-  font-size: 85%;
+  line-height: 1em;
+  font-size: 80%;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
@@ -1967,10 +1968,78 @@ }
 a[href^="http://"]:before,
 a[href^="https://"]:before,
 a[href^="ftp://"]:before,
-a[href^="sftp://"]:before,
+a[href^="sftp://"]:before {
+  content: "\f064" " ";
+  font-family: "FontAwesome";
+}
 a[href^="mailto://"]:before {
-  content: "\2197";
-  font-size: 0.8em;
+  content: "\f0e0" " ";
+  font-family: "FontAwesome";
+}
+a[href^="skype://"]:before,
+a[href*="skype.com"]:before {
+  content: "\f17e" " ";
+  font-family: "FontAwesome";
+}
+a[href*="twitter.com"]:before {
+  content: "\f099" " ";
+  font-family: "FontAwesome";
+}
+a[href*="linkedin.com"]:before {
+  content: "\f08c" " ";
+  font-family: "FontAwesome";
+}
+a[href*="foursquare.com"]:before {
+  content: "\f180" " ";
+  font-family: "FontAwesome";
+}
+a[href*="facebook.com"]:before {
+  content: "\f082" " ";
+  font-family: "FontAwesome";
+}
+a[href*="flickr.com"]:before {
+  content: "\f16e" " ";
+  font-family: "FontAwesome";
+}
+a[href*="github.com"]:before {
+  content: "\f09b" " ";
+  font-family: "FontAwesome";
+}
+a[href*="stackoverflow.com"]:before {
+  content: "\f16c" " ";
+  font-family: "FontAwesome";
+}
+a[href*="youtube.com"]:before {
+  content: "\f167" " ";
+  font-family: "FontAwesome";
+}
+a[href*="dropbox.com"]:before {
+  content: "\f16b" " ";
+  font-family: "FontAwesome";
+}
+a[href*="instagram.com"]:before {
+  content: "\f16d" " ";
+  font-family: "FontAwesome";
+}
+a[href*="plus.google.com"]:before {
+  content: "\f0d4" " ";
+  font-family: "FontAwesome";
+}
+a[href*="tumblr.com"]:before {
+  content: "\f174" " ";
+  font-family: "FontAwesome";
+}
+a[href*="vimeo.com"]:before {
+  content: "\f194" " ";
+  font-family: "FontAwesome";
+}
+a[href*="bitbucket.com"]:before {
+  content: "\f171" " ";
+  font-family: "FontAwesome";
+}
+a[href*="pinterest.com"]:before {
+  content: "\f0d2" " ";
+  font-family: "FontAwesome";
 }
 .note {
   -moz-background-clip: padding;
@@ -1983,9 +2052,9 @@ margin: 10px auto;
   padding: 7px 7px 0 7px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-  color: #555555;
-  background-color: #efefef;
-  border: 1px solid #efefef;
+  color: #264c72;
+  background-color: #d8ebf8;
+  border: 1px solid #264c72;
 }
 .note p {
   margin-top: 0;
@@ -1993,10 +2062,18 @@ margin-bottom: 0;
 }
 .note p:first-child {
   font-size: 105%;
-  font-style: italic;
-  color: #333333;
+  font-weight: bold;
+  color: #264c72;
+}
+.note p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #264c72;
+  content: "\f08d" " ";
 }
-.warning {
+.tip {
   -moz-background-clip: padding;
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
@@ -2004,12 +2081,44 @@ -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   margin: 10px auto;
+  padding: 7px 7px 0 7px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-  color: #555555;
-  background-color: #efefef;
-  border: 1px solid #555555;
+  color: #009926;
+  background-color: #d8f5cd;
+  border: 1px solid #009926;
+}
+.tip p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.tip p:first-child {
+  font-size: 105%;
+  font-weight: bold;
+  color: #009926;
+}
+.tip p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #009926;
+  content: "\f0eb" " ";
+}
+.warning {
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  margin: 10px auto;
   padding: 7px 7px 0 7px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+  color: #9c2400;
+  background-color: #f8d8d8;
+  border: 1px solid #9c2400;
 }
 .warning p {
   margin-top: 0;
@@ -2018,7 +2127,15 @@ }
 .warning p:first-child {
   font-size: 105%;
   font-weight: bold;
-  color: #333333;
+  color: #9c2400;
+}
+.warning p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #9c2400;
+  content: "\f071" " ";
 }
 .sidebar {
   -moz-background-clip: padding;
@@ -2033,7 +2150,7 @@ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
   color: #555555;
   background-color: #efefef;
-  border: 1px solid #efefef;
+  border: 1px solid #555555;
 }
 .sidebar p {
   margin-top: 0;
@@ -2042,10 +2159,19 @@ }
 .sidebar p:first-child {
   font-size: 105%;
   font-weight: bold;
-  color: #333333;
+  color: #444444;
+}
+.sidebar p:first-child:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444444;
+  content: "\f05a" " ";
 }
 .note,
-.warning {
+.warning,
+.tip {
   width: 66.6667%;
 }
 @media screen and (max-width: 599px) {
@@ -2117,52 +2243,188 @@ margin-right: 3px;
   content: "[comment]";
 }
 .red-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .green-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #00cc33;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .yellow-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #f5b800;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .gray-circle:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #999999;
-  content: "\25CF";
+  content: "\f111" " ";
 }
 .star:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #f5b800;
-  content: "\2605";
+  content: "\f005" " ";
 }
 .heart:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\2665";
+  content: "\f004" " ";
 }
-.cross:before {
+.square:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #cc3300;
-  content: "\2718 ";
+  content: "\f096" " ";
 }
 .check:before {
+  font-family: "FontAwesome";
   font-style: normal;
+  font-weight: normal;
   font-size: 100%;
   color: #00cc33;
-  content: "\2714 ";
+  content: "\f046" " ";
+}
+.lock:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #f5b800;
+  content: "\f023" " ";
+}
+.unlock:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #f5b800;
+  content: "\f09c" " ";
+}
+.bug:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #cc3300;
+  content: "\f188" " ";
+}
+.tag:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #0f4bff;
+  content: "\f02b" " ";
+}
+.date:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #0f4bff;
+  content: "\f073" " ";
+}
+.attachment:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 100%;
+  color: #333333;
+  content: "\f0c6" " ";
+}
+.btc:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f15a" "";
+}
+.eur:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f153" "";
+}
+.usd:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f155" "";
+}
+.gbp:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f154" "";
+}
+.jpy:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f157" "";
+}
+.inr:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f156" "";
+}
+.krw:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f159" "";
+}
+.rub:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f158" "";
+}
+.try:before {
+  font-family: "FontAwesome";
+  font-style: normal;
+  font-weight: normal;
+  font-size: 90%;
+  color: #333333;
+  content: "\f195" "";
 }
 .headings h1 {
   font-size: 2em;
@@ -2255,6 +2517,7 @@ <li><a href="#Inline.Styles">Inline Styles</a>
   <ul>
    <li><a href="#Text.Decorations">Text Decorations</a></li>
    <li><a href="#SmartyPants.substitutions">SmartyPants substitutions</a></li>
+   <li><a href="#Links">Links</a></li>
    <li><a href="#Other.HTML.inline.styles">Other HTML inline styles</a></li>
   </ul>
   </li>
@@ -2271,6 +2534,7 @@ <ul>
    <li><a href="#Codeblock">Codeblock</a></li>
    <li><a href="#Blockquote">Blockquote</a></li>
    <li><a href="#Notes">Notes</a></li>
+   <li><a href="#Tip">Tip</a></li>
    <li><a href="#Warnings">Warnings</a></li>
    <li><a href="#Sidebars">Sidebars</a></li>
    <li><a href="#Addresses">Addresses</a></li>
@@ -2293,6 +2557,16 @@ <h3 id="SmartyPants.substitutions">SmartyPants substitutions</h3>
 
 <p>&trade;, &reg;, &frac14;, &frac12;, &mdash;, &ndash;, A<sup>B+2</sup>, &hellip;</p>
 
+<h3 id="Links">Links</h3>
+
+<p><a href="https://h3rald.com">H3RALD.com</a></p>
+
+<p><a href="mailto://h3rald@h3rald.com">h3rald@h3rad.com</a></p>
+
+<p><a href="https://twitter.com/h3rald">@h3rald</a></p>
+
+<p><a href="http://it.linkedin.com/in/fabiocevasco">fabiocevasco</a></p>
+
 <h3 id="Other.HTML.inline.styles">Other HTML inline styles</h3>
 
 <ul>
@@ -2372,9 +2646,15 @@ <div class="note"><p>Note</p>
 
 <p>This is a note.</p></div>
 
+<h3 id="Tip">Tip</h3>
+
+<div class="tip"><p>Tip</p>
+
+<p>This is a tip.</p></div>
+
 <h3 id="Warnings">Warnings</h3>
 
-<div class="warning"><p>Important</p>
+<div class="warning"><p>Warning</p>
 
 <p>This is an important note.</p></div>
 
@@ -2422,10 +2702,16 @@ 
 <ul>
 <li><span class="todo">Do Something</span></li>
 <li><span class="fixme">Do something</span></li>
-<li><span class="comment">This is a comment</span></li>
+<li><span class="draftcomment">This is a comment</span></li>
 <li><span class="red-circle">Red circle</span> <span class="yellow-circle">Yellow circle</span> <span class="green-circle">Green circle</span> <span class="gray-circle">Gray circle</span></li>
 <li><span class="star"></span> <span class="heart"></span></li>
-<li><span class="cross">no</span> <span class="check">yes!</span></li>
+<li><span class="square">no</span> <span class="check">yes!</span></li>
+<li><span class="lock">locked</span> <span class="unlock">unlocked</span></li>
+<li><span class="bug">bug</span></li>
+<li><span class="date">tomorrow</span></li>
+<li><span class="tag">tag</span></li>
+<li><span class="attachment">test.txt</span></li>
+<li><span class="eur">100</span> <span class="gbp">100</span> <span class="usd">100</span> <span class="rub">100</span> <span class="jpy">100</span> <span class="btc">100</span> <span class="try">100</span> <span class="krw">100</span> <span class="inr">100</span></li>
 </ul>

M test/test.md → test/test.md

@@ -12,6 +12,16 @@ ### SmartyPants substitutions
 
 (TM), (R), 1/4, 1/2, ---, --, A^(B+2), ... 
 
+### Links
+
+[H3RALD.com](https://h3rald.com)
+
+[h3rald@h3rad.com](mailto://h3rald@h3rald.com)
+
+[@h3rald](https://twitter.com/h3rald)
+
+[fabiocevasco](http://it.linkedin.com/in/fabiocevasco)
+
 ### Other HTML inline styles
 
 * kbd: <kbd>CTRL</kbd>+<kbd>C</kbd>
@@ -78,11 +88,18 @@ > Note
 > 
 > This is a note.
 
+### Tip
+
+> %tip%
+> Tip
+> 
+> This is a tip.
+
 
 ### Warnings
 
 > %warning%
-> Important
+> Warning
 > 
 > This is an important note.
 
@@ -114,9 +131,15 @@ ## Badges
 
 * [Do Something](class:todo)
 * [Do something](class:fixme) 
-* [This is a comment](class:comment)
+* [This is a comment](class:draftcomment)
 * [Red circle](class:red-circle) [Yellow circle](class:yellow-circle) [Green circle](class:green-circle) [Gray circle](class:gray-circle)
 * [](class:star) [](class:heart) 
-* [no](class:cross) [yes!](class:check)
+* [no](class:square) [yes!](class:check)
+* [locked](class:lock) [unlocked](class:unlock)
+* [bug](class:bug)
+* [tomorrow](class:date)
+* [tag](class:tag)
+* [test.txt](class:attachment)
+* [100](class:eur) [100](class:gbp) [100](class:usd) [100](class:rub) [100](class:jpy) [100](class:btc) [100](class:try) [100](class:krw) [100](class:inr)
 
 ---

all repos — hastyscribe @ df89b8a8ef28e091ca1b7920331580d220bf4b83

A professional markdown compiler.