Commit f2ee6b9e authored by santiaago's avatar santiaago
Browse files

align share buttons. 

Fixes #86
parent 40d4c9cd

app/assets/css/social-sharing-allignment.css

0 → 100644
+20 −0
Original line number Diff line number Diff line 
/* author: https://gist.github.com/thebigreason */

/* description: Align Facebook Like, Twitter Tweet and Google +1 buttons */

/* https://gist.github.com/thebigreason/1296097 */

/* remarks: I made some changes and remove unecessary classes. */



/* This gets Google to fall into place */

.social {

	font-size: 1px;

}

 

/* Set an optional width for your button wrappers */

.social span {

	display: inline-block;

	width: 60px;

}

 

/* Adjust the widths individually if you like */

.social .google {

	width: 75px;

}
 
 No newline at end of file

app/index.html

+1 −0
Original line number Diff line number Diff line
@@ -32,6 +32,7 @@ 
    <link href="assets/css/get-started.css" rel="stylesheet">

    <link href="assets/css/about.css" rel="stylesheet">

    <link href="assets/css/footer.css" rel="stylesheet">

    <link href="assets/css/social-sharing-allignment.css" rel="stylesheet">

    <link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">



    <script src="//google-code-prettify.googlecode.com/svn/loader/prettify.js"></script>

app/partials/marketing/editor.html

+21 −19
Original line number Diff line number Diff line
@@ -75,14 +75,12 @@ 
    <div class="editor-content--positionCenter">

      <img class="editor-image editor-image--center featurette-image img-responsive img-thumbnail" src="/{{editorShape}}/{{editorName}}?theme={{editorTheme}}&numcolors={{editorColorNumber}}&size=220&fmt=svg">

      <div class="row editor-row--pading">

	<!-- twitter button -->

	<div class="social">

	  <span class="twitter">

	    <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://tinygraphs.com" data-text="Check out tinygraphs, an avatar generator for your web app." data-via="santiago_arias" data-count="none" data-hashtags="tinygraphs">Tweet</a>

	    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

	<!-- / twitter button -->

	<!-- facebook button -->

	<div class="fb-share-button" data-href="http://tinygraphs.com" data-layout="button"></div>

	<!-- /facebook -->

	<!-- g plus -->

	  </span>

	  <span class="google">

	    <!-- Place this tag where you want the share button to render. -->

	    <div class="g-plus" data-action="share" data-annotation="none" data-href="http://tinygraphs.com"></div>

	    <!-- Place this tag after the last share tag. -->
@@ -93,7 +91,11 @@ 
	      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

	      })();

	    </script>

	<!-- / g plus -->

	  </span>

	  <span class="Facebook">

	    <div class="fb-share-button" data-href="http://tinygraphs.com" data-layout="button"></div>

	  </span>

	</div>

      </div>

      <div class="row editor-row--padding">

        <div class="col-xs-8 col-xs-offset-2">