code.H3RALD.com — hastystyles: caa3a088fd6a12f5c561c530e55f24c8b8b01516

Added FontAwesome badge and link styles.

h3rald h3rald@h3rald.com

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

commit

caa3a088fd6a12f5c561c530e55f24c8b8b01516

parent

f542b9a763cc0f363228a4c219fd59ec24879b4a

7 files changed, 374 insertions(+), 54 deletions(-)

jump to

styles/badges.less

styles/elements.less

styles/hastyscribe.css

styles/hastyscribe.less

styles/links.less

styles/mixins.less

styles/notes.less

M styles/badges.less → 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 styles/elements.less → 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 styles/hastyscribe.css → 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 styles/hastyscribe.less → 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 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 styles/mixins.less → 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 styles/notes.less → 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%;
 }

all repos — hastystyles @ caa3a088fd6a12f5c561c530e55f24c8b8b01516

The stylesheets for HastyScrybe and HastySite.