Lncvrt-Games/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change colors

Browse Source
This commit is contained in:
Lncvrt
2026-01-30 19:25:11 -07:00
parent a010e4ed81
commit 56cb8af74c
4 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/AccountButton.tsx
View File

@@ -6,7 +6,7 @@ export function AccountButton () {
return ( return (
<> <>
<div className='relative'> <div className='relative'>
<Link href='/account' className='home-button absolute -top-4 -left-4'> <Link href='/account' className='top-button absolute -top-4 -left-4'>
<FontAwesomeIcon icon={faUser} /> <FontAwesomeIcon icon={faUser} />
</Link> </Link>
</div> </div>

2
src/app/components/DiscordButton.tsx
View File

@@ -6,7 +6,7 @@ export function DiscordButton () {
return ( return (
<> <>
<div className='relative'> <div className='relative'>
<Link href='/discord' className='home-button absolute -top-4 -right-4'> <Link href='/discord' className='top-button absolute -top-4 -right-4'>
<FontAwesomeIcon icon={faDiscord} /> <FontAwesomeIcon icon={faDiscord} />
</Link> </Link>
</div> </div>

2
src/app/components/HomeButton.tsx
View File

@@ -6,7 +6,7 @@ export function HomeButton () {
return ( return (
<> <>
<div className='relative'> <div className='relative'>
<Link href='/' className='home-button absolute -top-4 -left-4'> <Link href='/' className='top-button absolute -top-4 -left-4'>
<FontAwesomeIcon icon={faHome} /> <FontAwesomeIcon icon={faHome} />
</Link> </Link>
</div> </div>

29
src/app/globals.css
View File

@@ -2,14 +2,24 @@
* { * {
@apply outline-0; @apply outline-0;
--col0: rgb(8, 8, 32);
--col1: rgb(16, 16, 40);
--col2: rgb(32, 32, 56);
--col3: rgb(48, 48, 72);
--col4: rgb(64, 64, 88);
--col5: rgb(80, 80, 104);
--col6: rgb(96, 96, 120);
--col7: rgb(112, 112, 136);
--col8: rgb(128, 128, 152);
} }
body { body {
@apply bg-[rgb(24,24,48)] text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen; @apply bg-(--col0) text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
} }
.box { .box {
@apply bg-[rgb(48,48,72)] border border-[rgb(72,72,96)] rounded-lg shadow-[rgba(0,0,0,0.5)]; @apply bg-(--col2) border border-(--col4) rounded-lg shadow-[rgba(0,0,0,0.5)];
@apply w-auto p-6 m-2; @apply w-auto p-6 m-2;
} }
@@ -18,8 +28,8 @@ body {
} }
.games-grid a { .games-grid a {
@apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] rounded-lg transition-all duration-200; @apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-(--col4) border border-(--col6) rounded-lg transition-all duration-200;
@apply hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)]; @apply hover:bg-(--col5) hover:border-(--col7) hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
} }
.games-grid a img { .games-grid a img {
@@ -49,15 +59,16 @@ body {
.downloads a, .downloads a,
button, button,
.button,
select { select {
@apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer; @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col8) hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
} }
.home-button { .top-button {
@apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center; @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col7) hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
} }
.home-button svg { .top-button svg {
@apply h-5 w-5; @apply h-5 w-5;
} }
@@ -66,5 +77,5 @@ p a {
} }
input { input {
@apply bg-[rgb(72,72,96)] focus:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] focus:border-[rgb(120,120,144)] rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text; @apply bg-(--col4) focus:bg-(--col5) border border-(--col6) focus:border-(--col7) rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
} }