Updated partner profile theme, other themes.

This commit is contained in:
Alexis Werefox 2021-10-14 04:00:25 +00:00
parent af8405b3ed
commit 93a29dfb32
5 changed files with 48 additions and 47 deletions

View File

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

View File

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

View File

@ -1,4 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import Image from "next/image";
export function validURL(str) { export function validURL(str) {
var pattern = new RegExp( var pattern = new RegExp(
@ -17,14 +18,16 @@ export function renderPossibleURLField(field) {
if (validURL(field)) { if (validURL(field)) {
return ( return (
<Link href={field}> <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} {field}
</div>
</a> </a>
</Link> </Link>
); );
} else { } else {
return ( 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} {field}
</div> </div>
); );
@ -38,48 +41,40 @@ export default function PartnerCard({ src, alt, url, fields, bio, user }) {
const biodict = Object.assign({}, bioarray); const biodict = Object.assign({}, bioarray);
return ( 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}> <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"
objectFit="contain"
alt={alt} 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> </div>
</a> </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> </Link>
</p> <div className="flex-column space-y-4">
</div> {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> </div>
</div> </div>
); );

View File

@ -8,13 +8,14 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
const testimonialdict = Object.assign({}, testimonialarray); const testimonialdict = Object.assign({}, testimonialarray);
return ( 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}> <Link href={url}>
<a target="_blank"> <a target="_blank">
<div className="min-w-full flex overflow-hidden"> <div className="min-w-full flex overflow-hidden">
<div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4"> <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 <Image
className="rounded-sm"
src={finalsrc} src={finalsrc}
layout="fill" layout="fill"
objectFit="contain" objectFit="contain"

View File

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