big social share buttons

davidemerritt · Feb 18, 2015 · f3e707a · f3e707a
1 parent 462069c
commit f3e707a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 16 deletions.
diff --git a/css/battle.css b/css/battle.css
@@ -1017,20 +1017,6 @@ body #battle .thanks h2 {
   display: inline-block;
   padding: 32px;
 }
-.footer-target footer .socials {
-  padding: 10px 0px 20px 0px;
-}
-.footer-target footer .socials img {
-  margin: 0px 7px;
-  width: 24px;
-  height: 24px;
-}
-.footer-target footer .socials a {
-  opacity: .5;
-}
-.footer-target footer .socials a:hover {
-  opacity: 1;
-}
 .footer-target footer .blurb {
   font-size: 23px;
   font-weight: 100;
@@ -1060,6 +1046,60 @@ body #battle .thanks h2 {
 .footer-target footer hr.narrow {
   width: 200px;
 }
+
+.footer-target footer .socials {
+  padding: 10px 0px 20px 0px;
+}
+.footer-target footer .socials img {
+  margin: 0px 7px;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 10px;
+  left: 12px;
+}
+
+.footer-target .shares-container{
+    border-radius: 50px;
+    background-color: #39394D;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    width: 490px;
+    margin: 0px auto;
+}
+
+.footer-target .share-container a:hover{
+    color: blue !important;
+}
+.footer-target .share-container a:visited{
+    color: #FFF !important;
+}
+.footer-target .share-container a:link {
+    color: #FFF !important;
+}
+.footer-target .fb-share-container{
+    background-color: #3B5999;
+    padding-left:20px;
+}
+.footer-target .twitter-share-container{
+    background-color: #4099FF;
+    padding-left:15px;
+}
+.footer-target .share-container{
+    position:relative;
+    display:inline-block;
+    width: 220px;
+    border-radius: 25px;
+    text-align:center;
+    font-family: "proxima-nova",sans-serif;
+    font-size: 11px;
+    font-weight:bold;
+    line-height: 40px;
+    margin: 6px 6px 6px;
+    padding-top:3px;
+    text-transform: uppercase;
+}
+
 #supporters {
   background: #ffffff;
 }

diff --git a/templates/Footer.html b/templates/Footer.html
@@ -13,8 +13,20 @@
 </div>
 <div class="row">
 <div class="col-xs-12 socials">
-<a href="https://www.facebook.com/sharer.php?u=https://www.battleforthenet.com/#protest" target="_blank"><img data-cfsrc="images/share/fb_white.png" src="https://www.battleforthenet.com/images/share/fb_white.png"></a>
-<a href="https://twitter.com/intent/tweet?related=fightfortheftr&amp;text=Comcast%27s%20pals%20in%20Congress%20are%20trying%20to%20screw%20up%20%23netneutrality.%20Tell%20em%20you%27re%20not%20fooled.%20BattleForTheNet.com%20https%3A%2F%2Ftwitter.com%2Ffightfortheftr%2Fstatus%2F535117659093086209%2Fphoto%2F1&amp;hashtags=" target="_blank"><img data-cfsrc="images/share/tw_white.png" src="https://www.battleforthenet.com/images/share/tw_white.png"></a>
+<div class="shares-container">
+    <div class="share-container fb-share-container">
+        <img data-cfsrc="images/share/fb_white.png" src="https://www.battleforthenet.com/images/share/fb_white.png">
+        <a href="https://www.facebook.com/sharer.php?u=https://www.battleforthenet.com/#protest" target="_blank">
+            Share on Facebook
+        </a>
+    </div>
+    <div class="share-container twitter-share-container">
+        <img data-cfsrc="images/share/tw_white.png" src="https://www.battleforthenet.com/images/share/tw_white.png">
+        <a href="https://twitter.com/intent/tweet?related=fightfortheftr&amp;text=Comcast%27s%20pals%20in%20Congress%20are%20trying%20to%20screw%20up%20%23netneutrality.%20Tell%20em%20you%27re%20not%20fooled.%20BattleForTheNet.com%20https%3A%2F%2Ftwitter.com%2Ffightfortheftr%2Fstatus%2F535117659093086209%2Fphoto%2F1&amp;hashtags=" target="_blank">
+            Share on Twitter
+        </a>
+    </div>
+</div>
 </div>
 </div>
 <div class="row">