Updated some theming, made a component for identity info.
This commit is contained in:
Alexis Werefox
parent
af07dc62f4
commit
d88a45b7f8
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue