Updated a bunch of component themes and layouts. Fixed some issues with viewing the site without JS.

This commit is contained in:
Alexis Werefox 2021-10-12 03:43:39 +00:00
parent 08b26558e0
commit 6ce8cbe74a
15 changed files with 119 additions and 151 deletions

View File

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

View File

@ -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">
<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>
</a>{" "}
</span>{" "}
{description}{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href={url}
target="_blank"
>
<div className="animate-wiggle inline-flex" target="_blank">
{url_text}
</div>
</div>
</a>
</p>
</Link>
</div>
);
}

View File

@ -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}

View File

@ -5,39 +5,33 @@ 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">
<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>
<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>
<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 />
{"- "}
<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>
{"- @shadow8t4"}
</div>
</div>
</a>
</Link>
</div>
</div>
);
}

View File

@ -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>
);
}

View File

@ -2,14 +2,13 @@ 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">
<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}
@ -22,6 +21,5 @@ export default function ProjectCardBlock({ title, cards }) {
))}
</ul>
</div>
</div>
);
}

View File

@ -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">
<div>
<Link href={url}>
<a
target={open_new_tab}
className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>
<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}
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>
{` ${title}`}
</div>
<div className="text-md text-center">{description}</div>
</li>
</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>
);
}

View File

@ -3,24 +3,16 @@ 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">
<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>
{" "}
<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}
@ -28,30 +20,21 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
objectFit="contain"
alt={alt}
/>
</span>{" "}
</a>
</Link>
</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 ${isMe}`}
>
<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>
))}
<p>
{"- "}
<Link href={url}>
<a
target="_blank"
className={`transition ${isMeLink}`}
>{`@${user}`}</a>
{`- @${user}`}
</div>
</div>
</div>
</a>
</Link>
</p>
</div>
</div>
</div>
);
}

View File

@ -1,10 +1,10 @@
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">
<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"
@ -14,7 +14,6 @@ export default function TitleCard({ card_title }) {
</span>
{"- "}
{card_title}
</p>
</div>
);
}

View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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}