From 1e282617a94914731f198698f5038facfa9d173c Mon Sep 17 00:00:00 2001 From: slice Date: Fri, 28 Apr 2023 09:06:47 -0700 Subject: [PATCH] add new logo and other tweak!!!!!1 --- src/app/globals.css | 5 + src/app/page.module.css | 3 +- src/app/page.tsx | 14 ++- src/components/ColorChanger.module.css | 14 ++- src/components/ColorChanger.tsx | 4 +- src/components/Logo.module.css | 3 + src/components/Logo.tsx | 121 +++++++++++++++++++++++++ 7 files changed, 147 insertions(+), 17 deletions(-) create mode 100644 src/components/Logo.module.css create mode 100644 src/components/Logo.tsx diff --git a/src/app/globals.css b/src/app/globals.css index b82dfe6..41f5c32 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -113,3 +113,8 @@ a { color: inherit; text-decoration: none; } + +::selection { + background: var(--fg); + color: var(--bg); +} diff --git a/src/app/page.module.css b/src/app/page.module.css index 2c958a0..9e8bee0 100644 --- a/src/app/page.module.css +++ b/src/app/page.module.css @@ -3,7 +3,6 @@ flex-direction: column; justify-content: center; align-items: center; - width: 100vw; height: 100vh; } @@ -25,4 +24,4 @@ .form div input { width: 15rem; -} \ No newline at end of file +} diff --git a/src/app/page.tsx b/src/app/page.tsx index f6a80df..dd5880e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,20 +1,24 @@ +import Logo from "@/components/Logo"; import styles from "./page.module.css"; -import Image from "next/image"; export default function Home() { return (
- gluestick logo +

login - register (discord) - register (github) +
+ register with discord + register with github

); diff --git a/src/components/ColorChanger.module.css b/src/components/ColorChanger.module.css index 3800c81..bb183e5 100644 --- a/src/components/ColorChanger.module.css +++ b/src/components/ColorChanger.module.css @@ -1,14 +1,12 @@ .colorChanger { position: fixed; - right: 0; - bottom: 0; - - padding: 8px; - - opacity: 30%; - transition: opacity 0.25s ease-in-out; + right: 10px; + bottom: 10px; + transition: filter 100ms ease-in-out; + filter: grayscale(100%) opacity(20%); + cursor: pointer; } .colorChanger:hover { - opacity: 100%; + filter: none; } diff --git a/src/components/ColorChanger.tsx b/src/components/ColorChanger.tsx index 6165c59..176fc44 100644 --- a/src/components/ColorChanger.tsx +++ b/src/components/ColorChanger.tsx @@ -179,8 +179,8 @@ export default function ColorChanger() { return ( paint { diff --git a/src/components/Logo.module.css b/src/components/Logo.module.css new file mode 100644 index 0000000..02ea107 --- /dev/null +++ b/src/components/Logo.module.css @@ -0,0 +1,3 @@ +.logo { + width: 700px; +} diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 0000000..24ec7fc --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,121 @@ +import React from "react"; + +import styles from "./Logo.module.css"; + +export default function Logo() { + return ( + + + + + + + + + + + + ); +}