Browse Source

Updated partner profile theme, other themes.

main
Alexis Werefox 1 week ago
parent
commit
93a29dfb32
  1. 3
      src/info/components/home-page.js
  2. 4
      src/info/components/identity-card.js
  3. 75
      src/info/components/partner-card.js
  4. 5
      src/info/components/testimonial-card.js
  5. 4
      src/info/tailwind.config.js

3
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 />

4
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>
);

75
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">
{field}
<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"
src={finalsrc}
alt={alt}
/>{" "}
<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>
</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>
</div>
);

5
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"

4
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: [],