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,7 +32,9 @@ export default function IdentityCard({
               {title}
             </p>
           </div>
-          {children}
+          <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>
     );

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">
-          {field}
+          <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>
+        <a target="_blank">
-          <div className="flex-1 pt-4 pb-4 pl-4">
+          <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">
-            <img
+              <Image
-              className="rounded-lg sm:w-32 w-16"
+                src={finalsrc}
-              src={finalsrc}
+                layout="fill"
-              alt={alt}
+                objectFit="contain"
-            />{" "}
+                alt={alt}
-          </div>
+              />
-        </a>
+            </div>
-      </Link>{" "}
+            <div className="order-2 flex-5 sm:text-sm text-xs text-center space-y-4">
-      <div className="flex-5 p-4 sm:text-sm text-xs text-center text-werefox-pink-dark dark:text-werefox-pink">
+              <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">
-        <div className="grid grid-cols-1 gap-2">
+                {Object.keys(biodict).map((bio) => (
-          <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">
+                  <div key={bio}>
-            {Object.keys(fields).map((field) => (
+                    {biodict[bio] == "" ? <br /> : biodict[bio]}
-              <>
+                  </div>
-                {renderPossibleURLField(field)}
+                ))}
-                {renderPossibleURLField(fields[field])}
+                {`- @${user}`}
-              </>
+              </div>
-            ))}
-          </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>
-        </div>
+        </a>
+      </Link>
+      <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"],
+      ringColor: ["hover", "dark", "active", "group-hover"],
-      animation: ["hover", "focus"],
+      animation: ["hover", "focus", "group-hover"],
     },
   },
   plugins: [],