From ce3a47d5f414cd4baaa281cedd4900102796c13e Mon Sep 17 00:00:00 2001
From: Ginger Wong <omqmail@gmail.com>
Date: Sat, 9 Jan 2021 16:32:07 -0800
Subject: [PATCH] add keyoxide logo; adjust icon css to fit non-svg imgs

---
 webroot/img/socialhandles/keyoxide.png       | Bin 0 -> 5091 bytes
 webroot/js/components/platform-logos-list.js |  38 -------------------
 webroot/js/utils/platforms.js                |   5 ++-
 webroot/styles/user-content.css              |  11 +++---
 4 files changed, 10 insertions(+), 44 deletions(-)
 create mode 100644 webroot/img/socialhandles/keyoxide.png

diff --git a/webroot/img/socialhandles/keyoxide.png b/webroot/img/socialhandles/keyoxide.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca8a506948b37ccee03a053c1fff8fef039e3cfa
GIT binary patch
literal 5091
zcmV<96CCV`P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_g-Jv~RCwC#T?u>?Ri1vYs=7O!PCDsy
z0)!X>iR6MHAP|OIPGJxhh$xC9x+Cr!>--pGTxFe6Mt_4cJMO4E%pkiQGwO)oh`_>t
zh$5%MO$dpQgb;Fe?xfR49dD}AS5<XYb#<o$9n8}t-Fcz9`hR@i_y50F)es>BB7NMv
zMz6U14|0P}2O7pq)h>@u#Lj}dWWY#w07C=a-oMydXc|Ou&y$j|FDA{^&G5{VBruj-
zAlEiGFk_4+tT1~d@tQ6QT6&8Eh{z8Sz(5R;!0iAWhjz~t8#~y^gO0rowajGhxuu$!
z&V5Z^s2hXfz|k8VfJOWXvc?}fRr@#>-H8LRuk!LWt2}e<EliHb_@2?$%nWa=XD0Mz
zKp4k>LHHi-OEN#C29o)GUj~GC#KvPq=Kk1m{_l+O(C>GBB;138bfWm;^VG{t7G_*r
z0(LoP6!EG~59|6I&^PWL4)6?`0#Su$$mh$7sb!s3l+41-^~^lY=ByFKdtJ!iR|oW<
z@!5Ld;7<F&+FSG#@!Zhi#Fj~ObWit22lN^eE;>g(CuMwYTq~rWsw|_w-v>cGIBtAP
zJ*+riLM=^A$M=a^7_*AbP%9d$nfoXfzKrqM&A~a?zP$08KWVg}qt5|B42KPwmFDd>
zl*Cg;G5bGqY%eXO7ICElbkzo+wUNoVRSF+Cf0SB1ce!rqz`@wDJ_u4dSczE@VE$^C
zof&|C_GkO9>xJYZ<gUuN|2Quo=z7-ChLU%0wjZ!mF{An%pmOAn*1Rn@hZDe_eIM~h
z?s4H+@~QG`)NJH4J@7q7UMD!6$Z&X<bJLx!ntP1{QU>D(#!S)v0zyCwFjNCNr_9qW
zH=3|(-1BoMoj-ON+GlJ(N4V!$QXf-W$>jHOfXb0KR<nU4+VW!RQClbK9~+02rRNau
z8)D%tZk{5MzOIHE>1z>j&;#8Sf=6z<IDvBnWap|Y=m`S`VW;{WpmM~Uv7%8EwZD`k
zY6mbP&aUo==S=M~w5vbI2EKd7<p}PX&59Cbiay=xBhHsfi>L+cpJ79?iGAZ|Xn)OS
zob5a90HqOafEJ8EPKJV7Zw3gm!EJcto9mQuz~1-mJGzYT9+n#C2o|!&7W}Jzc9&m!
zOC`*`?TR)szqrvctEPj@YjV)3Gy^m-8qAUujbG1**M6OAjye!Uz_xI_-j1!-ePt!&
zJlC6p-dOj_QO|P(J^n!EM7%_&hb<{-*oi6gb*pP`()l0$k4+Mm3ZBu=9CR;!IN~#a
zTdn%0*7k!#71sZ#w~|?i=MgUqGyw4BP3up!II!j?M{l2-9{cM!9bVI&*Bv)m_g|&o
zl5@S71N=Fl>pMiAKY@)FI-C1#lLgD>9MDwH<jNhNoy!TQ1A0USHQMO(x6U>mf4``8
zi=6Qh@|Xkx2ZanrE3H3z^>|&$sp`%ryYt$EGl(zpC+jxwUa3p<c>N$yMSQiy6?06y
z(~gV@Nm#Mm@l8p}^~fD}KxI35|8LJUp1#paj`zILF2jqA@9~J|G55npGO^n(H*MWf
z-12(_Lf7Zh=jvaWK2N^};)wJ!wxBNXm!{W?sD;Uc@KZyw@crWB-jj}h70&4Is$pJv
z<(04<tiF@Vdi!kiSDhqnmWz6?;d!Wl0OCCcpuEMA&w)c`g6^wO&*h#p;)JD+8D^=Y
zhx4JQ>j&gL2g1jeYBXxtXwCMVQJVJ|1`u|Zq@$u?)3E!AZL<q>D{%sbb+JEeBup_#
z_vSZ^=W4BFt~cs|&&qO9@A*T-BM%R9|7=XsoSej{L!q3{)k0^%?vJh8X(!SP2^jMH
z0Da<!H`jk4etyB@`lYPoz24KxEo=@rc%$Q`J*Dlh`w=bTW3PPFdkpXM0|H6WMCrOI
z$vHTLq}ub~qW16s>l>$z+gGtF2>PiWDODt)mT(+6GjcS02c+O<FbvRjRrKgvrOdSa
z>Dt#vP1L*-Q4Vm@$neYK^%YhpV-6JceB+Cw-p_gLSdnLbYQjB+t!mE0YGwNE`fK|K
zH%h4)d|=^6z0eU*06=PFtKI+`R=yOIN)W&vF(iD+VqfSoKJq~d;wcVZ)FXt1@WeAd
zLP)5R*l)*gb*xZx4mZllsT<#ExmZ?4&Tx^f4B<kN3KGvjVe`%#PVPCba=unbE{-S_
zbfv*DPfA`Q<PSNB4>`On;Af)Gc>r8%vQM&6Oq@c!0Z*Rj{MoiGEr;6M=>cAYLIq<(
zw?PGxKqOnmT~wZ0s<=+ijHp7avfVja04buV2MVMsFgy>pJbb|bgjcpX@5@YxIx2o$
zyB)=S@=4p4t3{4QJ~DOncs$>syCcfMi;LVnhK2w@&x!Hc6<)O@KUaN|%8w`qG~4ME
zq=5BGL@O2bVlHU5(JA8Bv{<O@4?b+&WvQofU6rldzzFeL{JiQHdd?+~v4s`0)SR^g
z^^YhAa3t&}FZq$IK(vVWO-dzoRj4!*!+*W=7i>>_y1VU<B#EM-*w_&Aq?gFp5Qyd^
zjE(%A2i^S8)m=s0j%*YiQ4V0Z(?g+0J>L;h^3@a46oqvA54OK~{G|0c=rJe~8If;n
zBy2tVvcdItVp!@jFm%Hg@~s;Pj=}zj(qm1L)r>>RMO9EyFRmTjkDFWQw7>kd>El~f
z<XC}0Ap}Cr>zfn9l6N7-!xECP6qp~3W>_9k4v>m^{@V#D>UlP;Zy>YY`KW$fJBz*0
z8?hpTLf?W5^fv56fh7rk5J6Vz5aMWrW`J^0g@TBBzH^VB=vWoifxFD;T~v{P9;G>z
zup~CN3zpnYcf-=q9OAPG%YXp#QX=a4jtJZ{^7JuP8e0LDgmeC|)FoSyL>9SWDP<6G
za$qWPI>ItQ6tyV$s24cTuXX_b#^4*<Z^4BJOF(E)FX4Jtj-@z20kWpf(!U(eW?UFE
zAaJBh_JIVDBV9)@ZW+j5-SS4Pd#{g2B0?Zh2fzTZq>>-TP0+nPBtvsJ;v5i6QKdTS
z#dU-SDxgau`jKUKU?~7UaQ}2j2J!i<xrR02ZbuX0G=89{=jVqkWXTXYQd_wyz>=J7
z6~dCgY|Y8l{cXu3vCFs?bwoNK$f8Q7XCz-eBRLL`U35q8pccZCoNSfj0Pe_>CL7+I
zG0U))TNCJs1sNio#t%wf257<|p_^PBAZil`HeMmVfq4ohMA;f0jW-q)7@x?@)b8)e
z6|pd708(94h1N6jK!p1z;!DKtz>+jS3>>IE_t>(y0+R_Z2R%H(mjOs!Q6)>XGDVwj
zjUkxsr93Q&=O9lvaj-Ocr2fzUvcUMPMgwi&HjEy~02NUmYR^bz_mXdHaeG26TRmAs
z5YWDGzVYA3-XFag+{O{UIv^BzDUz$=sQ1;uz>fobm8%ez#Doi=5-ho%n@#xjA1pI1
zNgklN1a9*P8w7<aFXj0{oK^0gJOZLZE3`!w&s=VnZqK8OO;76eSTnc-BWw^9R8fUg
zM7>B+p>8g!i1`7-5Iu9M@wM60jO$qFXTTjAVa|XcqF%=M(nXsD2Y4M3xR)=!ULZCG
zvn*ed_*iC!?sIU5M;LcUtCyFd^o*nmChrOs0-{0-3S=waN$G>4jy<{5{776ZUJW8(
zgsl~ULX?+kx}(6WT#&o671aSMV2J~sspF0Ry<k@S3plQRr(LhffN(Cvi+e^44@4A=
zEdxtBE!Oea0`m_?4>x=SB5V*nVtf@*FIhXt)CNuy0=SL+^6pFKcQ2JWAi1CB$}>y*
z74%Qk6oUvH;aiaDPSgkJ8PPffI)*Sn+lYav2HfXG2>oD*Pq<@77(RG>e&R~47Ft1s
zj__<tK`w+2MqUQ$j!Lz;9SJmW8fajs)d0dS4@(3NodvVatEY`Kz6&CJgoy*7Pkzd@
zBf7gq(c6~O0??jH0$no(^o@kDlga*Xip48eKHPt4`aMynKra|!QbCMMqo^#ZR7brW
zq_MANH?i3e&48GC0^oM6YcgxF{>zn%2P`wj;I*Kaj4)<E@KG;-ETuk?h%Y?Hr*#Zy
zO>u&#791?e?YDl>H1mIAuxA!ddTL-{$^aik@U9CGMm-YsjD*((2#wF%ozGvAM0{>>
zACJw3P7?)=b~b&#yxBGq^s*5i2hf0bEr5_{C9j6zWd$E{5K>T4;_Zr}EURd-=dC$V
zdTRUmn)M`&bl)ilFeL9%2EpPC63NRTqF!{h3_t3<IfjtH(KN#lJFi$?ShfG!*>4*<
z$9;Dk;Gm_W9tp38ks{iFQO{REN;|N5Sys_(8@A@a^%L99)vR~YDC(|v0M$XOj(Q}D
zdZ0Gy#azJW76H7up3w;59~aiW@RQGq3k&Nyrrg~Qu+o5`8DZ1|bx|+5n6DJ|ysQ$}
z5rQJn{ST|#9T_kFz4VL!JyW&8Ni+Jp6M|S3L^e^PNS7vBKcZG3TEz?e_|B8rmFGDI
zjTn5_mHOv@`dRV$qI&CuyUqce6m+&a0nKrNz!-t$Ww<YE71j<y`C8d(&w74;$=92{
zx%E2-#YEpd4sgF|d#!_&q^Mi+vb&eH3i-mn@5C?w`{YXfsvqqxy1;V7<h#THt~bn3
z46xVO0V0{e@)D_&my%I0aISLHBYx4w69!eSj-k*0f614BICb;)c8W3F6&b*N(M|@~
zs_lU8q(d&MfZC{+AacoWtH8Ow<1-AxKD|=^+_QhXa`94a`_x|R004zs2ss$C*ExW*
zk#s>)2t}2gyp)W3URD8xsP}7)xc_-|t36}&-r^%~9lP<TPLhu8of!cAFYTw=DPXU5
z0LI3ITvW-)OSz~=qNo>d7C=b4A;|Su_g=NEd}deSrE^tnGkYZm_}}cpl?~2%Cm<V~
z05OcHXB1l0BYxBa<)}xZs24g~)EZ%*)wVkZui008@ONLA-<E6$I|qpGTI>1Fbh5QV
zE$PYzL3QijrVc9VRon_q2yYUKOr+Sjv)^;Ie&y32U%q_4s%?6&$N(U|y^D8Grw^7G
z3IVEt1au?i*C$e2RLNe<Ekm?^&J#IT;5-qx)VABxR_`l1^nd@TT-Tj@*xiOgOqv6P
zH_Z0Ah-R~as%0UmD;q*9s*s4tfdY~9<*+d7#cLS;j^^ryZD*@qe(Px2A9^PTNWfCp
zf2>NS*i2xW=`NlKrKnPjdR|rm#i&<U!{EK%r&sF!?ZXSzYkCg{D8Le5wsPFSSXd|6
zQOHG=oV=7O0{wSjt60NuAOF466|a>ybq<TXIsl08Iu#@=u^GTLu})}VfO~Z_=%|;I
zmr_xWl=h-3baP1>X*Zs%cq1}70Lb6sOEoOn*e^C4fIYChRE&BFd8rij2uQR(#6_a}
zC?{_;&8uj(Wk((dKoxhU1@a%L;Dsdyb!7r*;gM>PMU{}qfgjNZihAL)sgPUPGlO50
zHar};8~}yJ7Q>SG9?n7%_sLdZX8>&AeuiFD0a4K=xywRD)O*_Mp5tGvYMl~s831H%
z^QaD%WcY#22H1wcgK3GI<Dv*lC`Fa9XC$$*rXuRai$7&eow>b>13(}SQ09lBrs%Wp
zEgm*(>R{6j^+lC}yab_a7VrgFo1HR6lmiSpqD7GdpfU%50J1e!k2iA}uy%U-BkN`j
zeaNgQssk5Q!EKQVyjj5KXoCBM??`fh*`TRWx-+d9mc+6Z1(2-?F&gjXMB@j=?cKCw
z_=xEl<_|(Gs=B*bAWpBbM3e&tCFn~8gzLGkS2Zlj^8@!I#T0do|9VCp(fHB>>5s3Q
zb?>5tXiaS>MU|Ln18tGv%i*Esn2QnRfQcCidn64C6^yM?wq_<9zA+gzlDnNJ4mN$d
z<>3)I^K+6m1zS`p?y?B5MP__j{NE$W0h3q<Xf)8S?uOaY{2*6NPsujzRC?_gE#C6;
z$wQufeNN^A77D9_k(YokFGXt%ehokOA883_o0gIINklmyp2ft1kptgVx?#2tmZS++
ziUSf@Zh2^A|BY(SVM3Z|51S3c=VT^r3rSvz))=I=+H;Q=<|c1u-)}?2^@5%pm-?Id
zXrkT~xxnx4<o<Ux56llwPflGMrNLBR-xaGPnqPb%W5tGf*>jT&+DbJ=l~UA;x7wSd
zwY4k1m-efOY{nU*h^F-mhAk#==n&vM2!R9G-_OZQ-1=Z%(w0!pW!#|n1KS=MnfFjm
zzfDlkT=g%il&)#xlRAz;^3?~kmUB)Hrvt+NL2idiERU``P_mVz8J+NBLR>f`{iznN
z=a5J0uP(?c(BQD!_h>tPvt`a3M@rwT@35za`oTh7#-Ee@#H`GuuwQ4~BcG&qvAT8Q
zi+ir_Y_vKDKpA6upYsflv7!H1e##rqOiEjeh4BU&Rwr$I_jvhl_gty_A>+G>Th&$j
zNi4Cio0GHr{?zy*J+UIzV;^PMNzySpFI4|z%juhIZBEzj0<YoyvH^g+fyNU*o-+6s
zc`3%@pohlAnzl(BPuy64sk&`qpbr+(5}0jCUh>AL$ECf_!D~;QQ;&a^WSgBzI9Ap;
z|5#bm{2Ptd+(s)ofZGbll4N!N7+vL<G}Gb9840`ZO)}iJn<af~=@@mSv|-7Gs<ug$
zEw-T!iq>;hFzdB->4}EREQfqPb7;~I7Vlen`dt1gzyQ_`_mU-<O8fu-002ovPDHLk
FV1kg%$0Yy&

literal 0
HcmV?d00001

diff --git a/webroot/js/components/platform-logos-list.js b/webroot/js/components/platform-logos-list.js
index 880c4dac2..3c31838fd 100644
--- a/webroot/js/components/platform-logos-list.js
+++ b/webroot/js/components/platform-logos-list.js
@@ -44,44 +44,6 @@ function SocialIcon(props) {
     `);
 }
 
-/*
-function SocialIcon(props) {
-  const { platform, url } = props;
-  const platformInfo = SOCIAL_PLATFORMS[platform.toLowerCase()];
-  const inList = !!platformInfo;
-  const imgRow = inList ? platformInfo.imgPos[0] : 0;
-  const imgCol = inList ? platformInfo.imgPos[1] : 0;
-
-  const name = inList ? platformInfo.name : platform;
-
-  const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`;
-  const itemClass = classNames({
-    "user-social-item": true,
-    "flex": true,
-    "justify-start": true,
-    "items-center": true,
-    "-mr-1": true,
-    "use-default": !inList,
-  });
-  const labelClass = classNames({
-    "platform-label": true,
-    "visually-hidden": inList,
-    "text-indigo-800": true,
-    "text-xs": true,
-    "uppercase": true,
-    "max-w-xs": true,
-    "inline-block": true,
-  });
-
-  return (
-    html`
-      <a class=${itemClass} target="_blank" href=${url}>
-        <span class="platform-icon rounded-lg bg-no-repeat" style=${style}></span>
-        <span class=${labelClass}>Find me on ${name}</span>
-      </a>
-  `);
-}*/
-
 export default function (props) {
   const {handles} = props;
   if (handles == null) {
diff --git a/webroot/js/utils/platforms.js b/webroot/js/utils/platforms.js
index 3f1fe549b..77d7d1e33 100644
--- a/webroot/js/utils/platforms.js
+++ b/webroot/js/utils/platforms.js
@@ -1,4 +1,3 @@
-// x, y pixel positions of /img/platform-logos.gif image.
 export const SOCIAL_PLATFORMS = {
   default: {
     name: "default",
@@ -77,4 +76,8 @@ export const SOCIAL_PLATFORMS = {
     name: "Ko-Fi",
     icon: '/img/socialhandles/ko-fi.svg',
   },
+  keyoxide: {
+    name: "Key Oxide",
+    icon: '/img/socialhandles/keyoxide.png',
+  },
 };
diff --git a/webroot/styles/user-content.css b/webroot/styles/user-content.css
index 08ee172b4..21960cf78 100644
--- a/webroot/styles/user-content.css
+++ b/webroot/styles/user-content.css
@@ -3,17 +3,18 @@
   width: var(--user-image-width);
   height: var(--user-image-width);
   max-height: var(--user-image-width);
-  /* background-size: calc(var(--user-image-width) - 2em); */
   background-size: cover;
 }
 
+.user-social-item {
+  margin-right: .85rem;
+}
+
 .user-social-item .platform-icon {
-  --icon-width: 40px;
+  --icon-width: 28px;
   height: var(--icon-width);
   width: var(--icon-width);
-  /*background-image: url(/img/platform-logos.gif); -->
-  background-position: calc(var(--imgCol) * var(--icon-width)) calc(var(--imgRow) * var(--icon-width));*/
-  transform: scale(.70);
+  background-size: cover;
 }