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

Updated theme, added custom font and identities block.

Browse Source
This commit is contained in:
Alexis Werefox 2021-04-18 19:30:19 +00:00
parent 3d25e72297
commit af07dc62f4
4 changed files with 146 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1 +1,2 @@
.vscode/
src/info/public/

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

@ -1,16 +1,137 @@
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";
export default function Home() {
return (
<div className="min-h-screen bg-werefox-grey-light dark:bg-werefox-grey-dark">
<div className="min-h-screen bg-werefox-grey-lighter dark:bg-werefox-grey-dark font-nerd">
<Head>
<title>About A Werefox</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1 className="text-5xl text-center text-werefox-blue">
I'm Gay
</h1>
<div className="container space-y-4 mx-auto px-4 pt-4">
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
<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">
{" "}
<Image
src="/images/pixel_alexis.png"
layout="fill"
objectFit="contain"
alt="Pixel Alexis!"
/>{" "}
</span>
-Hi! I'm Alexis Werefox!
</h1>
</div>
<div className="rounded-lg container 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="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">
26
</p>
</div>
<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">
Single
</p>
</div>
<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">
<span className="relative inline-block w-4 h-4 align-middle">
{" "}
<Image
src="/emoji/polyamory_flag.svg"
layout="fill"
objectFit="contain"
alt="Polyamory flag"
/>{" "}
</span>
Polyam
</p>
</div>
<div className="container p-2">
<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">
<span className="relative inline-block w-4 h-4 align-middle">
{" "}
<Image
src="/emoji/female_symbol.svg"
layout="fill"
objectFit="contain"
alt="Female symbol"
/>{" "}
</span>
<span className="relative inline-block w-4 h-4 align-middle">
{" "}
<Image
src="/emoji/transgender_flag.svg"
layout="fill"
objectFit="contain"
alt="Transgender flag"
/>{" "}
</span>{" "}
Trans-femme
</p>
</div>
<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">
<span className="relative inline-block w-4 h-4 align-middle">
{" "}
<Image
src="/emoji/pansexual_flag.svg"
layout="fill"
objectFit="contain"
alt="Pansexual flag"
/>{" "}
</span>{" "}
Pansexual
</p>
</div>
<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">
<span className="relative inline-block w-4 h-4 align-middle">
{" "}
<Image
src="/emoji/lesbian_flag.svg"
layout="fill"
objectFit="contain"
alt="Lesbian flag"
/>{" "}
</span>{" "}
Lesbian
</p>
</div>
<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">
ADHD
</p>
</div>
</div>
</div>
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
<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
programmer trying to make it in the world tbh.
</p>
</div>
<div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
<footer className="p-4">
<p className="text-center text-xs text-werefox-grey-dark dark:text-werefox-grey-light">
This site uses{" "}
<Link href="https://mutant.tech">
<a>Mutant Standard emoji</a>
</Link>
, which are licensed under a{" "}
<Link href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<a>
Creative Commons Attribution-NonCommercial-ShareAlike 4.0
International License
</a>
</Link>
</p>
</footer>
</div>
</div>
</div>
);
}

5
src/info/styles/globals.css
View File

@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "DejaVuSansMono";
src: url("/fonts/DejaVuSansMono-Nerd-Font-Complete-Mono.ttf");
}

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

@ -1,12 +1,22 @@
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: 'media', // or 'media' or 'class'
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
nerd: ["DejaVuSansMono"],
},
colors: {
"werefox-blue": "#60A4FF",
"werefox-pink": "#FF62B6",
"werefox-blue": {
DEFAULT: "#60A4FF",
dark: "#2885ff",
},
"werefox-pink": {
DEFAULT: "#ff84c5",
dark: "#ff329f",
},
"werefox-grey": {
lighter: "#EEE",
light: "#DBDBDB",
DEFAULT: "#424242",
dark: "#242424",