diff --git a/_config.yml b/_config.yml index 22451f5..5df8305 100644 --- a/_config.yml +++ b/_config.yml @@ -84,7 +84,10 @@ google_plus_one_size: medium # Google Plus Profile # Hidden: No visible button, just add author information to search results googleplus_user: 107837103594826869647 -googleplus_hidden: false +googleplus_hidden: true + +# Coderwall +coderwall_user: mic92 # Pinboard pinboard_user: diff --git a/sass/base/_color.scss b/sass/base/_color.scss index ec6ed3b..8dae36f 100644 --- a/sass/base/_color.scss +++ b/sass/base/_color.scss @@ -1,7 +1,7 @@ -$color-background: #eee; -$color-main: #258fb8; -$color-gray01: #666; -$color-gray02: #999; -$color-gray03: #ccc; -$color-gray04: #ddd; -$color-gray05: #fff; \ No newline at end of file +$color-background: #eee !default; +$color-main: #258fb8 !default; +$color-gray01: #666 !default; +$color-gray02: #999 !default; +$color-gray03: #ccc !default; +$color-gray04: #ddd !default; +$color-gray05: #fff !default; \ No newline at end of file diff --git a/sass/base/_font.scss b/sass/base/_font.scss index ac8b2ae..907e406 100644 --- a/sass/base/_font.scss +++ b/sass/base/_font.scss @@ -1,2 +1,17 @@ $font-default: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; \ No newline at end of file +$font-mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; + +$font-icon: FontAwesome; +$font-icon-path: "/font/fontawesome-webfont"; + +@font-face { + font-family: 'FontAwesome'; + src: url('#{$font-icon-path}.eot'); + src: url('#{$font-icon-path}.eot?#iefix') format('embedded-opentype'), + url('#{$font-icon-path}.woff') format('woff'), + url('#{$font-icon-path}.ttf') format('truetype'), + url('#{$font-icon-path}.svgz#FontAwesomeRegular') format('svg'), + url('#{$font-icon-path}.svg#FontAwesomeRegular') format('svg'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/sass/custom/_color.scss b/sass/custom/_color.scss new file mode 100644 index 0000000..7e3c604 --- /dev/null +++ b/sass/custom/_color.scss @@ -0,0 +1,7 @@ +// $color-background: #eee; +// $color-main: #258fb8; +// $color-gray01: #666; +// $color-gray02: #999; +// $color-gray03: #ccc; +// $color-gray04: #ddd; +// $color-gray05: #fff; \ No newline at end of file diff --git a/sass/parts/_archive.scss b/sass/parts/_archive.scss index 1a2009c..af8f764 100644 --- a/sass/parts/_archive.scss +++ b/sass/parts/_archive.scss @@ -14,7 +14,7 @@ width: 200px; position: absolute; top: 0; - padding-top: 30px; + padding-top: 15px; border-top: 1px solid #fff; &:before{ content: ""; @@ -30,6 +30,7 @@ } article{ margin-left: 200px; + padding: 15px 0; @media screen and (max-width: 600px){ margin-left: 0; &:first-of-type{ @@ -42,6 +43,7 @@ } .meta{ color: $color-gray02; + font-size: 0.9em; line-height: 2; margin-top: 15px; @media screen and (max-width: 600px){ @@ -49,8 +51,12 @@ } span{ margin-right: 30px; - padding-left: 30px; @include inline-block; + &:before{ + color: $color-gray03; + font: 1.3em $font-icon; + padding-right: 10px; + } } a{ color: $color-gray02; @@ -59,15 +65,9 @@ color: $color-gray01; } } - .date{ - background: image-url('date.png') 0 center no-repeat; - } - .tags{ - background: image-url('tags.png') 0 center no-repeat; - } - .comments{ - background: image-url('comments.png') 0 center no-repeat; - } + .date:before{content: "\f073";} + .tags:before{content: "\f02c";} + .comments:before{content: "\f075";} } } } \ No newline at end of file diff --git a/sass/parts/_article.scss b/sass/parts/_article.scss index 91f6273..77b9712 100644 --- a/sass/parts/_article.scss +++ b/sass/parts/_article.scss @@ -9,7 +9,8 @@ article{ @media screen and (max-width: 600px){ padding: 15px 0; } - h1.title{ + h2.title{ + font-size: 1.8em; font-weight: 300; line-height: 35px; margin-bottom: 20px; @@ -27,9 +28,16 @@ article{ } .more-link{ display: block; - margin-top: 20px; + margin-top: 16px; padding-left: 30px; - background: image-url('more.png') 0 center no-repeat; + position: relative; + &:before{ + content: "\f061"; + font: 1.3em $font-icon; + line-height: 1.6em; + position: absolute; + left: 0; + } } p, blockquote, ul, ol, dl, table, iframe, h1, h2, h3, h4, h5, h6, .video-container{ margin-top: 10px; @@ -96,11 +104,19 @@ article{ } } .caption{ - background: image-url('caption.png') 0 4px no-repeat; display: block; font-size: 0.9em; color: $color-gray02; padding-left: 25px; + position: relative; + &:before{ + content: "\f040"; + color: $color-gray03; + font: 1.3em $font-icon; + line-height: 1.6em; + position: absolute; + left: 0; + } } .video-container{ position: relative; diff --git a/sass/parts/_comment.scss b/sass/parts/_comment.scss index ead3ebc..05fa598 100644 --- a/sass/parts/_comment.scss +++ b/sass/parts/_comment.scss @@ -1,7 +1,7 @@ #comment{ padding: 30px 0; @include border-shadow(); - h1.title{ + h2.title{ font-size: 25px; font-weight: 300; line-height: 35px; diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index 41cd977..50ece11 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -9,11 +9,6 @@ $header-height: 30px; height: auto; position: relative; padding-bottom: 10px; - >.alignright{ - position: absolute; - top: 30px; - right: 0; - } } a{ color: $color-gray01; @@ -30,128 +25,265 @@ $header-height: 30px; float: none; } } - .menu{ - float: left; - margin-left: 30px; - @media screen and (max-width: 1040px){ - float: none; - margin-left: 0; - margin-top: 15px; +} +#main-nav{ + float: left; + margin-left: 30px; + @media screen and (max-width: 1040px){ + float: none; + margin-left: 0; + margin-top: 15px; + } + >ul{ + @media screen and (max-width: 600px){ + display: none; } - >ul{ - @media screen and (max-width: 600px){ - display: none; + >li{ + margin-left: 50px; + @include inline-block; + @media screen and (max-width: 1040px){ + margin-left: 0; + margin-right: 50px; + &:last-of-type{ + margin-right: 0; + } } - >li{ - margin-left: 50px; - @include inline-block; - @media screen and (max-width: 1040px){ - margin-left: 0; - margin-right: 50px; - &:last-of-type{ - margin-right: 0; + &:hover{ + >a{ + color: $color-main; + } + } + >a{ + padding: 38px 0; + margin-top: -38px; + &:after{ + content: "\f078"; + color: $color-gray03; + font: 12px $font-icon; + padding-left: 10px; + } + &:only-child{ + &:after{ + content: ""; } } + @media screen and (max-width: 1040px){ + padding: 18px 0; + } + } + } + ul{ + position: absolute; + top: 60px; + left: -15px; + z-index: 10; + white-space: nowrap; + background: $color-gray04; + border: 1px solid $color-gray03; + list-style: none; + display: none; + @media screen and (max-width: 1040px){ + top: 40px; + } + @include box-shadow(0 4px 8px rgba(0,0,0,0.1)); + @include border-radius(0 0 5px 5px); + ul{ + @include border-radius(0 5px 5px 5px); + } + li{ + @include border-shadow($color-background, $color-gray03); &:hover{ - >a{ - color: $color-main; + background: #d5d5d5; + } + &:first-of-type{ + border-top: none; + ul{ + @include border-radius(0 0 5px 5px); } } + &:last-of-type{ + border-bottom: none; + } >a{ - padding: 38px 30px 38px 0; - margin-top: -38px; - background: image-url('detail.png') right center no-repeat; - @media screen and (max-width: 1040px){ - padding: 18px 30px 18px 0; - &:only-child{ - padding-right: 0; - } + display: block; + padding: 5px 15px; + &:after{ + content: "\f054"; + color: $color-gray02; + font: 12px $font-icon; + padding-left: 10px; + } + &:hover{ + color: $color-gray01; } &:only-child{ - padding-right: 0; - background: none; + &:after{ + content: ""; + } } } } ul{ - position: absolute; - top: 60px; - left: -15px; - z-index: 10; - white-space: nowrap; - background: $color-gray04; - border: 1px solid $color-gray03; - list-style: none; - display: none; - @media screen and (max-width: 1040px){ - top: 40px; - } - @include box-shadow(0 4px 8px rgba(0,0,0,0.1)); - @include border-radius(0 0 5px 5px); - ul{ - @include border-radius(0 5px 5px 5px); - } - li{ - @include border-shadow($color-background, $color-gray03); - &:hover{ - background: #d5d5d5; - } - &:first-of-type{ - border-top: none; - ul{ - @include border-radius(0 0 5px 5px); - } - } - &:last-of-type{ - border-bottom: none; - } - >a{ - background: image-url('detail-sub.png') right center no-repeat; - display: block; - padding: 5px 30px 5px 15px; - &:hover{ - color: $color-gray01; - } - &:only-child{ - background: none; - padding-right: 15px; - } - } - } - ul{ - top: 0; - left: 100%; - } + top: 0; + left: 100%; } - li{ - position: relative; - &:hover{ - >ul{ - display: block; - } + } + li{ + position: relative; + &:hover{ + >ul{ + display: block; } } } - select{ - display: none; - margin-bottom: 10px; - @media screen and (max-width: 600px){ - display: block; + } + select{ + display: none; + margin-bottom: 10px; + @media screen and (max-width: 600px){ + display: block; + } + } +} +#mobile-nav{ + display: none; + height: 37px; + position: relative; + @media screen and (max-width: 600px){ + display: block; + } + a{ + display: block; + } + .button{ + cursor: pointer; + } + .container{ + display: none; + } + .menu{ + position: relative; + width: 100%; + .button{ + background: #f2f2f2; + border: 1px solid $color-gray04; + color: #999; + padding: 0 60px 0 10px; + position: relative; + @include border-radius(5px); + &:hover{ + color: #999; + } + &.on{ + color: #666; + @include border-radius(5px 5px 5px 0); + &:before{ + content: "\f077"; + } + } + &:before{ + content: "\f078"; + color: $color-gray04; + font: 16px $font-icon; + line-height: 30px; + position: absolute; + top: 0; + right: 40px; + } + } + .container{ + background: #f2f2f2; + border: 1px solid #ddd; + border-top: none; + position: absolute; + top: 31px; + z-index: 1; + @include border-radius(0 0 5px 5px); + ul{ + list-style: none; + ul{ + margin-left: 20px; + } + } + a{ + padding: 0 10px; } } } + .search{ + position: absolute; + top: 0; + right: 0; + .button{ + background: $color-gray04; + width: 30px; + height: 30px; + position: absolute; + top: 1px; + right: -1px; + @include border-radius(0 5px 5px 0); + &:before{ + content: "\f002"; + color: #f2f2f2; + font: 20px $font-icon; + line-height: 30px; + position: absolute; + top: 0; + left: 7px; + } + &.on{ + background: $color-gray03; + &:before{ + content: "\f00d"; + } + } + } + .container{ + position: absolute; + right: 51px; + z-index: 1; + } + input[type="text"]{ + background: #fff; + border: 1px solid $color-gray04; + border-right: none; + color: $color-gray02; + font: 13px $font-default; + height: 30px; + width: 100%; + padding: 0 10px; + @include border-radius(5px 0 0 5px); + } + } +} +#sub-nav{ + @media screen and (max-width: 1040px){ + position: absolute; + top: 30px; + right: 0; + } + @media screen and (max-width: 600px){ + display: none; + } .search{ float: left; margin-top: 1px; + position: relative; @media screen and (max-width: 1040px){ float: none; margin-top: 15px; } - @media screen and (max-width: 600px){ - margin-top: 40px; + &:before{ + content: "\f002"; + color: $color-gray03; + font: 18px $font-icon; + line-height: 30px; + position: absolute; + top: 0; + right: 125px; } input[type="text"]{ - background: image-url('search.png') 10px center no-repeat #f2f2f2; + background: #f2f2f2; color: $color-gray02; border: 1px solid $color-gray04; font: 13px $font-default; @@ -160,7 +292,7 @@ $header-height: 30px; @include transition(0.3s); @include border-radius(15px); &:focus, &:active{ - background: image-url('search.png') 10px center no-repeat #fff; + background: #fff; border-top: 1px solid $color-gray03; color: $color-gray01; outline: none; @@ -177,9 +309,6 @@ $header-height: 30px; margin-right: 0; } } - @media screen and (max-width: 600px){ - display: none; - } a{ @include border-radius(50%); @include inline-block; @@ -219,6 +348,27 @@ $header-height: 30px; border: 1px solid darken(rgb(175,182,202), 10%); } } + &.coderwall{ + background: image-url('social/coderwall.png') center no-repeat rgb(58,114,159); + border: 1px solid rgb(58,114,159); + &:hover{ + border: 1px solid darken(rgb(58,114,159), 10%); + } + } + &.pinboard{ + background: image-url('social/pinboard.png') center no-repeat rgb(0,102,200); + border: 1px solid rgb(58,114,159); + &:hover{ + border: 1px solid darken(rgb(0,102,255), 10%); + } + } + &.linkedin{ + background: image-url('social/linkedin.png') center no-repeat #005A87; + border: 1px solid #005A87; + &:hover{ + border: 1px solid darken(#005A87, 10%); + } + } &.pinterest{ background: image-url('social/pinterest.png') center no-repeat rgb(190,64,55); border: 1px solid rgb(190,64,55); diff --git a/sass/parts/_index.scss b/sass/parts/_index.scss index e20323b..833bf02 100644 --- a/sass/parts/_index.scss +++ b/sass/parts/_index.scss @@ -13,18 +13,31 @@ position: absolute; } .prev{ - background: image-url('back.png') 0 center no-repeat; padding-left: 30px; left: 0; + &:before{ + content: "\f060"; + font: 1.3em $font-icon; + position: absolute; + left: 0; + } } .next{ - background: image-url('more.png') right center no-repeat; padding-right: 30px; right: 0; + &:before{ + content: "\f061"; + font: 1.3em $font-icon; + position: absolute; + right: 0; + } } .center{ text-align: center; width: 100%; display: block; + @media screen and (max-width: 400px){ + display: none; + } } } \ No newline at end of file diff --git a/sass/parts/_post.scss b/sass/parts/_post.scss index fc4bf6d..cfad01f 100644 --- a/sass/parts/_post.scss +++ b/sass/parts/_post.scss @@ -1,5 +1,5 @@ .post{ - h1.title, .entry-content{ + h2.title, .entry-content{ margin-left: 200px; @media screen and (max-width: 800px){ margin-left: 0; @@ -23,19 +23,21 @@ } .date, .tags, .comments{ padding-left: 30px; + position: relative; + &:before{ + color: $color-gray03; + font: 1.3em $font-icon; + line-height: 1.6em; + position: absolute; + left: 0; + } @media screen and (max-width: 800px){ @include inline-block; margin-right: 30px; } } - .date{ - background: image-url('date.png') 0 center no-repeat; - } - .tags{ - background: image-url('tags.png') 0 center no-repeat; - } - .comments{ - background: image-url('comments.png') 0 center no-repeat; - } + .date:before{content: "\f073";} + .tags:before{content: "\f02c";} + .comments:before{content: "\f075";} } } \ No newline at end of file diff --git a/sass/screen.scss b/sass/screen.scss index 96025e3..1f83d49 100644 --- a/sass/screen.scss +++ b/sass/screen.scss @@ -1,5 +1,7 @@ @import "compass"; +@import "custom/color"; + @import "base"; @import "parts"; @import "plugins"; \ No newline at end of file diff --git a/source/_includes/archive_post.html b/source/_includes/archive_post.html index 2b006f6..65e923f 100644 --- a/source/_includes/archive_post.html +++ b/source/_includes/archive_post.html @@ -8,7 +8,7 @@

{{ date | date: "%Y" }}

{% endunless %}
-

{{post.title}}

+

{{post.title}}

{{ date | date: "%b %e" }} {% include post/categories.html %} diff --git a/source/_includes/article.html b/source/_includes/article.html index 1e1c835..1386156 100644 --- a/source/_includes/article.html +++ b/source/_includes/article.html @@ -1,12 +1,19 @@ {% if index %} -

{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}

+

+ {% if post.external-url %} + + {% else %} + + {% endif %} + {% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %} +

{{ content | excerpt }} {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %} {% if excerpted == 'true' %}{{ site.excerpt_link }}{% endif %}
{% else %} -

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

+

{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}

{{ content }}
{% endif %} diff --git a/source/_includes/banner.html b/source/_includes/banner.html index f91ce3b..af38f03 100644 --- a/source/_includes/banner.html +++ b/source/_includes/banner.html @@ -1,4 +1,4 @@ -{% if site.twitter_user %} +{% if site.twitter_user and site.twitter_tweet_count > 0 %}
-{% unless page.footer == false %} - {% include post/sharing.html %} +{% unless page.sharing == false %} + {% include post/sharing.html %} {% endunless %} {% if site.disqus_short_name and page.comments == true %}

Comments

{% include post/disqus_thread.html %}
-{% endif %} \ No newline at end of file +{% endif %} diff --git a/source/_layouts/post.html b/source/_layouts/post.html index bab0f87..eed607e 100644 --- a/source/_layouts/post.html +++ b/source/_layouts/post.html @@ -4,10 +4,12 @@ single: true ---
{% include article.html %}
-{% include post/sharing.html %} +{% unless page.sharing == false %} + {% include post/sharing.html %} +{% endunless %} {% if site.disqus_short_name and page.comments == true %}
-

Comments

+

Comments

{% include post/disqus_thread.html %}
{% endif %} \ No newline at end of file diff --git a/source/font/fontawesome-webfont.eot b/source/font/fontawesome-webfont.eot new file mode 100755 index 0000000..3f669a7 Binary files /dev/null and b/source/font/fontawesome-webfont.eot differ diff --git a/source/font/fontawesome-webfont.svg b/source/font/fontawesome-webfont.svg new file mode 100755 index 0000000..73c0ad9 --- /dev/null +++ b/source/font/fontawesome-webfont.svg @@ -0,0 +1,175 @@ + + + + +This is a custom SVG webfont generated by Font Squirrel. +Designer : Dave Gandy +Foundry : Fort Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/source/font/fontawesome-webfont.svgz b/source/font/fontawesome-webfont.svgz new file mode 100755 index 0000000..2a73cd7 Binary files /dev/null and b/source/font/fontawesome-webfont.svgz differ diff --git a/source/font/fontawesome-webfont.ttf b/source/font/fontawesome-webfont.ttf new file mode 100755 index 0000000..4972eb4 Binary files /dev/null and b/source/font/fontawesome-webfont.ttf differ diff --git a/source/font/fontawesome-webfont.woff b/source/font/fontawesome-webfont.woff new file mode 100755 index 0000000..6e4cb41 Binary files /dev/null and b/source/font/fontawesome-webfont.woff differ diff --git a/source/images/social/coderwall.png b/source/images/social/coderwall.png new file mode 100644 index 0000000..48e32cf Binary files /dev/null and b/source/images/social/coderwall.png differ diff --git a/source/images/social/linkedin.png b/source/images/social/linkedin.png new file mode 100644 index 0000000..1a7ae91 Binary files /dev/null and b/source/images/social/linkedin.png differ diff --git a/source/images/social/pinboard.png b/source/images/social/pinboard.png new file mode 100644 index 0000000..2961f30 Binary files /dev/null and b/source/images/social/pinboard.png differ diff --git a/source/javascripts/slash.js b/source/javascripts/slash.js index 6433ba0..5288572 100644 --- a/source/javascripts/slash.js +++ b/source/javascripts/slash.js @@ -14,41 +14,6 @@ }); }; - // Append menu for mobile device - var navigationMenu = function(){ - var appends = ''; - - var search = function(obj, level){ - var children = obj.children(), - link = children.eq(0), - _level = level + 1; - - appends += '