From 325e654e53458886be0c06cb6520a3418f8e3a25 Mon Sep 17 00:00:00 2001 From: Mads Kristensen Date: Wed, 20 Sep 2017 09:11:14 -0700 Subject: [PATCH] Using image map for social sharing buttons --- README.md | 2 +- src/Pages/_SocialButtons.cshtml | 23 +++++------------ src/wwwroot/css/site.scss | 38 ++++++----------------------- src/wwwroot/img/social-buttons.png | Bin 740 -> 752 bytes 4 files changed, 15 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index dbdda3c..772122d 100644 --- a/README.md +++ b/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 diff --git a/src/Pages/_SocialButtons.cshtml b/src/Pages/_SocialButtons.cshtml index e3a9d6d..a4ee56b 100644 --- a/src/Pages/_SocialButtons.cshtml +++ b/src/Pages/_SocialButtons.cshtml @@ -5,20 +5,9 @@ string text = System.Net.WebUtility.UrlEncode(Model); } - \ No newline at end of file +Social sharing buttons + + Facebook + Twitter + Pinterest + \ No newline at end of file diff --git a/src/wwwroot/css/site.scss b/src/wwwroot/css/site.scss index ee3d017..7f76fd0 100644 --- a/src/wwwroot/css/site.scss +++ b/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 { diff --git a/src/wwwroot/img/social-buttons.png b/src/wwwroot/img/social-buttons.png index d2e68ed27e233ee6ca992b398ccff639d9d3a020..04ba52880f1a3046ea9bfd48d7b985496ca4ddbc 100644 GIT binary patch literal 752 zcmVE8oG^D^-2ac zw1KsyUsw3Vr>*A`SLs*R>EAd;)3v5?n1_An3-7qq=7!XoVSF!b>_@|DPsNCut>t+? z`POZwGqm+hs@%Yi7ZG3kOhmk59xV;+ixyd5`Nl7Q-x@}HhV`0|MOIZ+uQ_Gx^_sb)U6Vl{sE~WnKU< ziI2tW1}hKT0>Frcfn)ep#FeH8%-H{?QNz%z}6zxDh+%~zhF3%Tf8uk zYvk|UZd-F$O&a!z{*~HCyr8D;IuUCECKhpFY2XcD6z_@@1`cCMZ#TXrrD1OyK&flR z37A4e><$>sPvVZ!z$?K_qC9W{U-?{G?0)5L6MJDn5wQqhLJ>EV242?{fmOFl%N?%V znc`eb>R0i(p#TesII$#fWpkPo3}#Mq+O9B=aXlw3HoJ1mif>G6K%a{%030D=_4WgQ zF@i=b76&r7+oTJ7OkKHt-6+;Dk%(;oL;F~KW%!c7Q8d~^dEkc9#VrEL4PqxF+C;u^trxYdB=M>02pnM=Q98cge4 z(YV_UtZVe|Epe@z{yjoI$)J=6UIk`U9!Ld@W)m+-!!9?Nt~05KRn#nMYipVSdTe0D z9M1Aw(~tYRHdWEJ))p~706jjCnyDS&0U!IxufF%TYi(c{U5`V>)9O7p5MXHIn$Q>q z(e0cpHr1^75AU^LrshAqJ=tmAGLRzuy2@uwI|oejzeldopPp|s3o2GMOw$Gf{rvBd inx2oUj*gCwp6@qG@`6o^xET!q0000GlNkqZgKnMTR?Z?X=(ku3z$ethvnUcr#S+OVcFi3}>n*VY!^)l~RGzQxtRj<|IUVOYKkBN7PQG-v?TjV2F->iHlNrfi zrBo`FN+TQ7hzgm@DPHuw-+bj^yBb{%BRW?I;m^i2?;}fP|NA3C4`-Oq*hV+4-Tf$Z zwzy2r75=ca=4SGv@TpOxnpp^&VO0Ct#V~+9g|LNGM+xt#sk=uAn*(MP!u3+!Eu4qh zgb)q|Oropsm{gAlM_~C@6RYWkaGz9{3s+-iJ%nG40a!r@=S#J=@Rykl?^oeA0H+CI zQ>lh_zp$AZgs>N2Og{>L7*_@(Il%aK62f(0csC2-NIBfnxSDsWH-zx8;bk_gFNC{2 z(6|J6fsy4fvk*2?v$8#HZaO(_DTHYicCzrMy236Lb~X?$@r4l#gk3Cepj7>PN<9I{ WN`g(u*l=b50000