Added optional flag for local page to change the theme.

src/info/components/footer-button.js

@@ -1,19 +1,34 @@
 import Link from "next/link";
 
-export default function footerButton({ url, inner_text, is_external }) {
+export default function footerButton({ local, url, inner_text, is_external }) {
   const target = Boolean(is_external) ? is_external : "";
-
-  return (
-    <div className="flex-1 overflow-visible">
-      <Link href={url}>
-        <a target={target}>
-          <div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue  text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition">
-            <p className="pl-2 pr-2 text-center sm:text-md text-sm">
-              {inner_text}
-            </p>
-          </div>
-        </a>
-      </Link>
-    </div>
-  );
+  if (local) {
+    return (
+      <div className="flex-1 overflow-visible">
+        <Link href={url}>
+          <a target={target}>
+            <div className="ml-1 mr-1 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue  text-skye-werefox-pink-darker dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light transition">
+              <p className="pl-2 pr-2 text-center sm:text-md text-sm">
+                {inner_text}
+              </p>
+            </div>
+          </a>
+        </Link>
+      </div>
+    );
+  } else {
+    return (
+      <div className="flex-1 overflow-visible">
+        <Link href={url}>
+          <a target={target}>
+            <div className="ml-1 mr-1 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue  text-alice-werefox-red-darker dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light transition">
+              <p className="pl-2 pr-2 text-center sm:text-md text-sm">
+                {inner_text}
+              </p>
+            </div>
+          </a>
+        </Link>
+      </div>
+    );
+  }
 }

src/info/components/footer-card.js

@@ -1,39 +1,82 @@
 import FButton from "./footer-button";
-export default function FooterCard() {
-  return (
-    <footer className="p-4 space-y-2 rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
-      <div className="flex text-alice-werefox-red-darker dark:text-alice-werefox-red-light">
-        <div className="flex-1"></div>
-        <FButton
-          url="https://info.werefox.cafe/contacts"
-          inner_text="Contact"
-          is_external="_blank"
-        />
-        <FButton
-          url="https://gitea.werefox.cafe/ada/werefox-cafe"
-          inner_text=" /src"
-          is_external="_blank"
-        />
-        <div className="flex-1"></div>
-      </div>
-      <div className="text-center text-xs text-alice-werefox-grey-darkest dark:text-alice-werefox-grey-lightest">
-        This site uses{" "}
-        <div className="inline-block pt-1 pb-1">
+export default function FooterCard({ local }) {
+  if (local) {
+    return (
+      <footer className="p-4 space-y-2 rounded-lg ring-2 ring-skye-werefox-grey dark:ring-skye-werefox-grey-darker bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
+        <div className="flex text-skye-werefox-pink-darker dark:text-skye-werefox-pink">
+          <div className="flex-1"></div>
           <FButton
-            url="https://mutant.tech"
-            inner_text="Mutant Standard emoji"
+            local={true}
+            url="https://info.werefox.cafe/contacts"
+            inner_text="Contact"
             is_external="_blank"
           />
-        </div>
-        , which are licensed under a{" "}
-        <div className="inline-block pt-1 pb-1">
           <FButton
-            url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
-            inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
+            local={true}
+            url="https://gitea.werefox.cafe/ada/werefox-cafe"
+            inner_text=" /src"
             is_external="_blank"
           />
+          <div className="flex-1"></div>
         </div>
-      </div>
-    </footer>
-  );
+        <div className="text-center text-xs text-skye-werefox-grey-dark dark:text-skye-werefox-grey-lightest">
+          This site uses{" "}
+          <div className="inline-block pt-1 pb-1">
+            <FButton
+              local={true}
+              url="https://mutant.tech"
+              inner_text="Mutant Standard emoji"
+              is_external="_blank"
+            />
+          </div>
+          , which are licensed under a{" "}
+          <div className="inline-block pt-1 pb-1">
+            <FButton
+              local={true}
+              url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
+              inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
+              is_external="_blank"
+            />
+          </div>
+        </div>
+      </footer>
+    );
+  } else {
+    return (
+      <footer className="p-4 space-y-2 rounded-lg ring-2 ring-alice-werefox-grey dark:ring-alice-werefox-grey-darker bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
+        <div className="flex text-alice-werefox-red-darker dark:text-alice-werefox-red-light">
+          <div className="flex-1"></div>
+          <FButton
+            url="https://info.werefox.cafe/contacts"
+            inner_text="Contact"
+            is_external="_blank"
+          />
+          <FButton
+            url="https://gitea.werefox.cafe/ada/werefox-cafe"
+            inner_text=" /src"
+            is_external="_blank"
+          />
+          <div className="flex-1"></div>
+        </div>
+        <div className="text-center text-xs text-alice-werefox-grey-darkest dark:text-alice-werefox-grey-lightest">
+          This site uses{" "}
+          <div className="inline-block pt-1 pb-1">
+            <FButton
+              url="https://mutant.tech"
+              inner_text="Mutant Standard emoji"
+              is_external="_blank"
+            />
+          </div>
+          , which are licensed under a{" "}
+          <div className="inline-block pt-1 pb-1">
+            <FButton
+              url="https://creativecommons.org/licenses/by-nc-sa/4.0/"
+              inner_text="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License"
+              is_external="_blank"
+            />
+          </div>
+        </div>
+      </footer>
+    );
+  }
 }

src/info/components/home-page.js

@@ -2,27 +2,43 @@ import Head from "next/head";
 import TCard from "../components/title-card";
 import FCard from "../components/footer-card";
 
-export default function HomePage({ page_title, card_title, children }) {
-  return (
-    <div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey font-nerd">
-      <Head>
-        <title>{page_title}</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <div className="container space-y-4 mx-auto px-4 py-4">
-        <a rel="me" href="https://yiff.life/@werefox" hidden>
-          Mastodon
-        </a>
-        <a rel="me" href="https://masto.werefox.cafe/@kairi" hidden>
-          Mastodon
-        </a>
-        <a rel="me" href="https://masto.werefox.cafe/@ada" hidden>
-          Mastodon
-        </a>
-        <TCard card_title={card_title} />
-        {children}
-        <FCard />
+export default function HomePage({ local, page_title, card_title, children }) {
+  if (local) {
+    return (
+      <div className="min-h-screen bg-skye-werefox-grey-light dark:bg-skye-werefox-grey font-nerd">
+        <Head>
+          <title>{page_title}</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <div className="container space-y-4 mx-auto px-4 py-4">
+          <TCard local={true} card_title={card_title} />
+          {children}
+          <FCard local={true} />
+        </div>
       </div>
-    </div>
-  );
+    );
+  } else {
+    return (
+      <div className="min-h-screen bg-alice-werefox-grey-light dark:bg-alice-werefox-grey font-nerd">
+        <Head>
+          <title>{page_title}</title>
+          <link rel="icon" href="/favicon.ico" />
+        </Head>
+        <div className="container space-y-4 mx-auto px-4 py-4">
+          <a rel="me" href="https://yiff.life/@werefox" hidden>
+            Mastodon
+          </a>
+          <a rel="me" href="https://masto.werefox.cafe/@kairi" hidden>
+            Mastodon
+          </a>
+          <a rel="me" href="https://masto.werefox.cafe/@ada" hidden>
+            Mastodon
+          </a>
+          <TCard card_title={card_title} />
+          {children}
+          <FCard />
+        </div>
+      </div>
+    );
+  }
 }

src/info/components/introduction-card.js

@@ -20,9 +20,9 @@ export function formatCustomEmoji(str, emoji_paths) {
   if (Boolean(emoji_paths)) {
     return (
       <>
-        {values.map((v, i) =>
-          replaceWithImageTags(i, v, emoji_paths[v])
-        )}
+        {values.map((v, i) => (
+          <div key={v}>{replaceWithImageTags(i, v, emoji_paths[v])}</div>
+        ))}
       </>
     );
   } else {
@@ -36,11 +36,7 @@ export function renderPossibleInfo(info, emoji_paths) {
     infoarray = infoarray.slice(0, infoarray.length - 1);
     return infoarray.map((line) => (
       <div key={line}>
-        {line == "" ? (
-          <br />
-        ) : (
-          formatCustomEmoji(line, emoji_paths)
-        )}
+        {line == "" ? <br /> : formatCustomEmoji(line, emoji_paths)}
       </div>
     ));
   } else {
@@ -48,10 +44,18 @@ export function renderPossibleInfo(info, emoji_paths) {
   }
 }
 
-export default function introductionCard({ introduction, emoji_paths }) {
-  return (
-    <div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
-      {renderPossibleInfo(introduction, emoji_paths)}
-    </div>
-  );
+export default function introductionCard({ local, introduction, emoji_paths }) {
+  if (local) {
+    return (
+      <div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
+        {renderPossibleInfo(introduction, emoji_paths)}
+      </div>
+    );
+  } else {
+    return (
+      <div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
+        {renderPossibleInfo(introduction, emoji_paths)}
+      </div>
+    );
+  }
 }

src/info/components/page-block.js

@@ -1,19 +1,38 @@
 import PButton from "./page-button";
 
-export default function ProjectBlock({ pages }) {
-  return (
-    <nav>
-      <div className="flow space-y-4">
-        {Object.keys(pages).map((page) => (
-          <PButton
-            key={page}
-            title={page}
-            images={pages[page].images}
-            url={pages[page].url}
-            new_tab={Boolean(pages[page].new_tab)}
-          />
-        ))}
-      </div>
-    </nav>
-  );
+export default function ProjectBlock({ local, pages }) {
+  if (local) {
+    return (
+      <nav>
+        <div className="flow space-y-4">
+          {Object.keys(pages).map((page) => (
+            <PButton
+              local={true}
+              key={page}
+              title={page}
+              images={pages[page].images}
+              url={pages[page].url}
+              new_tab={Boolean(pages[page].new_tab)}
+            />
+          ))}
+        </div>
+      </nav>
+    );
+  } else {
+    return (
+      <nav>
+        <div className="flow space-y-4">
+          {Object.keys(pages).map((page) => (
+            <PButton
+              key={page}
+              title={page}
+              images={pages[page].images}
+              url={pages[page].url}
+              new_tab={Boolean(pages[page].new_tab)}
+            />
+          ))}
+        </div>
+      </nav>
+    );
+  }
 }

src/info/components/page-button.js

@@ -2,62 +2,118 @@ import Link from "next/link";
 import Image from "next/image";
 
 export default function PageButton({
+  local,
   title,
   images,
   url,
   extra_classes,
   new_tab,
 }) {
-  if (Boolean(new_tab)) {
-    return (
-      <div>
-        <Link href={url}>
-          <a
-            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
-            target="_blank"
-          >
-            {images.map((source) => (
-              <span
-                key={source}
-                className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
-              >
-                <Image
-                  src={source.src}
-                  layout="fill"
-                  objectFit="contain"
-                  alt={source.alt}
-                />
-              </span>
-            ))}
-            {` ${title}`}
-          </a>
-        </Link>
-      </div>
-    );
+  if (local) {
+    if (Boolean(new_tab)) {
+      return (
+        <div>
+          <Link href={url}>
+            <a
+              className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
+              target="_blank"
+            >
+              {images.map((source) => (
+                <span
+                  key={source}
+                  className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
+                >
+                  <Image
+                    src={source.src}
+                    layout="fill"
+                    objectFit="contain"
+                    alt={source.alt}
+                  />
+                </span>
+              ))}
+              {` ${title}`}
+            </a>
+          </Link>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Link href={url}>
+            <a
+              className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
+            >
+              {images.map((source) => (
+                <span
+                  key={source}
+                  className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
+                >
+                  <Image
+                    src={source.src}
+                    layout="fill"
+                    objectFit="contain"
+                    alt={source.alt}
+                  />
+                </span>
+              ))}
+              {` ${title}`}
+            </a>
+          </Link>
+        </div>
+      );
+    }
   } else {
-    return (
-      <div>
-        <Link href={url}>
-          <a
-            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
-          >
-            {images.map((source) => (
-              <span
-                key={source}
-                className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
-              >
-                <Image
-                  src={source.src}
-                  layout="fill"
-                  objectFit="contain"
-                  alt={source.alt}
-                />
-              </span>
-            ))}
-            {` ${title}`}
-          </a>
-        </Link>
-      </div>
-    );
+    if (Boolean(new_tab)) {
+      return (
+        <div>
+          <Link href={url}>
+            <a
+              className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
+              target="_blank"
+            >
+              {images.map((source) => (
+                <span
+                  key={source}
+                  className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
+                >
+                  <Image
+                    src={source.src}
+                    layout="fill"
+                    objectFit="contain"
+                    alt={source.alt}
+                  />
+                </span>
+              ))}
+              {` ${title}`}
+            </a>
+          </Link>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Link href={url}>
+            <a
+              className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
+            >
+              {images.map((source) => (
+                <span
+                  key={source}
+                  className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
+                >
+                  <Image
+                    src={source.src}
+                    layout="fill"
+                    objectFit="contain"
+                    alt={source.alt}
+                  />
+                </span>
+              ))}
+              {` ${title}`}
+            </a>
+          </Link>
+        </div>
+      );
+    }
   }
 }

src/info/components/title-card.js

@@ -1,19 +1,36 @@
 import Link from "next/link";
 import Image from "next/image";
 
-export default function TitleCard({ card_title }) {
-  return (
-    <div className="p-4 w-full rounded-sm ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark text-xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
-      <span className="animate-bounce align-middle inline-block w-6 h-6">
-        <Image
-          src="/emoji/:alice:.png"
-          layout="fill"
-          objectFit="contain"
-          alt="It's Alice in emoji form."
-        />
-      </span>
-      {"- "}
-      {card_title}
-    </div>
-  );
+export default function TitleCard({ local, card_title }) {
+  if (local) {
+    return (
+      <div className="p-4 w-full rounded-sm ring-4 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark text-xl text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
+        <span className="animate-bounce align-middle inline-block w-6 h-6">
+          <Image
+            src="/emoji/:alice:.png"
+            layout="fill"
+            objectFit="contain"
+            alt="It's Alice in emoji form."
+          />
+        </span>
+        {"- "}
+        {card_title}
+      </div>
+    );
+  } else {
+    return (
+      <div className="p-4 w-full rounded-sm ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark text-xl text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
+        <span className="animate-bounce align-middle inline-block w-6 h-6">
+          <Image
+            src="/emoji/:alice:.png"
+            layout="fill"
+            objectFit="contain"
+            alt="It's Alice in emoji form."
+          />
+        </span>
+        {"- "}
+        {card_title}
+      </div>
+    );
+  }
 }

src/info/components/werefox-card-title.js

@@ -1,29 +1,57 @@
 import Image from "next/image";
 
-export default function WerefoxCardTitle({ title, title_emoji }) {
-  if (Boolean(title_emoji)) {
-    return (
-      <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red ">
-        <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
-          <Image
-            src={title_emoji["src"]}
-            layout="fill"
-            objectFit="contain"
-            alt={title_emoji["alt"]}
-          />
-        </span>
-        <p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
-          {` ${title}`}
-        </p>
-      </div>
-    );
+export default function WerefoxCardTitle({ local, title, title_emoji }) {
+  if (local) {
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink ">
+          <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
+            <Image
+              src={title_emoji["src"]}
+              layout="fill"
+              objectFit="contain"
+              alt={title_emoji["alt"]}
+            />
+          </span>
+          <p className="inline text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
+            {` ${title}`}
+          </p>
+        </div>
+      );
+    } else {
+      return (
+        <div className="rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
+          <p className="p-4 text-center text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
+            {title}
+          </p>
+        </div>
+      );
+    }
   } else {
-    return (
-      <div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
-        <p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
-          {title}
-        </p>
-      </div>
-    );
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red ">
+          <span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
+            <Image
+              src={title_emoji["src"]}
+              layout="fill"
+              objectFit="contain"
+              alt={title_emoji["alt"]}
+            />
+          </span>
+          <p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
+            {` ${title}`}
+          </p>
+        </div>
+      );
+    } else {
+      return (
+        <div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
+          <p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
+            {title}
+          </p>
+        </div>
+      );
+    }
   }
 }

src/info/components/werefox-card.js

@@ -1,23 +1,45 @@
 import WCT from "./werefox-card-title";
 
-export default function WerefoxCard({ title_emoji, title, children }) {
-  if (Boolean(title_emoji)) {
-    return (
-      <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
-        <WCT title={title} title_emoji={title_emoji} />
-        <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
-          {children}
+export default function WerefoxCard({ local, title_emoji, title, children }) {
+  if (local) {
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
+          <WCT local={true} title={title} title_emoji={title_emoji} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
+            {children}
+          </div>
         </div>
-      </div>
-    );
+      );
+    } else {
+      return (
+        <div className="p-4 space-y-4 text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink rounded-lg ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark">
+          <WCT local={true} title={title} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
+            {children}
+          </div>
+        </div>
+      );
+    }
   } else {
-    return (
-      <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
-        <WCT title={title} />
-        <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
-          {children}
+    if (Boolean(title_emoji)) {
+      return (
+        <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
+          <WCT title={title} title_emoji={title_emoji} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
+            {children}
+          </div>
         </div>
-      </div>
-    );
+      );
+    } else {
+      return (
+        <div className="p-4 space-y-4 text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light rounded-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark">
+          <WCT title={title} />
+          <div className="p-4 space-y-4 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
+            {children}
+          </div>
+        </div>
+      );
+    }
   }
 }

src/info/pages/local/index.js

@@ -32,12 +32,20 @@ export default function Home({ INTRODUCTION, SUBDOMAINS }) {
   // const introdict = Object.assign({}, introarray);
 
   return (
-    <HomePage page_title="Local Network Subdomains" card_title="Local Network Subdomains">
-      <WCard title="Welcome to local.werefox">
-        <ICard introduction={INTRODUCTION.intro} emoji_paths={{}} />
+    <HomePage
+      local={true}
+      page_title="Local Network Subdomains"
+      card_title="Local Network Subdomains"
+    >
+      <WCard local={true} title="Welcome to local.werefox">
+        <ICard
+          local={true}
+          introduction={INTRODUCTION.intro}
+          emoji_paths={{}}
+        />
       </WCard>
-      <WCard title="Subdomains">
-        <PBlock pages={SUBDOMAINS} />
+      <WCard local={true} title="Subdomains">
+        <PBlock local={true} pages={SUBDOMAINS} />
       </WCard>
     </HomePage>
   );