add keyoxide logo; adjust icon css to fit non-svg imgs

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) {

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',
+  },
 };

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;
 }