Updated a bunch of component themes and layouts. Fixed some issues with viewing the site without JS.
This commit is contained in:
Alexis Werefox
parent
08b26558e0
commit
6ce8cbe74a
@ -3,7 +3,14 @@ import TCard from "../components/title-card";
|
||||
import FCard from "./footer-card";
|
||||
import PButton from "../components/page-button";
|
||||
|
||||
export default function BasicPage({ page_title, card_title, children }) {
|
||||
export default function BasicPage({
|
||||
page_title,
|
||||
card_title,
|
||||
children,
|
||||
back_url,
|
||||
}) {
|
||||
const url = Boolean(back_url) ? back_url : "/";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
|
||||
<Head>
|
||||
@ -19,7 +26,7 @@ export default function BasicPage({ page_title, card_title, children }) {
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
url="/"
|
||||
url={url}
|
||||
/>
|
||||
</nav>
|
||||
{children}
|
||||
@ -30,7 +37,7 @@ export default function BasicPage({ page_title, card_title, children }) {
|
||||
{ src: "/emoji/pixel_alexis.png", alt: "Pixel Alexis!" },
|
||||
{ src: "/emoji/blue_heart.svg", alt: "Blue heart" },
|
||||
]}
|
||||
url="/"
|
||||
url={url}
|
||||
/>
|
||||
</nav>
|
||||
<FCard />
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ContactsLink({ src, alt, url, description, url_text }) {
|
||||
return (
|
||||
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<a href={url} target="_blank">
|
||||
<span className="object-contain animate-bounce relative inline-block w-6 h-6 align-middle">
|
||||
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
||||
</span>
|
||||
</a>{" "}
|
||||
{description}{" "}
|
||||
<a
|
||||
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
|
||||
href={url}
|
||||
target="_blank"
|
||||
>
|
||||
{url_text}
|
||||
</a>
|
||||
</p>
|
||||
<div>
|
||||
<Link href={url}>
|
||||
<a target="_blank">
|
||||
<div className="p-2 md:text-lg sm:text-md text-xs text-center rounded-sm ring-2 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">
|
||||
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
|
||||
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
||||
</span>{" "}
|
||||
{description}{" "}
|
||||
<div className="animate-wiggle inline-flex" target="_blank">
|
||||
{url_text}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import FCard from "./faq-card";
|
||||
|
||||
export default function FAQBlock({ faqs }) {
|
||||
return (
|
||||
<div className="p-8 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<div className="p-4 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
{Object.keys(faqs).map((faq) => (
|
||||
<FCard
|
||||
key={faq}
|
||||
|
||||
@ -5,38 +5,32 @@ export default function TestimonialCard({ question, answer, src, alt }) {
|
||||
const finalsrc = Boolean(src) ? src : "/images/logo.png";
|
||||
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
<div className="space-y-2">
|
||||
<div className="ring-2 ring-werefox-pink-dark dark:ring-werefox-pink">
|
||||
<p className="p-8 text-center text-lg sm:text-xl text-werefox-pink-dark dark:text-werefox-pink">
|
||||
{question}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-2 flex ring-2 ring-werefox-blue-dark dark:ring-werefox-blue">
|
||||
<div className="order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4">
|
||||
<Link href="https://vulpine.club/@shadow8t4">
|
||||
<a>
|
||||
<div className=" ring-2 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">
|
||||
<Link href="https://vulpine.club/@shadow8t4">
|
||||
<a target="_blank">
|
||||
<div className="p-2 flex">
|
||||
<div className="order-1 flex-shrink-0 relative inline sm:w-32 w-16 min-h-full items-center justify-center align-middle pt-4 pb-4 pl-4">
|
||||
<Image
|
||||
src={finalsrc}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt={alt}
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<p>
|
||||
{answer}
|
||||
<br />
|
||||
{"- "}
|
||||
<Link href="https://vulpine.club/@shadow8t4">
|
||||
<a
|
||||
target="_blank"
|
||||
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
|
||||
>{`@shadow8t4`}</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="order-2 flex overflow-auto items-center justify-center animate-wiggle p-4 sm:text-lg text-xs text-center sm:min-h-full h-full">
|
||||
{answer}
|
||||
<br />
|
||||
{"- @shadow8t4"}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -12,7 +12,7 @@ export default function FooterCard() {
|
||||
/>
|
||||
<div className="flex-1"></div>
|
||||
</div>
|
||||
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
|
||||
<div className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
|
||||
This site uses{" "}
|
||||
<div className="inline-block pt-1 pb-1">
|
||||
<FButton
|
||||
@ -29,7 +29,7 @@ export default function FooterCard() {
|
||||
is_external="_blank"
|
||||
/>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,26 +2,24 @@ import PCard from "./project-card";
|
||||
|
||||
export default function ProjectCardBlock({ title, cards }) {
|
||||
return (
|
||||
<div className="p-2 flow space-y-3 w-full">
|
||||
<div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||||
<div className="p-2 space-y-4">
|
||||
<div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||||
<p className="sm:text-xl text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
{title}
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||||
<ul className="space-y-3 w-full text-werefox-blue-dark dark:text-werefox-blue">
|
||||
{Object.keys(cards).map((card) => (
|
||||
<PCard
|
||||
key={card}
|
||||
title={card}
|
||||
url={cards[card].url}
|
||||
src={cards[card].src}
|
||||
alt={cards[card].alt}
|
||||
description={cards[card].description}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul 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">
|
||||
{Object.keys(cards).map((card) => (
|
||||
<PCard
|
||||
key={card}
|
||||
title={card}
|
||||
url={cards[card].url}
|
||||
src={cards[card].src}
|
||||
alt={cards[card].alt}
|
||||
description={cards[card].description}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -12,34 +12,20 @@ export default function projectCard({
|
||||
const open_new_tab = new_tab ? "_blank" : "";
|
||||
|
||||
return (
|
||||
<li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<div className="p-2 flow space-y-2 w-full">
|
||||
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||||
<div className="text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<Link href={url}>
|
||||
<a
|
||||
target={open_new_tab}
|
||||
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
|
||||
>
|
||||
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
|
||||
<Image
|
||||
src={src}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt={alt}
|
||||
/>
|
||||
</span>{" "}
|
||||
{title}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||||
<p className="text-md text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<div>
|
||||
<Link href={url}>
|
||||
<a target={open_new_tab}>
|
||||
<li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
|
||||
<div className="text-lg text-center">
|
||||
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
|
||||
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
||||
</span>
|
||||
{` ${title}`}
|
||||
</div>
|
||||
<div className="text-md text-center">{description}</div>
|
||||
</li>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,55 +3,38 @@ 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 isMeLink =
|
||||
user == "Shadow8t4"
|
||||
? "hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
|
||||
: "hover:text-werefox-blue-dark dark:hover:text-werefox-blue";
|
||||
let testimonialarray = innerText.split("\n");
|
||||
testimonialarray = testimonialarray.slice(0, testimonialarray.length - 1);
|
||||
const testimonialdict = Object.assign({}, testimonialarray);
|
||||
|
||||
return (
|
||||
<div className="min-w-full flex overflow-hidden ring-2 ring-werefox-pink-dark dark:ring-werefox-pink transition">
|
||||
<div className="order-1 flex-1 flex-shrink-0 pt-4 pb-4 pl-4">
|
||||
<Link href={url}>
|
||||
<a>
|
||||
{" "}
|
||||
<span className="relative inline-block rounded-lg sm:w-32 w-16 sm:h-32 h-16">
|
||||
<Image
|
||||
src={finalsrc}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt={alt}
|
||||
/>
|
||||
</span>{" "}
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
|
||||
<div
|
||||
className={`animate-wiggle sm:text-lg text-xs text-center ${isMe}`}
|
||||
>
|
||||
{Object.keys(testimonialdict).map((t) => (
|
||||
<p className="overflow-auto" key={t}>
|
||||
{testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
|
||||
</p>
|
||||
))}
|
||||
<p>
|
||||
{"- "}
|
||||
<Link href={url}>
|
||||
<a
|
||||
target="_blank"
|
||||
className={`transition ${isMeLink}`}
|
||||
>{`@${user}`}</a>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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">
|
||||
<Image
|
||||
src={finalsrc}
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt={alt}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div className="order-2 flex flex-5 p-4 items-center justify-center min-h-full">
|
||||
<div className="animate-wiggle sm:text-lg text-xs text-center">
|
||||
{Object.keys(testimonialdict).map((t) => (
|
||||
<p className="overflow-auto" key={t}>
|
||||
{testimonialdict[t] == "" ? <br /> : testimonialdict[t]}
|
||||
</p>
|
||||
))}
|
||||
{`- @${user}`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function TitleCard({ card_title }) {
|
||||
return (
|
||||
<div className="rounded-lg ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<p className="p-4 w-full inline-block text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<span className="animate-bounce inline-block w-6 h-6 align-middle">
|
||||
<Image
|
||||
src="/emoji/pixel_alexis.png"
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt="Pixel Alexis!"
|
||||
/>
|
||||
</span>
|
||||
{"- "}
|
||||
{card_title}
|
||||
</p>
|
||||
<div className="p-4 w-full rounded-lg ring-4 ring-werefox-blue-dark dark:ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||||
<span className="animate-bounce align-middle inline-block w-6 h-6">
|
||||
<Image
|
||||
src="/emoji/pixel_alexis.png"
|
||||
layout="fill"
|
||||
objectFit="contain"
|
||||
alt="Pixel Alexis!"
|
||||
/>
|
||||
</span>
|
||||
{"- "}
|
||||
{card_title}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ lindsays:
|
||||
url: "https://hackers.town/@lindsays"
|
||||
avi: "/images/lindsays.png"
|
||||
fields:
|
||||
with!: "@Kitredgrave@vulpine.club, @muggle@hackers.town, @autumnal@hackers.town (when she is around), @moonbolt@mst3k.interlinked.me::*, @alexis@masto.werefox.dev, $RO, $BUN | polysaturated"
|
||||
with!: "@Kitredgrave@vulpine.club, @muggle@hackers.town, @autumnal@hackers.town (when she is around), @moonbolt@mst3k.interlinked.me::*, @alexis@masto.werefox.dev, $RO, $BUN, $EM | polysaturated"
|
||||
"Matrix: ask!": "discord: no!"
|
||||
queeeeer: ":qhTrans: :qhPolyro: :qhPolyam:"
|
||||
LiberaPay: "https://liberapay.com/Lindsayschmocker"
|
||||
@ -21,8 +21,8 @@ karma:
|
||||
url: "https://awoo.space/@karma"
|
||||
avi: "/images/karma.png"
|
||||
fields:
|
||||
">:3": "flubebnez"
|
||||
age: 29
|
||||
pronouns: "she/her"
|
||||
bio: |
|
||||
Karma / Beatrice / Bea
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@ export async function getStaticProps() {
|
||||
|
||||
export default function Services({ OTHER }) {
|
||||
return (
|
||||
<BasicPage page_title="Misc Projects" card_title="Some other things I do!">
|
||||
<BasicPage page_title="Misc Projects" card_title="Some other things I do!" back_url="/projects">
|
||||
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<PBlock title="Miscelaneous Projects" cards={OTHER} />
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ export async function getStaticProps() {
|
||||
|
||||
export default function Services({ PRIVATE }) {
|
||||
return (
|
||||
<BasicPage page_title="Private Services" card_title="Some stuff I host for myself!">
|
||||
<BasicPage page_title="Private Services" card_title="Some stuff I host for myself!" back_url="/projects">
|
||||
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<PBlock title="Private Services" cards={PRIVATE} />
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ export async function getStaticProps() {
|
||||
|
||||
export default function Services({ SERVICES }) {
|
||||
return (
|
||||
<BasicPage page_title="Werefox Services" card_title="Services I Host!">
|
||||
<BasicPage page_title="Werefox Services" card_title="Services I Host!" back_url="/projects">
|
||||
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<PBlock title="Services" cards={SERVICES} />
|
||||
</div>
|
||||
|
||||
@ -22,7 +22,7 @@ export async function getStaticProps() {
|
||||
|
||||
export default function Services({ STREAMING }) {
|
||||
return (
|
||||
<BasicPage page_title="Streaming Links" card_title="Come watch my streams!">
|
||||
<BasicPage page_title="Streaming Links" card_title="Come watch my streams!" back_url="/projects">
|
||||
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
||||
<PBlock title="Streaming" cards={STREAMING} />
|
||||
</div>
|
||||
|
||||
@ -47,7 +47,7 @@ export default function Testimonials({ iconUrls, TESTIMONIALS }) {
|
||||
innerText={`Sometimes, people say some nice things about me. Here are some
|
||||
examples!`}
|
||||
>
|
||||
<div className="p-2 space-between-0">
|
||||
<div className="p-2 space-y-4">
|
||||
{Object.keys(TESTIMONIALS).map((user) => (
|
||||
<TCard
|
||||
key={TESTIMONIALS[user].url}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user