Lots of minor edits.

src/info/components/footer-card.js

@@ -6,17 +6,17 @@ export default function FooterCard() {
     <WCard>
       <footer className="p-4 space-y-2">
         <div className="container flex text-werefox-blue-darker dark:text-werefox-blue">
-          <div className="flex-1 lg:pl-16 pl-4">
+          <div className="flex-1 sm:pr-16 pr-4">
-            <p className="text-center sm:text-md text-sm transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
+            <p className="text-right sm:text-md text-sm transition">
               <Link href="/contacts">
-                <a>Contact</a>
+                <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink">Contact</a>
               </Link>
             </p>
           </div>
-          <div className="flex-1 lg:pr-16 pr-4">
+          <div className="flex-1 sm:pl-16 pl-4">
-            <p className="text-center sm:text-md text-sm transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
+            <p className="text-left sm:text-md text-sm transition">
               <Link href="https://gitea.werefox.dev/shadow8t4/info-werefox-dev">
-                <a target="_blank"> /src</a>
+                <a className="hover:text-werefox-pink-dark dark:hover:text-werefox-pink" target="_blank"> /src</a>
               </Link>
             </p>
           </div>

src/info/components/love-card.js

@@ -17,14 +17,14 @@ export function renderPossibleURLField(field) {
   if (validURL(field)) {
     return (
       <Link href={field}>
-        <a className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light 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 className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey-light 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">
           {field}
         </a>
       </Link>
     );
   } else {
     return (
-      <p className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
+      <p className="p-2 text-center overflow-clip overflow-auto ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
         {field}
       </p>
     );
@@ -63,7 +63,7 @@ export default function LoveCard({ src, alt, url, fields, bio, user }) {
             ))}
           </div>
           <div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-light dark:bg-werefox-grey">
-            <p>
+            <p className="overflow-auto">
               {bio}
               <br />
               {"- "}

src/info/components/testimonial-card.js

@@ -2,14 +2,20 @@ import Link from "next/link";
 
 export default function TestimonialCard({ src, alt, url, innerText, user }) {
   const finalsrc = Boolean(src) ? src : "/images/logo.png";
-  const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink"
+  const isMe =
-  const isMeLink = (user == "Shadow8t4") ? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink": "hover:text-werefox-blue-dark dark:hover:text-werefox-blue"
+    user == "Shadow8t4"
+      ? "text-werefox-blue-dark dark:text-werefox-blue"
+      : "text-werefox-pink-dark dark:text-werefox-pink";
+  const isMeLink =
+    user == "Shadow8t4"
+      ? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
+      : "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
 
   return (
-    <div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+    <div className="rounded-lg min-w-full flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
       <Link href={url}>
         <a>
-          <div className="flex-1">
+          <div className="flex-1 pt-4 pb-4 pl-4">
             {" "}
             <img
               className="rounded-lg sm:w-32 w-16"
@@ -19,14 +25,17 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
           </div>
         </a>
       </Link>{" "}
-      <div className={`animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center ${isMe}`}>
+      <div
+        className={`flex items-center justify-center animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center min-h-full ${isMe}`}
+      >
         <p>
           {innerText}
           <br />
           {"- "}
-          <Link href={url}>
+          <a
-            <a target="_blank" className={`transition ${isMeLink}`}>{`@${user}`}</a>
+            target="_blank"
-          </Link>
+            className={`transition ${isMeLink}`}
+          >{`@${user}`}</a>
         </p>
       </div>
     </div>

src/info/components/werefox-card.js

@@ -22,12 +22,12 @@ export default function WerefoxCard({
       <div className="container">
         <Link href={url}>
           <a
-            className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-4 text-xl text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
+            className={`${extraClasses} p-2 block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
           >
             {images.map((source) => (
               <span
                 key={source.src}
-                className="relative inline-block w-8 h-8 align-middle mb-1"
+                className="relative inline-block w-6 h-6 align-middle mb-1"
               >
                 {" "}
                 <Image

src/info/pages/contacts/index.js

@@ -16,7 +16,7 @@ export default function Contacts() {
             </p>
           </div>
           <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
-            <p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="p-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="https://vulpine.club/@shadow8t4" target="_blank">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image
@@ -36,7 +36,7 @@ export default function Contacts() {
                 @shadow8t4@vulpine.club
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="https://twitter.com/alexis_werefox" target="_blank">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image
@@ -56,7 +56,7 @@ export default function Contacts() {
                 @alexis_werefox
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="https://www.twitch.tv/alexis_werefox" target="_blank">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image
@@ -76,7 +76,7 @@ export default function Contacts() {
                 @Alexis_Werefox
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a
                 href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
                 target="_blank"
@@ -96,10 +96,10 @@ export default function Contacts() {
                 href="https://vid.werefox.dev/accounts/shadow8t4/video-channels"
                 target="_blank"
               >
-                @shadow8t4@vid.werefox.dev
+                vid.werefox.dev
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="https://write.as/a-letter-to-the-void" target="_blank">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image
@@ -119,7 +119,7 @@ export default function Contacts() {
                 write.as/a-letter-to-the-void
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="https://werefox.dev" target="_blank">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image
@@ -139,7 +139,7 @@ export default function Contacts() {
                 werefox.dev
               </a>
             </p>
-            <p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
+            <p className="pl-4 pr-4 pb-4 md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
               <a href="mailto:adh9694@gmail.com" target="">
                 <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
                   <Image

src/info/pages/faq/index.js

@@ -1,5 +1,3 @@
-import Head from "next/head";
-import Image from "next/image";
 import BasicPage from "../../components/basic-page-template";
 import WCard from "../../components/werefox-card";
 import TCard from "../../components/testimonial-card";

src/info/pages/hrt/index.js

@@ -46,17 +46,19 @@ export default function HRT({ startTimes }) {
       card_title="Track my HRT progress!"
     >
       <WCard>
+        <div className="p-4">
         <p className="pt-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
           I'm so glad you're interested!!
         </p>
         <p className="text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-          I have been on HRT for:
+          I've been on HRT for:
         </p>
         <div className="pb-6 text-lg md:text-2xl text-center text-werefox-blue-dark dark:text-werefox-blue grid grid-cols-1 grid-rows-4">
           {Object.keys(timesArray).map((t) => (
             <p key={t}>{timesArray[t]}</p>
           ))}
         </div>
+        </div>
       </WCard>
     </BasicPage>
   );

src/info/pages/index.js

@@ -138,7 +138,7 @@ export default function Home() {
         </div>
       </WCard>
       <WCard>
-        <div className="p-2 space-y-2">
+        <div className="p-2 space-y-3">
           <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
             <p className="p-2 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
               Useful Pages! (hopefully!)