diff --git a/webroot/img/socialhandles/keyoxide.png b/webroot/img/socialhandles/keyoxide.png new file mode 100644 index 000000000..ca8a50694 Binary files /dev/null and b/webroot/img/socialhandles/keyoxide.png differ 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` - - - Find me on ${name} - - `); -}*/ - 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; }