Set up font + color palette
This commit is contained in:
6
package-lock.json
generated
6
package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@next-auth/prisma-adapter": "^1.0.5",
|
||||
"@next/font": "^13.1.6",
|
||||
"@prisma/client": "^4.9.0",
|
||||
"@tanstack/react-query": "^4.20.0",
|
||||
"@trpc/client": "^10.9.0",
|
||||
@@ -131,6 +132,11 @@
|
||||
"glob": "7.1.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/font": {
|
||||
"version": "13.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/font/-/font-13.1.6.tgz",
|
||||
"integrity": "sha512-AITjmeb1RgX1HKMCiA39ztx2mxeAyxl4ljv2UoSBUGAbFFMg8MO7YAvjHCgFhD39hL7YTbFjol04e/BPBH5RzQ=="
|
||||
},
|
||||
"node_modules/@next/swc-android-arm-eabi": {
|
||||
"version": "13.1.6",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.1.6.tgz",
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@next-auth/prisma-adapter": "^1.0.5",
|
||||
"@next/font": "^13.1.6",
|
||||
"@prisma/client": "^4.9.0",
|
||||
"@tanstack/react-query": "^4.20.0",
|
||||
"@trpc/client": "^10.9.0",
|
||||
|
||||
11
src/constants/palette.ts
Normal file
11
src/constants/palette.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
export const palette = {
|
||||
fg: "#A3A395",
|
||||
bg: "#303030",
|
||||
primary: "#DEB887",
|
||||
secondary: "#AF7E7F",
|
||||
tertiary: "#B35443",
|
||||
quaternary: "#483E41",
|
||||
success: "#ACD161",
|
||||
error: "#E24536",
|
||||
warning: "#EDC25E",
|
||||
};
|
||||
@@ -1,19 +1,36 @@
|
||||
import { type AppType } from "next/app";
|
||||
import { type Session } from "next-auth";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
|
||||
import { Murecho } from "@next/font/google";
|
||||
import Head from "next/head";
|
||||
import { api } from "../utils/api";
|
||||
|
||||
import "../styles/globals.css";
|
||||
|
||||
const murecho = Murecho({
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600", "700"],
|
||||
display: "swap",
|
||||
variable: "--font-murecho",
|
||||
});
|
||||
|
||||
const MyApp: AppType<{ session: Session | null }> = ({
|
||||
Component,
|
||||
pageProps: { session, ...pageProps },
|
||||
}) => {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
<>
|
||||
<Head>
|
||||
<title>Parallel</title>
|
||||
<meta name="description" content="============" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<div className={`${murecho.variable} font-sans`}>
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,83 +1,15 @@
|
||||
import { type NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
|
||||
import { api } from "../utils/api";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const hello = api.example.hello.useQuery({ text: "from tRPC" });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create T3 App</title>
|
||||
<meta name="description" content="Generated by create-t3-app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
|
||||
<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
|
||||
<h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
|
||||
Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
|
||||
</h1>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
|
||||
<Link
|
||||
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
|
||||
href="https://create.t3.gg/en/usage/first-steps"
|
||||
target="_blank"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">First Steps →</h3>
|
||||
<div className="text-lg">
|
||||
Just the basics - Everything you need to know to set up your
|
||||
database and authentication.
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
|
||||
href="https://create.t3.gg/en/introduction"
|
||||
target="_blank"
|
||||
>
|
||||
<h3 className="text-2xl font-bold">Documentation →</h3>
|
||||
<div className="text-lg">
|
||||
Learn more about Create T3 App, the libraries it uses, and how
|
||||
to deploy it.
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<p className="text-2xl text-white">
|
||||
{hello.data ? hello.data.greeting : "Loading tRPC query..."}
|
||||
</p>
|
||||
<AuthShowcase />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
<div className="container">
|
||||
<h1 className="text-5xl font-bold text-primary">
|
||||
Collaborate with experts.
|
||||
<br />
|
||||
Educate the world.
|
||||
</h1>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
const AuthShowcase: React.FC = () => {
|
||||
const { data: sessionData } = useSession();
|
||||
|
||||
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
|
||||
undefined, // no input
|
||||
{ enabled: sessionData?.user !== undefined },
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-center text-2xl text-white">
|
||||
{sessionData && <span>Logged in as {sessionData.user?.name}</span>}
|
||||
{secretMessage && <span> - {secretMessage}</span>}
|
||||
</p>
|
||||
<button
|
||||
className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
|
||||
onClick={sessionData ? () => void signOut() : () => void signIn()}
|
||||
>
|
||||
{sessionData ? "Sign out" : "Sign in"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,3 +1,14 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html,
|
||||
body {
|
||||
@apply bg-bg text-fg;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
p,
|
||||
a {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,93 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
container: {
|
||||
center: true,
|
||||
padding: "1.5rem",
|
||||
},
|
||||
screens: {},
|
||||
colors: {
|
||||
fg: {
|
||||
DEFAULT: "#A3A395",
|
||||
100: "#ededea",
|
||||
200: "#dadad5",
|
||||
300: "#c8c8bf",
|
||||
400: "#b5b5aa",
|
||||
500: "#a3a395",
|
||||
600: "#828277",
|
||||
700: "#626259",
|
||||
800: "#41413c",
|
||||
900: "#21211e",
|
||||
},
|
||||
bg: {
|
||||
DEFAULT: "#303030",
|
||||
100: "#d6d6d6",
|
||||
200: "#acacac",
|
||||
300: "#838383",
|
||||
400: "#595959",
|
||||
500: "#303030",
|
||||
600: "#262626",
|
||||
700: "#1d1d1d",
|
||||
800: "#131313",
|
||||
900: "#0a0a0a",
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: "#DEB887",
|
||||
100: "#f8f1e7",
|
||||
200: "#f2e3cf",
|
||||
300: "#ebd4b7",
|
||||
400: "#e5c69f",
|
||||
500: "#deb887",
|
||||
600: "#b2936c",
|
||||
700: "#856e51",
|
||||
800: "#594a36",
|
||||
900: "#2c251b",
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "#AF7E7F",
|
||||
100: "#efe5e5",
|
||||
200: "#dfcbcc",
|
||||
300: "#cfb2b2",
|
||||
400: "#bf9899",
|
||||
500: "#af7e7f",
|
||||
600: "#8c6566",
|
||||
700: "#694c4c",
|
||||
800: "#463233",
|
||||
900: "#231919",
|
||||
},
|
||||
tertiary: {
|
||||
DEFAULT: "#B35443",
|
||||
100: "#f0ddd9",
|
||||
200: "#e1bbb4",
|
||||
300: "#d1988e",
|
||||
400: "#c27669",
|
||||
500: "#b35443",
|
||||
600: "#8f4336",
|
||||
700: "#6b3228",
|
||||
800: "#48221b",
|
||||
900: "#24110d",
|
||||
},
|
||||
quaternary: {
|
||||
DEFAULT: "#483E41",
|
||||
100: "#dad8d9",
|
||||
200: "#b6b2b3",
|
||||
300: "#918b8d",
|
||||
400: "#6d6567",
|
||||
500: "#483e41",
|
||||
600: "#3a3234",
|
||||
700: "#2b2527",
|
||||
800: "#1d191a",
|
||||
900: "#0e0c0d",
|
||||
},
|
||||
success: "#ACD161",
|
||||
error: "#E24536",
|
||||
warning: "#EDC25E",
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["var(--font-murecho)"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user