tweet and vote buttons

common.js

@@ -4,3 +4,10 @@ function toggleCurators() {
 }
 var toggle = document.getElementById('js-curators-toggle').parentNode;
 toggle.onmouseenter = toggle.onmouseleave = toggleCurators;
+
+var tweetBtn = document.getElementById('btn-tweet');
+tweetBtn.onclick = function(){
+  tweetBtn.style.display = 'none';
+  document.getElementById('btn-vote').style.display = 'inline';
+  return true;
+};

index.css

@@ -215,6 +215,35 @@ nav span {
   color: rgba(44, 46, 52, .7);
 }
 
+#social {
+  padding-left: 7px;
+}
+
+#social > * {
+  font-family: MuseoSans;
+  font-size: 8px;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+  letter-spacing: 0.3px;
+  color: #5d5d5d;
+  background-size: 8px;
+  background-repeat: no-repeat;
+  background-position: left center;
+  padding-left: 10px;
+  border-radius: 2px;
+  background-color: #ffffff;
+  text-decoration: none;
+}
+
+#btn-tweet {
+  background-image: url(assets/icon-twitter.png);
+}
+
+#btn-vote {
+  background-image: url(assets/icon-producthunt.png);
+}
+
 /* page background */
 
 .card-wrapper {

index.html

@@ -18,6 +18,13 @@
       <a id="js-curators-toggle" href="#">curated by <span>5 mangrovers</span></a>
       <div><hr /></div>
       <a>about mangrove</a>
+      <div><hr /></div>
+      <div id="social">
+        <a id="btn-tweet" target="_blank" href="http://twitter.com/meetmangrove">tweet</a>
+        <a id="btn-vote" target="_blank" href="https://www.google.com/search?q=Nomad+Airlines+producthunt" style="display: none;">vote</a>
+      </div>
+
+      <!-- display of the following ul is toggled by JS => you can move it anywhere you like -->
       <ul id="curators" style="display: none;">
         <li><a href="http://twitter.com/mxbraud">@mxbraud</a></li>
         <li><a href="http://twitter.com/adrienjoly">@adrienjoly</a></li>