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

Updated some theming, made a component for identity info.

Browse Source
This commit is contained in:
Alexis Werefox 2021-04-18 23:27:30 +00:00
parent af07dc62f4
commit d88a45b7f8
3 changed files with 143 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/info/pages/components/identity-button.js Normal file
View File

@ -0,0 +1,38 @@
import Image from "next/image";
import Link from "next/link";
export default function IdentityButton({
extraClasses,
imageObj,
innerText,
url,
}) {
const images = Array(imageObj).flat();
return (
<div className="container max-w-sm mx-auto md:px-2 p-2">
<Link href={url}>
<a
target="_blank"
className={`${extraClasses} block rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
>
{images.map((source) => (
<span
key={source.src}
className="relative inline-block w-4 h-4 align-middle mb-1"
>
{" "}
<Image
src={source.src}
layout="fill"
objectFit="contain"
alt={source.alt}
/>{" "}
</span>
))}{" "}
{innerText}
</a>
</Link>
</div>
);
}

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

@ -1,6 +1,7 @@
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import Image from "next/image"; import Image from "next/image";
import IDButton from "./components/identity-button";
export default function Home() { export default function Home() {
return ( return (
@ -9,10 +10,10 @@ export default function Home() {
<title>About A Werefox</title> <title>About A Werefox</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<div className="container space-y-4 mx-auto px-4 pt-4"> <div className="container space-y-4 mx-auto px-4 py-4">
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
<h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue"> <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
<span className="relative inline-block w-6 h-6 align-middle"> <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
{" "} {" "}
<Image <Image
src="/images/pixel_alexis.png" src="/images/pixel_alexis.png"
@ -21,102 +22,113 @@ export default function Home() {
alt="Pixel Alexis!" alt="Pixel Alexis!"
/>{" "} />{" "}
</span> </span>
-Hi! I'm Alexis Werefox! {"- "}
Hi! I'm Alexis Werefox!
</h1> </h1>
</div> </div>
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<div className="grid xl:grid-rows-1 xl:grid-cols-7 sm:grid-rows-3 sm:grid-cols-3 grid-rows-7 grid-cols-1 gap-2"> <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
<div className="container p-2"> <IDButton
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> extraClasses=""
26 imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
</p> innerText="26"
</div> url=""
<div className="container p-2"> />
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> <IDButton
Single extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
</p> imageObj={[
</div> {
<div className="container p-2"> src: "/emoji/female_symbol.svg",
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> alt: "Female symbol",
<span className="relative inline-block w-4 h-4 align-middle"> },
{" "} {
<Image src: "/emoji/transgender_flag.svg",
src="/emoji/polyamory_flag.svg" alt: "Transgender flag",
layout="fill" },
objectFit="contain" ]}
alt="Polyamory flag" innerText="Trans-femme"
/>{" "} url="https://trans.wikia.org/wiki/Transfeminine"
</span> />
Polyam <IDButton
</p> extraClasses=""
</div> imageObj={{
<div className="container p-2"> src: "/emoji/speech_bubble_left.svg",
<p className="rounded-lg text-lg xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> alt: "",
<span className="relative inline-block w-4 h-4 align-middle"> }}
{" "} innerText="She/her"
<Image url="https://pronouns.me/she"
src="/emoji/female_symbol.svg" />
layout="fill" <IDButton
objectFit="contain" extraClasses=""
alt="Female symbol" imageObj={{
/>{" "} src: "/emoji/polyamory_flag.svg",
</span> alt: "Polyamory flag",
<span className="relative inline-block w-4 h-4 align-middle"> }}
{" "} innerText="Polyam"
<Image url="https://lgbta.wikia.org/wiki/Polyamorous"
src="/emoji/transgender_flag.svg" />
layout="fill" <IDButton
objectFit="contain" extraClasses=""
alt="Transgender flag" imageObj={{
/>{" "} src: "/emoji/pansexual_flag.svg",
</span>{" "} alt: "Pansexual flag",
Trans-femme }}
</p> innerText="Pansexual"
</div> url="https://lgbta.wikia.org/wiki/Pansexual"
<div className="container p-2"> />
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> <IDButton
<span className="relative inline-block w-4 h-4 align-middle"> extraClasses=""
{" "} imageObj={{
<Image src: "/emoji/lesbian_flag.svg",
src="/emoji/pansexual_flag.svg" alt: "Lesbian flag",
layout="fill" }}
objectFit="contain" innerText="Lesbian"
alt="Pansexual flag" url="https://lgbta.wikia.org/wiki/Lesbian"
/>{" "} />
</span>{" "} <IDButton
Pansexual extraClasses=""
</p> imageObj={{
</div> src: "/emoji/blue_heart.svg",
<div className="container p-2"> alt: "Blue heart",
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> }}
<span className="relative inline-block w-4 h-4 align-middle"> innerText="Single"
{" "} url=""
<Image />
src="/emoji/lesbian_flag.svg" <IDButton
layout="fill" extraClasses=""
objectFit="contain" imageObj={{
alt="Lesbian flag" src: "/emoji/neurodiversity.svg",
/>{" "} alt: "Neurodiversity symbol",
</span>{" "} }}
Lesbian innerText="ADHD"
</p> url="https://en.wikipedia.org/wiki/Adult_attention_deficit_hyperactivity_disorder"
</div> />
<div className="container p-2"> <IDButton
<p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light"> extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
ADHD imageObj={[
</p> {
</div> src: "/emoji/fox.svg",
alt: "Fox",
},
{
src: "/emoji/magic_wand.svg",
alt: "Magic wand",
},
]}
innerText="Fox witch"
url=""
/>
</div> </div>
</div> </div>
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink"> <p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
Somewhere between a hot date and a hot mess. Just a witchy foxxo Somewhere between a hot date and a hot mess. Just a witchy foxxo
programmer trying to make it in the world tbh. programmer trying to make it in the world tbh.
</p> </p>
</div> </div>
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
<footer className="p-4"> <footer className="p-4">
<p className="text-center text-xs text-werefox-grey-dark dark:text-werefox-grey-light"> <p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
This site uses{" "} This site uses{" "}
<Link href="https://mutant.tech"> <Link href="https://mutant.tech">
<a>Mutant Standard emoji</a> <a>Mutant Standard emoji</a>

6
src/info/tailwind.config.js
View File

@ -16,10 +16,12 @@ module.exports = {
dark: "#ff329f", dark: "#ff329f",
}, },
"werefox-grey": { "werefox-grey": {
lighter: "#EEE", lightest: "#EEE",
light: "#DBDBDB", lighter: "#DBDBDB",
light: "#CCC",
DEFAULT: "#424242", DEFAULT: "#424242",
dark: "#242424", dark: "#242424",
darker: "#121212",
}, },
}, },
}, },