ada
/
werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor CSS changes, finished the identity pages for now.

This commit is contained in:
Alexis Werefox 2021-04-27 03:09:18 +00:00
parent eb81af0cbd
commit 3c56988c65
12 changed files with 213 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/info/components/identity-card.js Normal file
View File

@ -0,0 +1,82 @@
import Link from "next/link";
import Image from "next/image";
export default function IdentityCard({
title,
info,
url,
src,
alt,
src2,
alt2,
}) {
if (src2) {
return (
<div className="p-2 flow space-y-3">
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-lg sm:text-2xl text-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</p>
</div>
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p className="pb-4" key={i}>
{info[i]}
</p>
))}
</p>
</div>
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<a href="https://twitter.com/ribbonfemale" target="_blank">
<span className="relative inline-flex align-middle">
<Image
className="rounded-lg"
src={src2}
layout="intrinsic"
width="2048"
height="2048"
alt={alt2}
/>
</span>
</a>
</div>
</div>
);
} else {
return (
<div className="p-2 flow space-y-3">
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-lg sm:text-2xl text-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
<span className="relative inline-block w-8 h-8 align-middle mb-1">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>{" "}
{title}
</p>
</div>
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
{Object.keys(info).map((i) => (
<p className="pb-4" key={i}>
{info[i]}
</p>
))}
</p>
<div className="pb-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
<Link href={url}>
<a
target="_blank"
className=" transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
>
Learn More
</a>
</Link>
</div>
</div>
</div>
);
}
}

2
src/info/components/love-card.js
View File

@ -31,7 +31,7 @@ export function renderPossibleURLField(field) {
}
}
export default function TestimonialCard({ src, alt, url, fields, bio, user }) {
export default function LoveCard({ src, alt, url, fields, bio, user }) {
const finalsrc = Boolean(src) ? src : "/images/logo.png";
const isMe =
user == "Shadow8t4"

2
src/info/components/mutant-standard.js
View File

@ -5,7 +5,7 @@ export default function MutantStandard() {
return (
<WCard>
<footer className="p-4">
<p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
<p className="text-center text-xs text-werefox-grey-darkest dark:text-werefox-grey-lightest">
This site uses{" "}
<Link href="https://mutant.tech">
<a>Mutant Standard emoji</a>

3
src/info/components/testimonial-card.js
View File

@ -3,6 +3,7 @@ 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"
return (
<div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
@ -24,7 +25,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
<br />
{"- "}
<Link href={url}>
<a target="_blank">{`@${user}`}</a>
<a target="_blank" className={`transition ${isMeLink}`}>{`@${user}`}</a>
</Link>
</p>
</div>

26
src/info/pages/identities/fursona/index.js
View File

@ -1,12 +1,28 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card";
export default function Fursona() {
export default function Gender() {
return (
<BasicPage
page_title="OwO What's This?"
card_title="Fursona Details!"
>
<BasicPage page_title="OwO What's this?" card_title="Fursona Details!">
<WCard>
<IDCard
title="Alexis Werefox"
info={{
info: `That's me, the witchy foxxo herself! 💙`,
more: `Despite making this whole website, I'm honestly not much for talking about myself most of the time, unless I'm feeling particularly good.`,
species: `I'm a fox, though! I think originally based on a fennec, but I've kinda moved away from that design nowadays.`,
magic: `Also, I'm a witch! I have magic powers, which have honestly been mostly used to indulge in kinks, but uhhhhhh... What were we talking about here again?`,
art: `I know! I know! You came here to see some art, yes?! Well, here's a free one for ya!~`,
source: `(this was done by the wonderful @ribbonfemale on Twitter!)`
}}
url=""
src="/emoji/pixel_alexis.png"
alt="It's me! Alexis Werefox!"
src2="/images/alexis_witch.jpg"
alt2="Some art of Alexis Werefox in a black corset and miniskirt and pink/black striped leggings and a witch hat, with magic effects surrounding her."
/>
</WCard>
</BasicPage>
);
}

18
src/info/pages/identities/gender/index.js
View File

@ -1,12 +1,22 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card";
export default function Gender() {
return (
<BasicPage
page_title="What's Gender?"
card_title="I'm Transgender!"
>
<BasicPage page_title="What's Gender?" card_title="I'm Transgender!">
<WCard>
<IDCard
title="Trans-femme"
info={{
info: `This is a bit of a generalized term to mean someone who identifies primarily feminine.`,
more: `I do personally identify as a girl, but this is a bit more of a P.C. term to use!`,
}}
url="https://gender.wikia.org/wiki/Transfeminine"
src="/emoji/transgender_flag.svg"
alt="The transgender flag"
/>
</WCard>
</BasicPage>
);
}

24
src/info/pages/identities/neuro/index.js
View File

@ -1,12 +1,34 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card";
export default function Neuro() {
export default function Gender() {
return (
<BasicPage
page_title="Neurodiversity, Fam"
card_title="I'm Neurodivergent!"
>
<WCard>
<IDCard
title="ADHD"
info={{
info: `This stands for "Attention-Deficit Hyperactivity Disorder".`,
neurodivergent: `Addionally, the term "neurodivergent" is a general term meaning someone who lives with a form of mental disorder which may impair or alter the way they act and react to the world around them.`,
adhd: `While the term ADHD does address the attention and hyperactive aspects of the disorder, there are actually many other aspects that often go unaddressed. The main ones, however, are:`,
symptom1: `- Lack of focus, and conversely, hyperfocus!`,
symptom2: `- Impulsiveness`,
symptom3: `- Impaired ability to multitask`,
symptom4: `- Time management issues`,
symptom5: `- Difficulty remembering things (especially details and things we don't find stimulating)`,
symptom6: `- Emotional dysregularity (we have trouble regulating our emotions!)`,
symptom7: `- Last, but not least, is something called "rejection sensitivity", which can be hard to explain, and isn't technically medically accepted, but is proven to be a common symptom among ADHD folks!`,
conclusion: `There's a lot more I wish I could say, but I can genuinely recommend the following link to the YouTube channel "How to ADHD" if you want to learn more, especially if you believe you have this disorder yourself!`,
}}
url="https://www.youtube.com/channel/UC-nPM1_kSZf91ZGkcgy_95Q"
src="/emoji/neurodiversity.svg"
alt="The neurodiversity symbol"
/>
</WCard>
</BasicPage>
);
}

4
src/info/pages/identities/partners/index.js
View File

@ -5,7 +5,7 @@ import LCard from "../../../components/love-card";
// Use this to list out partner info on this page. >w>
const PARTNERS = {
// heatherhorns: {
// username: {
// url: "",
// avi: "",
// fields: {
@ -16,7 +16,7 @@ const PARTNERS = {
};
export default function Partners() {
if (PARTNERS == null) {
if (Object.keys(PARTNERS).length) {
return (
<BasicPage page_title="Partners" card_title="Partners!">
{Object.keys(PARTNERS).map((partner) => (

14
src/info/pages/identities/pronouns/index.js
View File

@ -1,5 +1,6 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card";
export default function Pronouns() {
return (
@ -7,6 +8,19 @@ export default function Pronouns() {
page_title="What are your pronouns?"
card_title="Pronouns! Important!"
>
<WCard>
<IDCard
title="She / Her"
info={{
info: `When you're referring to me, please use the pronouns "She/Her".`,
more: `If you need some examples, for whatever reason, here are some from the site you can visit by clicking on the link below!`,
examples: `"Today I met a new friend, and she is really nice. She has a wonderful personality. That smile of hers really makes me happy."`,
}}
url="https://pronouns.me/she"
src="/emoji/speech_bubble_left.svg"
alt="A speech bubble emoji"
/>
</WCard>
</BasicPage>
);
}

33
src/info/pages/identities/sexuality/index.js
View File

@ -1,5 +1,6 @@
import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import IDCard from "../../../components/identity-card";
export default function Sexuality() {
return (
@ -7,6 +8,38 @@ export default function Sexuality() {
page_title="What's My Sexuality?"
card_title="Sexuality Details!"
>
<WCard>
<IDCard
title="Polyamory"
info={{
info: `This means that I am okay with having multiple partners!`,
more: `There's a lot I can say about Polyamory, but I feel like if you really want to learn more about it, you might be better off following the link below.`,
}}
url="https://lgbta.wikia.org/wiki/Polyamorous"
src="/emoji/polyamory_flag.svg"
alt="The polyamory flag"
/>
<IDCard
title="Pansexual"
info={{
info: `This means that I am okay with sexual and romantic partners of any gender identity!`,
more: `Of course, being Pansexual does not mean I cannot have preferences or that I want to date *"anyone"*, just that I am open to it.`,
}}
url="https://lgbta.wikia.org/wiki/Pansexual"
src="/emoji/pansexual_flag.svg"
alt="The pansexual flag"
/>
<IDCard
title="Lesbian"
info={{
info: `This means that I am okay with sexual and romantic partners that are the same gender identity as me!`,
more: `If you have questions about how I coulld be both Panesexual and Lesiban, I'd refer you to my FAQ.`,
}}
url="https://lgbta.wikia.org/wiki/Lesbian"
src="/emoji/lesbian_flag.svg"
alt="The lesbian flag"
/>
</WCard>
</BasicPage>
);
}

27
src/info/pages/index.js
View File

@ -103,6 +103,26 @@ export default function Home() {
/>
</div>
</WCard>
<WCard>
<p className="p-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Welcome to my little info site!
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
I'd describe myself as somewhere between a hot date and a hot mess.
Just a witchy foxxo programmer trying to make it in the world tbh.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Feel free to click/tap any of the neat buttons above this to learn
more about my different aspects of personality.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Down below, I've got some more neat little pages and useful info you
can look at.
</p>
<p className="pl-4 pr-4 pb-4 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Please do look around and enjoy your stay!~ 💙
</p>
</WCard>
<WCard
isCardButton="true"
extraClasses=""
@ -113,13 +133,6 @@ export default function Home() {
innerText="HRT Tracker!"
url="/hrt"
/>
<WCard>
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Somewhere between a hot date and a hot mess.
<br />
Just a witchy foxxo programmer trying to make it in the world tbh.
</p>
</WCard>
<WCard
isCardButton="true"
extraClasses=""

BIN
src/info/public/images/alexis_witch.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB