Added social share buttons

dxtkdxtk · Feb 26, 2014 · 7f3b7d0 · 7f3b7d0
1 parent 310c68b
commit 7f3b7d0
Show file tree

Hide file tree

Showing 5 changed files with 153 additions and 15 deletions.
diff --git 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
diff --git 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) {

diff --git a/index.hbs b/index.hbs
@@ -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}}

diff --git a/post.hbs b/post.hbs
@@ -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>