diff options
author | Rory Gibson <rg.rorygibson@gmail.com> | 2014-02-27 03:11:29 +0400 |
---|---|---|
committer | Rory Gibson <rg.rorygibson@gmail.com> | 2014-02-27 03:11:29 +0400 |
commit | 7f3b7d0a4602cd72dadcf97005cc9c98aa86d6af (patch) | |
tree | 1caa883937349e9fc13d3dd236dbe683a37f7fd4 | |
parent | 310c68b4adfd7a18a6df29044da6bba80fc1d4af (diff) |
Added social share buttons
-rw-r--r-- | assets/css/style.css | 59 | ||||
-rw-r--r-- | assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc | bin | 44623 -> 49076 bytes | |||
-rw-r--r-- | assets/sass/style.scss | 57 | ||||
-rw-r--r-- | index.hbs | 26 | ||||
-rw-r--r-- | post.hbs | 26 |
5 files changed, 153 insertions, 15 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 250f96e..c61695f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -112,6 +112,16 @@ table { .fluid-width-video-wrapper { margin-bottom: 40px; } +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; } + +.clearfix:after { + content: ""; + display: table; + clear: both; } + /* ============================================================ */ /* General Appearance */ /* ============================================================ */ @@ -230,18 +240,41 @@ table { margin: 40px auto 0; width: 100px; } -.post-content { - margin: 0 0 92px; } - .post-content a:hover { - border-bottom: 1px dotted #f03838; - padding: 0 0 2px; } +.post-content a:hover { + border-bottom: 1px dotted #f03838; + padding: 0 0 2px; } +.post-content:last-child { + margin-bottom: 0; } -.post-tags { +.post-footer { + margin-top: 5px; } + +.post-tags, +.share { color: #AEADAD; font-size: 14px; } - .post-tags span { + .post-tags span, + .share span { font-weight: 600; } +.post-tags { + float: left; + margin: 3px 0 0; } + +.share { + float: right; } + .share a { + background: #f03838; + color: #FFF; + display: inline-block; + font-size: 16px; + margin-left: 5px; + padding: 5px 0 4px; + width: 30px; + text-align: center; } + .share a:hover { + background: #303030; } + .post-navigation { display: table; margin: 70px auto 100px; } @@ -324,6 +357,7 @@ table { background: #303030; color: #D3D3D3; height: 265px; + margin-top: 95px; overflow: auto; } .footer .site-title-wrapper { margin: 80px auto 35px; } @@ -381,7 +415,16 @@ table { .post-container, .post-list { margin-right: 25px; - margin-left: 25px; } } + margin-left: 25px; } + + .post-tags { + width: 100%; } + + .share { + float: left; + margin-top: 20px; } + .share a { + margin: 0 5px 0 0; } } @media only screen and (max-width: 400px) { .post-title { font-size: 32px; } diff --git a/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc b/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc Binary files differindex 7e47593..ec6272d 100644 --- a/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc +++ b/assets/sass/.sass-cache/4c0f184ddf523d9e41705de4a1576d5b51e21674/style.scssc diff --git a/assets/sass/style.scss b/assets/sass/style.scss index a42f434..5673d2a 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -124,6 +124,20 @@ table { .fluid-width-video-wrapper { margin-bottom: 40px; } +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +.clearfix { + &:after{ + content: ""; + display: table; + clear: both; + } +} + /* ============================================================ */ /* General Appearance */ /* ============================================================ */ @@ -261,21 +275,46 @@ table { } .post-content { - margin: 0 0 92px; - a:hover { border-bottom: 1px dotted $primary; padding: 0 0 2px; } + + &:last-child { margin-bottom: 0; } } -.post-tags { +.post-footer { margin-top: 5px; } + +.post-tags, +.share { color: #AEADAD; font-size: 14px; span { font-weight: 600; } } +.post-tags { + float: left; + margin: 3px 0 0; +} + +.share { + float: right; + + a { + background: $primary; + color: #FFF; + display: inline-block; + font-size: 16px; + margin-left: 5px; + padding: 5px 0 4px; + width: 30px; + text-align: center; + } + + a:hover { background: $secondary; } +} + .post-navigation { display: table; margin: 70px auto 100px; @@ -372,6 +411,7 @@ table { background: $secondary; color: #D3D3D3; height: 265px; + margin-top: 95px; overflow: auto; .site-title-wrapper { margin: 80px auto 35px; } @@ -442,6 +482,17 @@ table { margin-right: 25px; margin-left: 25px; } + + .post-tags { width: 100%; } + + .share { + float: left; + margin-top: 20px; + + a { + margin: 0 5px 0 0; + } + } } @media only screen and (max-width: 400px) { @@ -10,13 +10,35 @@ <p class="post-date"><time datetime="{{published_at}}">Published {{date format="MMMM Do YYYY"}}</time></p> </header> - <div class="post-content"> + <div class="post-content clearfix"> {{{content}}} + </div> + <footer class="post-footer clearfix"> {{#if tags}} <p class="post-tags"><span>Tagged:</span> {{tags}}</p> {{/if}} - </div> + + <div class="share"> + <a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}" + onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"> + <i class="fa fa-twitter"></i> + <span class="hidden">Twitter</span> + </a> + + <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" + onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"> + <i class="fa fa-facebook"></i> + <span class="hidden">Facebook</span> + </a> + + <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}" + onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;"> + <i class="fa fa-google-plus"></i> + <span class="hidden">Google+</span> + </a> + </div> + </footer> </article> {{/if}} {{/foreach}} @@ -9,13 +9,35 @@ <p class="post-date"><time datetime="{{published_at}}">Published {{date format="MMMM Do YYYY"}}</time></p> </header> - <div class="post-content"> + <div class="post-content clearfix"> {{{content}}} + </div> + <footer class="post-footer clearfix"> {{#if tags}} <p class="post-tags"><span>Tagged:</span> {{tags}}</p> {{/if}} - </div> + + <div class="share"> + <a class="icon-twitter" href="http://twitter.com/share?text={{encode title}}&url={{url absolute="true"}}" + onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"> + <i class="fa fa-twitter"></i> + <span class="hidden">Twitter</span> + </a> + + <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}" + onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"> + <i class="fa fa-facebook"></i> + <span class="hidden">Facebook</span> + </a> + + <a class="icon-google-plus" href="https://plus.google.com/share?url={{url absolute="true"}}" + onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;"> + <i class="fa fa-google-plus"></i> + <span class="hidden">Google+</span> + </a> + </div> + </footer> </article> {{/post}} </div>
\ No newline at end of file |