WIP – Changed into only one share button

Author: Kikobeats

assets/css/uno.css

@@ -45,10 +45,6 @@ $ ->
 
     if Uno.is 'page', 'post'
       $('.main').readingTime readingTimeTarget: '.post.reading-time > span'
-      if Uno.is 'device', 'desktop'
-        firstImage = ($('#post-image')[0] || $('article.post img')[0]).src
-        social = new Share '#social-buttons', image: firstImage
-        social.open()
 
     $('#panic-button').click ->
       s = document.createElement 'script'

assets/js/src/__init.coffee

@@ -134,4 +134,8 @@ section.post {
 
 #post-title {
   margin: 3rem 0 2.5rem;
+  &:hover {
+    color: $hover-color;
+    transition: all 400ms;
+  }
 }

assets/js/uno.js

@@ -48,7 +48,7 @@
 
 .icon-search {
   position: absolute;
-  top: 30.8rem;
+  top: 31.5rem;
   left: 16.5rem;
   color: $gray;
   text-shadow: 1px 1px 0 $gray;

assets/scss/components/_post.scss

@@ -13,7 +13,8 @@
   src: url("../fonts/foundation-icons/foundation-icons.eot");
   src: url("../fonts/foundation-icons/foundation-icons.eot?#iefix") format("embedded-opentype"), url("../fonts/foundation-icons/foundation-icons.woff") format("woff"), url("../fonts/foundation-icons/foundation-icons.ttf") format("truetype"), url("../fonts/foundation-icons/foundation-icons.svg#fontcustom") format("svg");
 }
-.icon:before {
+.icon:before,
+.icon-reverse:after {
   display: inline-block;
   font-family: "foundation-icons";
   font-style: normal;
@@ -714,6 +715,14 @@
 .icon-social-twitter:before {
   content: "\f1e4";
 }
+.icon-social-twitter-post:after {
+  content: "\f1e4";
+  display: inline-block;
+  vertical-align: middle;
+  height: 40px;
+  font-size: 26px;
+  margin-left: 9px;
+}
 .icon-social-vimeo:before {
   content: "\f1e5";
 }

assets/scss/components/_search.scss

@@ -17,7 +17,6 @@
 @import 'modules/global.scss';
 @import 'modules/fonts.scss';
 @import 'modules/buttons.scss';
-@import 'modules/icons.scss';
 @import 'modules/forms.scss';
 @import 'modules/effects.scss';
 

assets/scss/modules/_fonts.scss

@@ -12,8 +12,7 @@
     "pace": "*",
     "parrot-module-device": "*",
     "parrotjs": "*",
-    "reading-time": "*",
-    "share-button": "*"
+    "reading-time": "*"
   },
   "ignore": [
     "**/.*",

assets/scss/modules/_icons.scss

@@ -34,8 +34,7 @@ src =
               'assets/vendor/fastclick/lib/fastclick.js'
               'assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
               'assets/vendor/pace/pace.min.js'
-              'assets/vendor/reading-time/build/readingTime.min.js'
-              'assets/vendor/share-button/build/share.min.js']
+              'assets/vendor/reading-time/build/readingTime.min.js']
   css      :
     main   : 'assets/css/uno.css'
     vendor : ['assets/vendor/animate.css/animate.min.css']

assets/scss/uno.scss

@@ -8,17 +8,7 @@
   <meta name="description" content="{{meta_description}}">
 {{/if}}
 
-<meta name="twitter:card" content="summary">
-<meta name="twitter:title" content="{{meta_title}}">
-{{#if meta_description}}
-<meta name="twitter:description" content="{{meta_description}}">
-{{/if}}
-
-<meta property="og:type" content="article">
-<meta property="og:title" content="{{meta_title}}">
-{{#if meta_description}}
-<meta property="og:description" content="{{meta_description}}">
-{{/if}}
+{{!-- Twitter & Facebook meta tag are inject in ghost_head --}}
 
 <link rel="shortcut icon" href="/assets/img/favicon.ico">
 <link rel="apple-touch-icon" sizes="57x57" href="/assets/img/apple-touch-icon-57x57.png">

bower.json

@@ -14,19 +14,12 @@
         <span class="post reading-time"> – <span></span> read.</span>
       </div>
 
-      {{#if image}}
-      <a href={{url}}><img id="post-image" src={{image}} alt="{{{title}}}">
-        <h1 id="post-title">{{{title}}}.</h1>
+      <a href="https://twitter.com/intent/tweet?url={{url absolute="true"}};text={{title}} » " alt="Tweet '{{title}}'" target="_blank">
+        <h1 class="icon-reverse icon-social-twitter-post" id="post-title">{{{title}}}.</h1>
+        {{#if image}}<img id="post-image" src={{image}} alt="{{{title}}}">{{/if}}
       </a>
-      {{else}}
-      <a href={{url}}>
-        <h1 id="post-title">{{{title}}}.</h1>
-      </a>
-      {{/if}}
-
     </header>
 
-    <section id="social-buttons"></section>
     <section class="{{post_class}}">
       {{content}}
     </section>