From 8cb79404d59f22c50b675770594c3ea3bb2a509c Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Tue, 5 Jun 2012 00:07:23 -0500 Subject: [PATCH] Added support for using text based social sharing links instead of javascript widgets which may track users and do trigger crazy high http requests. Also added a custom sharing template file for injecting any other sharing widget into the sharing section after a post --- .themes/classic/sass/base/_theme.scss | 3 +- .themes/classic/sass/partials/_blog.scss | 2 +- .themes/classic/sass/partials/_sharing.scss | 47 ++++++++++++++++++ .../classic/sass/partials/sidebar/_base.scss | 4 +- .../source/_includes/after_footer.html | 2 + .../source/_includes/custom/sharing.html | 3 ++ .../source/_includes/facebook_like.html | 2 +- .../source/_includes/post/sharing.html | 19 +++++-- .themes/classic/source/images/facebook.png | Bin 0 -> 209 bytes .themes/classic/source/images/googleplus.png | Bin 0 -> 365 bytes .themes/classic/source/images/twitter.png | Bin 0 -> 302 bytes _config.yml | 7 ++- 12 files changed, 79 insertions(+), 10 deletions(-) create mode 100644 .themes/classic/source/_includes/custom/sharing.html create mode 100644 .themes/classic/source/images/facebook.png create mode 100644 .themes/classic/source/images/googleplus.png create mode 100644 .themes/classic/source/images/twitter.png diff --git a/.themes/classic/sass/base/_theme.scss b/.themes/classic/sass/base/_theme.scss index 7f3fa5c..076080f 100644 --- a/.themes/classic/sass/base/_theme.scss +++ b/.themes/classic/sass/base/_theme.scss @@ -62,9 +62,10 @@ $page-border-bottom: darken($footer-bg, 5) !default; /* Core theme application */ a { + color: $link-color; @include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); } -aside.sidebar a { +.sidebar a { @include link-colors($sidebar-link-color, $hover: $sidebar-link-color-hover, $focus: $sidebar-link-color-hover, $active: $sidebar-link-color-active); } a { diff --git a/.themes/classic/sass/partials/_blog.scss b/.themes/classic/sass/partials/_blog.scss index 1d0db04..189f1e9 100644 --- a/.themes/classic/sass/partials/_blog.scss +++ b/.themes/classic/sass/partials/_blog.scss @@ -19,7 +19,7 @@ article { } .blog-index & { background: none; padding-bottom: 0; } p { - font-size: .9em; + font-size: .8em; margin: 0; color: $text-color-light; &.meta { @extend .sans; position: absolute; top: 0; } diff --git a/.themes/classic/sass/partials/_sharing.scss b/.themes/classic/sass/partials/_sharing.scss index 3eecb48..e6a220a 100644 --- a/.themes/classic/sass/partials/_sharing.scss +++ b/.themes/classic/sass/partials/_sharing.scss @@ -1,3 +1,37 @@ +@mixin social-button-bg($img, $color: #444) { + color: $color; + &:visited, &:hover, &:visited:hover { color: $color; } + position: relative; + padding-left: image-width($img) + 6px; + &:before { + content: ""; + background: image-url($img) no-repeat center center; + width: image-width($img); + height: image-height($img); + display: inline-block; + position: absolute; left: 3px; + top: 3px; + } +} + +.simple-social-button { + display: inline-block; + border: 1px solid #ccc; + background-color: #e5e5e5; + @include background-image(linear-gradient(#fff, #ddd)); + &:hover { + @include background-image(linear-gradient(#f5f5f5, #ccc)); + border-color: #b5b5b5; + background-color: #ddd; + } + padding: .2em .5em .1em; line-height: 1.45em; + font-size: 13px; + font-weight: bold; + text-decoration: none; + text-shadow: #fff 0 1px; + @include border-radius(.3em); +} + .sharing { p.meta + & { padding: { top: 1em; left: 0; } @@ -6,3 +40,16 @@ } #fb-root { display: none; } + +.googleplus-share { + @extend .simple-social-button; + @include social-button-bg('googleplus.png', #db583b); +} +.facebook-share { + @extend .simple-social-button; + @include social-button-bg('facebook.png', #4e5a9b); +} +.twitter-share, .sidebar a.twitter-follow-button { + @extend .simple-social-button; + @include social-button-bg('twitter.png'); +} diff --git a/.themes/classic/sass/partials/sidebar/_base.scss b/.themes/classic/sass/partials/sidebar/_base.scss index 5441304..83d70cc 100644 --- a/.themes/classic/sass/partials/sidebar/_base.scss +++ b/.themes/classic/sass/partials/sidebar/_base.scss @@ -1,7 +1,7 @@ .side-shadow-border { @include box-shadow(lighten($sidebar-bg, 5) 0 1px); } -aside.sidebar { +.sidebar { overflow: hidden; color: $sidebar-color; text-shadow: lighten($sidebar-bg, 8) 0 1px; @@ -44,7 +44,7 @@ aside.sidebar { color: inherit; @include transition(color .5s); } - &:hover a { + &:hover p a, &:hover li a { color: $sidebar-link-color; &:hover { color: $sidebar-link-color-hover; } } diff --git a/.themes/classic/source/_includes/after_footer.html b/.themes/classic/source/_includes/after_footer.html index 08b8e34..2aee47f 100644 --- a/.themes/classic/source/_includes/after_footer.html +++ b/.themes/classic/source/_includes/after_footer.html @@ -1,5 +1,7 @@ {% include disqus.html %} +{% unless site.do_not_track %} {% include facebook_like.html %} {% include google_plus_one.html %} {% include twitter_sharing.html %} +{% endunless %} {% include custom/after_footer.html %} diff --git a/.themes/classic/source/_includes/custom/sharing.html b/.themes/classic/source/_includes/custom/sharing.html new file mode 100644 index 0000000..c209d7e --- /dev/null +++ b/.themes/classic/source/_includes/custom/sharing.html @@ -0,0 +1,3 @@ +{% comment %} +You can add sharing buttons here. Just so you know, some services may use these buttons to track visitors to your site, and also these can trigger lots of http requests slowing your site down for low bandwidth and mobile users. +{% endcomment %} diff --git a/.themes/classic/source/_includes/facebook_like.html b/.themes/classic/source/_includes/facebook_like.html index 74f9130..83734c5 100644 --- a/.themes/classic/source/_includes/facebook_like.html +++ b/.themes/classic/source/_includes/facebook_like.html @@ -1,6 +1,6 @@ {% if site.facebook_like %}
-