Updated social sharing buttons

src/Pages/_SocialButtons.cshtml

@@ -5,9 +5,25 @@
     string text = System.Net.WebUtility.UrlEncode(Model);
 }
 
-<img id="social" src="~/img/social-buttons.png" 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="78,0,109,30" href="http://pinterest.com/pin/create/button/?url=@enc&description=@text" />
-</map>
+<aside class="socialsharing">
+    <a href="https://www.facebook.com/sharer/sharer.php?u=@enc" title="Share on Facebook" target="_blank" rel="noopener noreferrer">
+        <svg aria-label="Share on Facebook" role="img" viewBox="0 0 24 24">
+            <path d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"></path>
+        </svg>
+    </a>
+    <a href="https://twitter.com/intent/tweet?source=@enc&text=@text" title="Share on Twitter" target="_blank" rel="noopener noreferrer">
+        <svg aria-label="Share on Twitter" role="img">
+            <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"></path>
+        </svg>
+    </a>
+    <a href="http://pinterest.com/pin/create/button/?url=@enc&description=@text" title="Pin on Pinterest" target="_blank" rel="noopener noreferrer">
+        <svg aria-label="Pin on Pinterest" role="img">
+            <path d="M 12.017 0 C 5.396 0 0.029 5.367 0.029 11.987 c 0 5.079 3.158 9.417 7.618 11.162 c -0.105 -0.949 -0.199 -2.403 0.041 -3.439 c 0.219 -0.937 1.406 -5.957 1.406 -5.957 s -0.359 -0.72 -0.359 -1.781 c 0 -1.663 0.967 -2.911 2.168 -2.911 c 1.024 0 1.518 0.769 1.518 1.688 c 0 1.029 -0.653 2.567 -0.992 3.992 c -0.285 1.193 0.6 2.165 1.775 2.165 c 2.128 0 3.768 -2.245 3.768 -5.487 c 0 -2.861 -2.063 -4.869 -5.008 -4.869 c -3.41 0 -5.409 2.562 -5.409 5.199 c 0 1.033 0.394 2.143 0.889 2.741 c 0.099 0.12 0.112 0.225 0.085 0.345 c -0.09 0.375 -0.293 1.199 -0.334 1.363 c -0.053 0.225 -0.172 0.271 -0.401 0.165 c -1.495 -0.69 -2.433 -2.878 -2.433 -4.646 c 0 -3.776 2.748 -7.252 7.92 -7.252 c 4.158 0 7.392 2.967 7.392 6.923 c 0 4.135 -2.607 7.462 -6.233 7.462 c -1.214 0 -2.354 -0.629 -2.758 -1.379 l -0.749 2.848 c -0.269 1.045 -1.004 2.352 -1.498 3.146 c 1.123 0.345 2.306 0.535 3.55 0.535 c 6.607 0 11.985 -5.365 11.985 -11.987 C 23.97 5.39 18.592 0.026 11.985 0.026 L 12.017 0 Z" />
+        </svg>
+    </a>
+    <a href="mailto:[email protected](" ", "%20")&amp;body=@enc" title="E-mail" target="_blank" rel="noopener noreferrer">
+        <svg aria-label="Email" role="img">
+            <path d="M24 7.387v10.478c0 .23-.08.424-.238.576-.158.154-.352.23-.58.23h-8.547v-6.959l1.6 1.229c.102.085.229.126.379.126.148 0 .277-.041.389-.127L24 7.387zm-9.365-2.021h8.547c.211 0 .393.063.543.192.15.128.234.3.248.51l-7.369 5.876-1.969-1.549V5.366zM13.404.864v22.271L0 20.819V3.244L13.406.864h-.002zm-4.049 11.18c-.02-1.133-.313-2.072-.879-2.814-.555-.74-1.275-1.131-2.131-1.164-.824.033-1.529.423-2.1 1.164-.57.742-.855 1.682-.87 2.814.015 1.117.315 2.047.885 2.791.571.74 1.274 1.133 2.101 1.176.855-.035 1.574-.424 2.145-1.17.57-.748.87-1.68.885-2.797h-.036zm-3.12-2.482c.431.02.794.256 1.083.717.285.461.435 1.045.435 1.752 0 .721-.149 1.307-.435 1.771-.301.464-.66.704-1.096.704s-.795-.226-1.095-.69-.435-1.05-.435-1.754c0-.705.135-1.291.435-1.74.284-.45.646-.69 1.081-.721l.027-.039z"></path>
+        </svg>
+    </a>
+</aside>

src/wwwroot/css/site.scss

@@ -163,8 +163,22 @@ img {
     }
 }
 
-#social {
+.socialsharing {
     margin-top: 1em;
+
+    a {
+        display: inline-block;
+        margin-right: .6em;
+    }
+
+    svg {
+        width: 24px;
+        height: 24px;
+
+        path{
+            fill: gray;
+        }
+    }
 }
 
 footer {