tweet box under posts, closes #5

Gruntfile.js

@@ -104,6 +104,7 @@ module.exports = function(grunt){
                         'bower_components/masonry/index.js',
                         'bower_components/imagesloaded/imagesloaded.js',
                         'bower_components/simpleJekyllSearch/index.js',
+                        'bower_components/socialite/index.js',
                         '<%= config.src %>/<%= config.assets.js %>/app.js'
                     ]
                 }

_src/_includes/comments.html

@@ -0,0 +1,7 @@
+
+<aside class="comments">
+    
+    <p>You should tweet this post</p>
+    <p class="btn-wrap"><a class="btn socialite twitter-share icon-twitter" data-via="kremalicious" data-related="kremaliciouscom,ezeep" href="https://twitter.com/share">Tweet</a></p>
+    
+</aside>

_src/_includes/entry_meta.html

@@ -7,8 +7,8 @@
       <time class="updated" datetime="{{ page.updated | date_to_xmlschema }}">Updated {{ page.updated | timeago }}</time>
     {% endif %}
     
-    <p class="categories">
+    <!-- <p class="categories">
         {{ page.categories | category_links }}
-    </p>
+    </p> -->
     
 </footer>

_src/_includes/footer.html

@@ -12,10 +12,6 @@
                 <a class="btn facebook" href="https://www.facebook.com/pages/kremalicious/154539134564052"><i class="icon-facebook"></i> <span>Facebook</span></a>
             </p>
         </aside>
-	
-		<aside id="tweetsWrap">
-			<a class="btn socialite twitter-follow" href="https://twitter.com/kremalicious"><i class="icon-twitter"></i> Follow @kremalicious</a>
-		</aside>
 	</div>
 	<section class="footer-copyright" class="row">
 			<p>© 2007-2013 <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a>.</p>

_src/_layouts/link.html

@@ -21,9 +21,11 @@ layout: base
                 <a class="permalink-link" href="{{ page.url }}" rel="tooltip" title="Permalink">&#8734;</a>
     		</p>
         </section>
-    
+        
         {% include entry_meta.html %}
         
+        {% include comments.html %}
+        
     </article>
 
 </section>

_src/_layouts/photo.html

@@ -19,6 +19,8 @@ layout: base
         </section>
         
         {% include entry_meta.html %}
+        
+        {% include comments.html %}
     
     </article>
 

_src/_layouts/post.html

@@ -19,6 +19,8 @@ layout: base
         
         {% include entry_meta.html %}
         
+        {% include comments.html %}
+        
     </article>
 
 </section>

_src/assets/js/app.js

@@ -9,6 +9,7 @@ $(ASAP = function(){
 $(window).load( AfterLoad = function() {
 
 	infiniteScroll.init();
+    siteEffects.init();
 
 });
 
@@ -142,8 +143,15 @@ var photoGrid = {
 
 var siteEffects = {
     
+	socialiteButtons: function() {
+        
+		$('.comments').one('mouseenter', function() {
+			Socialite.load($(this)[0]);
+		});
+	},
+    
 	init: function(){
-		
+		this.socialiteButtons();
 	}
 
 }

_src/assets/less/buttons.less

@@ -109,9 +109,11 @@ a.btn-primary:visited {
 	padding: 1px 5px;
 	.box-shadow(none);
 	
-	i:before {
+    // icon
-		font-size: 12px;
+	&:before {
-		margin-right: 0;
+		font-size: 15px;
+        margin-right: 2px;
+        top: 1px
 	}
 	
 }

_src/assets/less/comments.less

@@ -0,0 +1,18 @@
+
+.comments {
+    background: rgba(255,255,255,.55);
+    color: @text-color-dimmed;
+    padding: @line-height-computed;
+    margin-top: @line-height-computed*2;
+    text-align: center;
+    .border-radius;
+    
+    .btn-wrap {
+        margin-bottom: 0;
+        height: 27px;
+    }
+    .btn { 
+        margin-bottom: 0;
+        left: -20px;
+    }
+}

_src/assets/less/kremalicious3.less

@@ -46,6 +46,7 @@
 
 // Content
 @import 'content.less';
+@import 'comments.less';
 @import 'sticky.less';
 
 // Alerts

_src/assets/less/mixins.less

@@ -5,7 +5,7 @@
 
 // Dimmed Text
 /////////////////////////////////////
-.dimmed {
+.dimmed() {
 	color: @text-color-dimmed;
 	p { color: @text-color-dimmed; }
 	li { color: @text-color-dimmed; }
@@ -14,7 +14,7 @@
 // Text overflow
 /////////////////////////////////////
 
-.ellipsis {
+.ellipsis() {
     text-overflow: ellipsis;
     white-space: nowrap;
 	overflow: hidden
@@ -65,7 +65,7 @@
 // Heading band
 /////////////////////////////////////
 
-.heading-band {
+.heading-band() {
 	display: inline-block;
 	clear: both;
 	background: rgba(255,255,255,.55);

bower.json

@@ -15,7 +15,8 @@
       "masonry": "http://masonry.desandro.com/masonry.pkgd.min.js",
       "imagesloaded": "~3.0.4",
       "infinitescroll": "https://raw.github.com/paulirish/infinite-scroll/master/jquery.infinitescroll.js",
-      "simpleJekyllSearch": "https://raw.github.com/christian-fei/Simple-Jekyll-Search/master/simpleJekyllSearch.js"
+      "simpleJekyllSearch": "https://raw.github.com/christian-fei/Simple-Jekyll-Search/master/simpleJekyllSearch.js",
+      "socialite": "https://raw.github.com/tmort/Socialite/master/socialite.js"
   },
     
   "ignore": [