Updated partner profile theme, other themes.
This commit is contained in:
Alexis Werefox
parent
af8405b3ed
commit
93a29dfb32
5 changed files with 48 additions and 47 deletions
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>{" "}
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: [],
|
||||
|
|
|
|||
Loading…
Reference in a new issue