Updated partner profile theme, other themes.

src/info/components/home-page.js

@@ -16,6 +16,9 @@ export default function HomePage({ page_title, card_title, children }) {
         <a rel="me" href="https://masto.werefox.dev/@alexis" hidden>
           Mastodon
         </a>
+        <a rel="me" href="https://masto.werefox.dev/@ada" hidden>
+          Mastodon
+        </a>
         <TCard card_title={card_title} />
         {children}
         <FCard />

src/info/components/identity-card.js

@@ -32,9 +32,11 @@ export default function IdentityCard({
               {title}
             </p>
           </div>
+          <div className="p-4 space-y-4  rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
             {children}
           </div>
         </div>
+      </div>
     );
   } else if (src2) {
     return (

src/info/components/partner-card.js

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import Image from "next/image";
 
 export function validURL(str) {
   var pattern = new RegExp(
@@ -17,14 +18,16 @@ export function renderPossibleURLField(field) {
   if (validURL(field)) {
     return (
       <Link href={field}>
-        <a className="p-2 flex items-center justify-center text-center break-all ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark hover:text-werefox-blue-dark dark:hover:text-werefox-blue">
+        <a target="_blank">
+          <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink hover:animate-yip transition">
             {field}
+          </div>
         </a>
       </Link>
     );
   } else {
     return (
-      <div className="p-2 flex items-center justify-center text-center break-all ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+      <div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
         {field}
       </div>
     );
@@ -38,48 +41,40 @@ export default function PartnerCard({ src, alt, url, fields, bio, user }) {
   const biodict = Object.assign({}, bioarray);
 
   return (
-    <div className="rounded-lg min-w-full flex ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+    <div className="p-4 flex-column space-y-4 break-all group rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
       <Link href={url}>
-        <a>
-          <div className="flex-1 pt-4 pb-4 pl-4">
-            {" "}
-            <img
-              className="rounded-lg sm:w-32 w-16"
+        <a target="_blank">
+          <div className="p-4 flex rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
+            <div className="order-1 flex-1 flex-shrink-0 relative items-center justify-center align-middle sm:w-32 w-16 min-h-full mr-4">
+              <Image
                 src={finalsrc}
+                layout="fill"
+                objectFit="contain"
                 alt={alt}
-            />{" "}
+              />
+            </div>
+            <div className="order-2 flex-5 sm:text-sm text-xs text-center space-y-4">
+              <div className="p-2 rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink group-hover:ring-werefox-blue-dark dark:group-hover:ring-werefox-blue">
+                {Object.keys(biodict).map((bio) => (
+                  <div key={bio}>
+                    {biodict[bio] == "" ? <br /> : biodict[bio]}
+                  </div>
+                ))}
+                {`- @${user}`}
+              </div>
+            </div>
           </div>
         </a>
-      </Link>{" "}
-      <div className="flex-5 p-4 sm:text-sm text-xs text-center text-werefox-pink-dark dark:text-werefox-pink">
-        <div className="grid grid-cols-1 gap-2">
-          <div className="ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg p-2 grid grid-cols-2 grid-rows-1 gap-2 bg-werefox-grey-light dark:bg-werefox-grey">
-            {Object.keys(fields).map((field) => (
-              <>
-                {renderPossibleURLField(field)}
-                {renderPossibleURLField(fields[field])}
-              </>
-            ))}
-          </div>
-          <div className="ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-light dark:bg-werefox-grey">
-            <div className="p-2 ring-2 ring-werefox-grey dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
-              {Object.keys(biodict).map((bio) => (
-                <p className="overflow-auto" key={bio}>
-                  {biodict[bio] == "" ? <br /> : biodict[bio]}
-                </p>
-              ))}
-              <p className="overflow-auto">
-                {"- "}
-                <Link href={url}>
-                  <a
-                    className="hover:text-werefox-blue-dark dark:hover:text-werefox-blue"
-                    target="_blank"
-                  >{`@${user}`}</a>
       </Link>
-              </p>
-            </div>
+      <div className="flex-column space-y-4">
+        {Object.keys(fields).map((field) => (
+          <div className="grid grid-cols-2 space-x-4" key={field}>
+            <div className="order-1">{renderPossibleURLField(field)}</div>
+            <div className="order-2">
+              {renderPossibleURLField(fields[field])}
             </div>
           </div>
+        ))}
       </div>
     </div>
   );

src/info/components/testimonial-card.js

@@ -8,13 +8,14 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
   const testimonialdict = Object.assign({}, testimonialarray);
 
   return (
-    <div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
+    <div className="rounded-sm ring-2 ring-werefox-pink-dark dark:ring-werefox-pink hover:ring-werefox-blue-dark dark:hover:ring-werefox-blue text-werefox-pink-dark dark:text-werefox-pink hover:text-werefox-blue-dark dark:hover:text-werefox-blue hover:animate-yip transition">
       <Link href={url}>
         <a target="_blank">
           <div className="min-w-full flex overflow-hidden">
             <div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
-              <span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
+              <span className="relative inline-block sm:w-32 w-16 sm:h-32 h-16">
                 <Image
+                  className="rounded-sm"
                   src={finalsrc}
                   layout="fill"
                   objectFit="contain"

src/info/tailwind.config.js

@@ -57,8 +57,8 @@ module.exports = {
   variants: {
     extend: {
       brightness: ["hover", "dark"],
-      ringColor: ["hover", "dark", "active"],
-      animation: ["hover", "focus"],
+      ringColor: ["hover", "dark", "active", "group-hover"],
+      animation: ["hover", "focus", "group-hover"],
     },
   },
   plugins: [],