- reduced custom styles, use mostly tailwind classes

- updated markdown css for extrausercontent

webroot/js/social.js

@@ -1,76 +1,6 @@
 import { html } from "https://unpkg.com/htm/preact/index.mjs?module";
-
-const SOCIAL_PLATFORMS = {
-  default: {
-    name: "default",
-    imgPos: [0,0], // [row,col]
-  },
-
-  facebook: {
-    name: "Facebook",
-    imgPos: [0,1],
-  },
-  twitter: {
-    name: "Twitter",
-    imgPos: [0,2],
-  },
-  instagram: {
-    name: "Instagram",
-    imgPos: [0,3],
-  },
-  snapchat: {
-    name: "Snapchat",
-    imgPos: [0,4],
-  },
-  tiktok: {
-    name: "TikTok",
-    imgPos: [0,5],
-  },
-  soundcloud: {
-    name: "Soundcloud",
-    imgPos: [0,6],
-  },
-  bandcamp: {
-    name: "Bandcamp",
-    imgPos: [0,7],
-  },
-  patreon: {
-    name: "Patreon",
-    imgPos: [0,1],
-  },
-  youtube: {
-    name: "YouTube",
-    imgPos: [0,9 ],
-  },
-  spotify: {
-    name: "Spotify",
-    imgPos: [0,10],
-  },
-  twitch: {
-    name: "Twitch",
-    imgPos: [0,11],
-  },
-  paypal: {
-    name: "Paypal",
-    imgPos: [0,12],
-  },
-  github: {
-    name: "Github",
-    imgPos: [0,13],
-  },
-  linkedin: {
-    name: "LinkedIn",
-    imgPos: [0,14],
-  },
-  discord: {
-    name: "Discord",
-    imgPos: [0,15],
-  },
-  mastodon: {
-    name: "Mastodon",
-    imgPos: [0,16],
-  },
-};
+import { SOCIAL_PLATFORMS } from './utils/social.js';
+import { classNames } from './utils.js';
 
 export default function SocialIcon(props) {
   const { platform, url } = props;
@@ -82,20 +12,28 @@ export default function SocialIcon(props) {
   const name = inList ? platformInfo.name : platform;
 
   const style = `--imgRow: -${imgRow}; --imgCol: -${imgCol};`;
-  const itemClass = {
+  const itemClass = classNames({
     "user-social-item": true,
     "flex": true,
+    "justify-start": true,
+    "items-center": true,
+    "-mr-1": true,
     "use-default": !inList,
-  };
-  const labelClass = {
+  });
+  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" style=${style}></span>
+        <span class="platform-icon rounded-lg bg-no-repeat" style=${style}></span>
         <span class=${labelClass}>Find me on ${name}</span>
       </a>
   `);