all repos — hastystyles @ caa3a088fd6a12f5c561c530e55f24c8b8b01516

The stylesheets for HastyScrybe and HastySite.

Added FontAwesome badge and link styles.
h3rald h3rald@h3rald.com
Sat, 10 May 2014 22:35:56 +0200
commit

caa3a088fd6a12f5c561c530e55f24c8b8b01516

parent

f542b9a763cc0f363228a4c219fd59ec24879b4a

M styles/badges.lessstyles/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.lessstyles/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.cssstyles/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.lessstyles/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.lessstyles/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.lessstyles/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%; }