Using image map for social sharing buttons

README.md

@@ -19,7 +19,7 @@ A photo gallery site implemented in ASP.NET Core 2.0 Razor Pages.
 - High performance. Gets 100/100 points on Google PageSpeed Insights 
   - [Run PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgallerytemplate.azurewebsites.net%2F)
 - Speed Index < 1000
-  - [See WebPageTest](http://www.webpagetest.org/result/170919_G1_c46349f8918b37979f2b23987df4dd35/) 
+  - [See WebPageTest](http://www.webpagetest.org/result/170920_XS_5af90462dc340230a1bb73f9c6e196b5/) 
 - Meets highest accessibility standards 
   - [Run accessibility validator](http://wave.webaim.org/report#/https://gallerytemplate.azurewebsites.net)
 - W3C standards compliant HTML and CSS 

src/Pages/_SocialButtons.cshtml

@@ -5,20 +5,9 @@
     string text = System.Net.WebUtility.UrlEncode(Model);
 }
 
-<ul class="share-buttons">
-    <li>
-        <a href="https://twitter.com/intent/tweet?source=@enc&text=@text" class="twitter" title="Tweet" target="_blank" rel="noreferrer noopener">
-            Tweet it on Twitter
-        </a>
-    </li>
-    <li>
-        <a href="http://pinterest.com/pin/create/button/?url=@enc&description=@text" class="pinterest" title="Pin it" target="_blank" rel="noreferrer noopener">
-            Pin it on Pinterest
-        </a>
-    </li>
-    <li>
-        <a href="https://www.facebook.com/sharer/sharer.php?u=@enc" class="facebook" title="Share on Facebook" target="_blank" rel="noreferrer noopener">
-            Share on Facebook
-        </a>
-    </li>
-</ul>
+<img id="social" src="~/img/social-buttons.png" width="112" height="31" alt="Social sharing buttons" usemap="#map" />
+<map name="map">
+    <area alt="Facebook" title="Share on Facebook" shape="rect" coords="0,0,32,30" href="https://www.facebook.com/sharer/sharer.php?u=@enc" />
+    <area alt="Twitter" title="Tweet it" shape="rect" coords="40,0,70,30" href="https://twitter.com/intent/tweet?source=@enc&text=@text" />
+    <area alt="Pinterest" title="Pin it" shape="rect" coords="80,0,110,30" href="http://pinterest.com/pin/create/button/?url=@enc&description=@text" />
+</map>

src/wwwroot/css/site.scss

@@ -48,6 +48,10 @@ a {
     color: $link-color;
 }
 
+img {
+    border: none;
+}
+
 .title {
     line-height: 2em;
     margin-bottom: .5em;
@@ -69,7 +73,6 @@ a {
     img {
         display: block;
         width: 100%;
-        border: none; /* for IE10 */
         opacity: 0;
         -moz-transition: opacity 500ms ease-in-out;
         -o-transition: opacity 500ms ease-in-out;
@@ -160,35 +163,10 @@ a {
     }
 }
 
-.share-buttons {
-    list-style: none;
-    padding: 0;
-
-    li {
-        display: inline-block;
-        margin-right: .3em;
-    }
-
-    a {
-        width: 0;
-        padding-left: 32px;
-        height: 32px;
-        background: url(/img/social-buttons.png) no-repeat;
-        overflow: hidden;
-        display: inline-block;
-    }
-
-    .twitter {
-        background-position: 0 -42px;
-    }
-
-    .pinterest {
-        background-position: 0 -84px;
-    }
-
-    .facebook {
-        background-position: 0 0;
-    }
+#social {
+    margin-top: 1em;
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
 }
 
 footer {