From 4941a64068fe0cfb60510fa77e49b840e3b47e93 Mon Sep 17 00:00:00 2001
From: Mads Kristensen <post@madskristensen.net>
Date: Thu, 12 Oct 2017 10:14:45 -0700
Subject: [PATCH] Updated social sharing buttons

---
 src/Pages/_SocialButtons.cshtml    |  28 ++++++++++++++++++++++------
 src/wwwroot/css/site.scss          |  16 +++++++++++++++-
 src/wwwroot/img/social-buttons.png | Bin 758 -> 0 bytes
 3 files changed, 37 insertions(+), 7 deletions(-)
 delete mode 100644 src/wwwroot/img/social-buttons.png

diff --git a/src/Pages/_SocialButtons.cshtml b/src/Pages/_SocialButtons.cshtml
index de8824a..b355895 100644
--- a/src/Pages/_SocialButtons.cshtml
+++ b/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>
\ No newline at end of file
+<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:?subject=@Model.Replace(" ", "%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>
\ No newline at end of file
diff --git a/src/wwwroot/css/site.scss b/src/wwwroot/css/site.scss
index 279c6bb..7fc1a72 100644
--- a/src/wwwroot/css/site.scss
+++ b/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 {
diff --git a/src/wwwroot/img/social-buttons.png b/src/wwwroot/img/social-buttons.png
deleted file mode 100644
index 655ce4b3befc678d18db0062f59bab8190f1f066..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 758
zcmV<S0tx+zP)<h;3K|Lk000e1NJLTq003?P001Be1ONa4SpbD>0008LNkl<ZcmeI#
z1F-se1IE$Qt+j32wr$(CZ5!{}wr$(CZQFX*Xqwyf?T>fSdGhcRf9W+kIyySK4Bo=J
z{Qtp#2G_q9_32{o`#|%(?^1p0F?}1uNZL1r1KsBxAA8*mHa4i{Fodt9g?(d4t*IDR
zqt!g+TVJ@*R0g-U36<#IQ6l0qABu?Q&7nDi`?yKcr#|=nZ?}ffnjt-BKK0fWzs*<P
za=DRI3({^BKRDDhhBT<LZR$PowOQMZ+t(z9HN3eB<0cVbTN40-`B46{AKYm*U0QXN
z_|%*LU;^)nmkdOC+$I2qEsPt*4<arxHDFqePh3^2CKRy>2DY`0^aa>l#A@Ynuj&&F
zWnv2##&Nm)wwr8e7Ar~J-q*L*?IE64Rdc0?RRQCRIHx@BYA}K~L<-}Eu&CG6zYSBj
z*Yu-xSBRrAiHO)4Fp_V@&E;{Ifa#<>&Nx2xku=#|O57-R!@MG50l>H-t}c(evi&$+
zZjz=uNQqO#8JN%y;v<6r<`Z#DS={nwH6a+ttY)=UVH{(6QkraLC6*MQn^3<#5*GtF
zSj5UDao-z8y=9BznB9%i%^p-!qEFX|Rg5QM3&7ys6Q3HoEN%q#b}5guu5`Nvlp4Tx
zhP8o+vq8Tu5V1QYadC(1><Y$po$I_&9;fEWZqiQFt_wxP6%O*Kh#T}<8W(X5n7*wq
z6o4t6A@y^U{<WuXuZk;ND<ZyetN~FT=Tb0jTX7XIk_|j7b-Tzw+BKnw6;v%~bE_H$
zdUssKEKc>LAEa(?*ic3LRu?fg0RN9TswTIOyS?XIKlsXPuCR_F^q2$0V`~5JIDo;8
zX<VZi06p$Fu_2Ah|EyjCrfc}K`u}sHSM{e*pDy)b!%hcN{N<6$_2vI*BlA+O%McA4
o2=wunN2>n6y7X=x9UUD%0?K!SO&ky|DgXcg07*qoM6N<$g6GI+asU7T