styling for the share buttons

opentech/static_src/src/sass/components/_icon.scss

@@ -52,6 +52,26 @@
         }
     }
 
+
+    &--social-share {
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+        margin-right: 5px;
+    }
+
+    &--twitter-share {
+        background: $color--twitter;
+    }
+
+    &--linkedin-share {
+        background: $color--linkedin;
+    }
+
+    &--facebook-share {
+        background: $color--facebook;
+    }
+
     &--card-pixels {
         position: absolute;
         right: 0;

opentech/static_src/src/sass/components/_section.scss

@@ -6,4 +6,10 @@
             margin: 0 auto;
         }
     }
+
+    &--share {
+        padding: 2rem 0;
+        margin: 3rem 0;
+        border-top: 1px solid $color--mid-grey;
+    }
 }

opentech/templates/includes/share.html

 {% load util_tags wagtailimages_tags %}
-<div class="share">
+<section class="section section--share">
+    <h5>Share</h5>
     {% image page.social_image fill-150x150 as social_img %}
     {% with settings.utils.SocialMediaSettings as social_media_settings %}
-        <ul>
-            <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
-            <li><a  href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">Share on Twitter</a></li>
+        <!-- see https://dev.twitter.com/web/tweet-button/web-intent -->
+        <a href="https://twitter.com/intent/tweet?text={{ page|social_text:request.site|urlencode }}&amp;url={{ page.full_url|urlencode }}&amp;via={{ social_media_settings.twitter_handle|urlencode }}" title="Share on Twitter">
+            <svg class="icon icon--social-share icon--twitter-share"><use xlink:href="#twitter"></use></svg>
+        </a>
 
-            <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
-            <li><a 
-                href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={{ page|social_text:request.site|urlencode }}&amp;source={{ social_media_settings.site_name|urlencode }}"
-                title="Share on LinkedIn">Share on LinkedIn</a></li>
+        <!-- see https://developer.linkedin.com/docs/share-on-linkedin -->
+        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ page.full_url|urlencode }}&amp;title={{ page.title|urlencode }}&amp;summary={{ page|social_text:request.site|urlencode }}&amp;source={{ social_media_settings.site_name|urlencode }}"
+            title="Share on LinkedIn">
+            <svg class="icon icon--social-share icon--linkedin-share"><use xlink:href="#linkedin"></use></svg>
+        </a>
 
-            <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
-            <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
-            <li><a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&amp;link={{ page.full_url|urlencode }}&amp;picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&amp;name={{ page.title|urlencode }}&amp;description={{ page|social_text:request.site|urlencode }}&amp;redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">Share on Facebook</a></li>
-
-            <!-- see https://developers.google.com/+/web/share/#sharelink -->
-            <li><a href="https://plus.google.com/share?url={{ page.full_url|urlencode }}" title="Share on Google Plus">Share on Google Plus</a></li>
-            
-        </ul>
-        
+        <!-- see https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.5 -->
+        <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
+        <a href="https://www.facebook.com/dialog/feed?app_id={{ social_media_settings.facebook_app_id }}&amp;link={{ page.full_url|urlencode }}&amp;picture={% if social_img %}{{ 'http://'|add:request.site.hostname|add:social_img.url|urlencode }}{% endif %}&amp;name={{ page.title|urlencode }}&amp;description={{ page|social_text:request.site|urlencode }}&amp;redirect_uri={{ page.full_url|urlencode }}" title="Share on Facebook">
+            <svg class="icon icon--social-share icon--facebook-share"><use xlink:href="#facebook"></use></svg>
+        </a>
     {% endwith %}
-</div>
+</section>
 

opentech/templates/includes/sprites.html

@@ -67,4 +67,8 @@
         </g>
     </symbol>
 
+
+    <symbol id="linkedin" viewBox="0 0 17 16" >
+        <path d="M17 9.81V16h-3.644v-5.776c0-1.45-.527-2.441-1.846-2.441-1.006 0-1.605.667-1.87 1.313-.095.23-.12.552-.12.875V16H5.875s.05-9.782 0-10.796H9.52v1.53l-.024.035h.024v-.035c.484-.734 1.349-1.783 3.284-1.783C15.202 4.95 17 6.494 17 9.81zM2.062 0C.816 0 0 .806 0 1.865 0 2.9.792 3.73 2.014 3.73h.024c1.272 0 2.062-.83 2.062-1.866C4.076.805 3.31 0 2.062 0zM.216 16H3.86V5.204H.216V16z" fill-rule="nonzero" />
+    </symbol>
 </svg>