diff --git a/_includes/_social-share.html b/_includes/_social-share.html new file mode 100644 index 000000000000..d192e5cde008 --- /dev/null +++ b/_includes/_social-share.html @@ -0,0 +1,14 @@ +
+

Share on

+ +
\ No newline at end of file diff --git a/_layouts/page.html b/_layouts/page.html index 0a41223f7143..919947aabec6 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -36,6 +36,10 @@

{{ page.title }}

{{ content }} + {% if page.share != false %} +
+ {% include _social-share.html %} + {% endif %}
{% if site.owner.disqus-shortname and page.comments == true %}
diff --git a/_layouts/post.html b/_layouts/post.html index 84427b39312f..c789a9badab7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -44,6 +44,7 @@

+ {% if page.share != false %}{% include _social-share.html %}{% endif %} diff --git a/_sass/page.scss b/_sass/page.scss index cdcb36abfd8c..528cd714c6f4 100644 --- a/_sass/page.scss +++ b/_sass/page.scss @@ -561,6 +561,58 @@ $button-size: 1.5rem; } } +/* Social sharing links */ +/* Social media brand buttons */ +.social-share { + margin-bottom: 0px + $doc-line-height; + margin-bottom: 0rem + ($doc-line-height / $doc-font-size); + ul, li { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + } + $social: + (facebook, $facebook-color), + (flickr, $flickr-color), + (foursquare, $foursquare-color), + (google-plus, $google-plus-color), + (instagram, $instagram-color), + (linkedin, $linkedin-color), + (pinterest, $pinterest-color), + (rss, $rss-color), + (tumblr, $tumblr-color), + (twitter, $twitter-color), + (vimeo, $vimeo-color), + (youtube, $youtube-color); + @each $socialnetwork, $color in $social { + .#{$socialnetwork} { + background: $color; + } + } + a { + padding: 8px 20px; + text-decoration: none !important; + text-transform: uppercase; + @include font-rem(14); + font-family: $heading-font; + font-weight: 700; + color: $white; + opacity: 0.8; + &:hover { + opacity: 1; + } + } + h4 { + @include font-rem(14); + margin-bottom: 10px; + text-transform: uppercase; + } +} + + /* Footer wrapper */ .footer-wrap { @include container; @@ -611,7 +663,6 @@ $button-size: 1.5rem; @include suffix(12,3.5); } h4 { - text-transform: uppercase; margin-bottom: 0; } diff --git a/_sass/variables.scss b/_sass/variables.scss index a0d832c97295..1e9c496dff9c 100644 --- a/_sass/variables.scss +++ b/_sass/variables.scss @@ -37,6 +37,20 @@ $warning : #dd8338; $danger : #C64537; $info : #308cbc; +/* brands */ +$facebook-color : #3b5998; +$flickr-color : #ff0084; +$foursquare-color : #0cbadf; +$google-plus-color : #dd4b39; +$instagram-color : #4e433c; +$linkedin-color : #4875b4; +$pinterest-color : #cb2027; +$rss-color : #fa9b39; +$tumblr-color : #2c4762; +$twitter-color : #55acee; +$vimeo-color : #1ab7ea; +$youtube-color : #ff3333; + /* links */ $linkcolor : #343434; $link-color : $linkcolor; diff --git a/theme-setup/index.md b/theme-setup/index.md index 11e8f04b6d72..dceb5b4550d7 100644 --- a/theme-setup/index.md +++ b/theme-setup/index.md @@ -298,6 +298,10 @@ Not sure if this only effects Kramdown or if it's an issue with Markdown in gene {% endhighlight %} +### Social Sharing Links + +Social sharing links for Twitter, Facebook, and Google+ are included on posts/pages by default. To hide them on specific posts or pages add `share: false` to the YAML Front Matter. If you'd like to use different social networks modify `_includes/_social-share.html` to your liking. Icons are set using [Font Awesome](http://fontawesome.io). + --- ## Further Customization