feat: simplified body

next-env.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,6 +1,10 @@
+import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  /* config options here */
+  ...withVanillaExtract(),
   distDir: 'dist/website',
 };
 

package.json

@@ -32,6 +32,7 @@
     "@radix-ui/colors": "^2.1.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@resvg/resvg-js": "^2.4.1",
+    "@vanilla-extract/css": "^1.13.0",
     "bepaint": "^0.1.0-beta.3",
     "discord.js": "^14.13.0",
     "dotenv": "^16.3.1",
@@ -57,6 +58,7 @@
     "@types/markdown-escape": "^1.1.0",
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
+    "@vanilla-extract/next-plugin": "^2.3.0",
     "compare-versions": "^6.1.0",
     "knip": "^2.22.0",
     "prettier": "^3.0.3",

src/app/layout.tsx

@@ -17,21 +17,18 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body
         style={{
           margin: 0,
+          background: 'url(https://i.imgur.com/PhS06NJ.png)',
         }}
       >
+        <Navbar />
+
         <div
           style={{
-            width: '100vw',
+            flex: 1,
-            height: '100vh',
+            width: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            background: 'url(https://i.imgur.com/PhS06NJ.png)',
-            alignItems: 'center',
           }}
         >
-          <Navbar />
+          <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
-
-          <div style={{ flex: 1, maxWidth: 780, width: '100%' }}>
             {children}
           </div>
         </div>

src/app/page.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+import { theme } from '../stitches.config';
+
+export const tool = style({
+  height: 128,
+  minWidth: 256,
+  flex: 1,
+  borderRadius: 4,
+  textDecoration: 'none',
+  backgroundSize: 'cover',
+  backgroundPosition: 'center',
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-end',
+  padding: 16,
+  gap: 4,
+  boxShadow: 'inset 0 -192px 128px -128px black',
+  transitionDuration: theme.durations.regular,
+
+  ':hover': {
+    boxShadow: 'inset 0 -128px 128px -128px black',
+  },
+});

src/app/page.tsx

@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import { Search, SearchItem } from 'react-fuzzysort';
 import { SearchBar } from '../components/SearchBar';
 import { theme } from '../stitches.config';
+import * as styles from './page.css';
 
 const TOOLS = [
   {
@@ -51,6 +52,7 @@ export default function Page() {
         display: 'flex',
         flexDirection: 'column',
         gap: 16,
+        boxSizing: 'border-box',
       }}
     >
       <SearchBar ref={input} />
@@ -70,55 +72,31 @@ export default function Page() {
                 node: (
                   <Link
                     href={tool.href}
+                    className={styles.tool}
                     style={{
-                      height: 128,
-                      minWidth: 256,
-                      flex: 1,
-                      borderRadius: 4,
-                      textDecoration: 'none',
                       backgroundImage: `url(${tool.banner})`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'center',
-                      overflow: 'hidden',
                     }}
                   >
-                    <div
+                    <span
                       style={{
-                        boxSizing: 'border-box',
+                        fontSize: 32,
+                        color: theme.colors.textHighContrast,
                         display: 'flex',
-                        flexDirection: 'column',
+                        alignItems: 'center',
-                        alignItems: 'flex-start',
+                        justifyContent: 'center',
-                        justifyContent: 'flex-end',
-                        padding: 16,
-                        gap: 4,
-                        background: 'linear-gradient(#00000000, #000000ff)',
-                        height: '100%',
-                        width: '100%',
                       }}
                     >
-                      <span
+                      {tool.title}
-                        style={{
+                      <CaretRightIcon style={{ width: '1em', height: '1em' }} />
-                          fontSize: 32,
+                    </span>
-                          color: theme.colors.textHighContrast,
+                    <span
-                          display: 'flex',
+                      style={{
-                          alignItems: 'center',
+                        color: theme.colors.textLowContrast,
-                          justifyContent: 'center',
+                        fontSize: 16,
-                        }}
+                      }}
-                      >
+                    >
-                        {tool.title}
+                      {tool.description}
-                        <CaretRightIcon
+                    </span>
-                          style={{ width: '1em', height: '1em' }}
-                        />
-                      </span>
-                      <span
-                        style={{
-                          color: theme.colors.textLowContrast,
-                          fontSize: 16,
-                        }}
-                      >
-                        {tool.description}
-                      </span>
-                    </div>
                   </Link>
                 ),
                 query: `${tool.title} ${tool.description}`,

src/stitches.config.ts

@@ -14,4 +14,8 @@ export const theme = {
   },
 
   borderStyles: createBorderStyles(slateDark),
+
+  durations: {
+    regular: '0.2s',
+  },
 };

tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["./node_modules/typescript/lib/lib.es5.d.ts","./node_modules/typescript/lib/lib.es2015.d.ts","./node_modules/typescript/lib/lib.es2016.d.ts","./node_modules/typescript/lib/lib.es2017.d.ts","./node_modules/typescript/lib/lib.es2018.d.ts","./node_modules/typescript/lib/lib.es2019.d.ts","./node_modules/typescript/lib/lib.es2020.d.ts","./node_modules/typescript/lib/lib.es2021.d.ts","./node_modules/typescript/lib/lib.es2022.d.ts","./node_modules/typescript/lib/lib.es2023.d.ts","./node_modules/typescript/lib/lib.esnext.d.ts","./node_modules/typescript/lib/lib.dom.d.ts","./node_modules/typescript/lib/lib.dom.iterable.d.ts","./node_modules/typescript/lib/lib.es2015.core.d.ts","./node_modules/typescript/lib/lib.es2015.collection.d.ts","./node_modules/typescript/lib/lib.es2015.generator.d.ts","./node_modules/typescript/lib/lib.es2015.iterable.d.ts","./node_modules/typescript/lib/lib.es2015.promise.d.ts","./node_modules/typescript/lib/lib.es2015.proxy.d.ts","./node_modules/typescript/lib/lib.es2015.reflect.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.d.ts","./node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2016.array.include.d.ts","./node_modules/typescript/lib/lib.es2017.date.d.ts","./node_modules/typescript/lib/lib.es2017.object.d.ts","./node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2017.string.d.ts","./node_modules/typescript/lib/lib.es2017.intl.d.ts","./node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","./node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","./node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","./node_modules/typescript/lib/lib.es2018.intl.d.ts","./node_modules/typescript/lib/lib.es2018.promise.d.ts","./node_modules/typescript/lib/lib.es2018.regexp.d.ts","./node_modules/typescript/lib/lib.es2019.array.d.ts","./node_modules/typescript/lib/lib.es2019.object.d.ts","./node_modules/typescript/lib/lib.es2019.string.d.ts","./node_modules/typescript/lib/lib.es2019.symbol.d.ts","./node_modules/typescript/lib/lib.es2019.intl.d.ts","./node_modules/typescript/lib/lib.es2020.bigint.d.ts","./node_modules/typescript/lib/lib.es2020.date.d.ts","./node_modules/typescript/lib/lib.es2020.promise.d.ts","./node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2020.string.d.ts","./node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","./node_modules/typescript/lib/lib.es2020.intl.d.ts","./node_modules/typescript/lib/lib.es2020.number.d.ts","./node_modules/typescript/lib/lib.es2021.promise.d.ts","./node_modules/typescript/lib/lib.es2021.string.d.ts","./node_modules/typescript/lib/lib.es2021.weakref.d.ts","./node_modules/typescript/lib/lib.es2021.intl.d.ts","./node_modules/typescript/lib/lib.es2022.array.d.ts","./node_modules/typescript/lib/lib.es2022.error.d.ts","./node_modules/typescript/lib/lib.es2022.intl.d.ts","./node_modules/typescript/lib/lib.es2022.object.d.ts","./node_modules/typescript/lib/lib.es2022.sharedmemory.d.ts","./node_modules/typescript/lib/lib.es2022.string.d.ts","./node_modules/typescript/lib/lib.es2022.regexp.d.ts","./node_modules/typescript/lib/lib.es2023.array.d.ts","./node_modules/typescript/lib/lib.es2023.collection.d.ts","./node_modules/typescript/lib/lib.esnext.intl.d.ts","./node_modules/typescript/lib/lib.esnext.disposable.d.ts","./node_modules/typescript/lib/lib.esnext.decorators.d.ts","./node_modules/typescript/lib/lib.decorators.d.ts","./node_modules/typescript/lib/lib.decorators.legacy.d.ts","./node_modules/@sapphire/shapeshift/dist/index.d.ts","./node_modules/discord-api-types/globals.d.ts","./node_modules/discord-api-types/rest/common.d.ts","./node_modules/discord-api-types/payloads/common.d.ts","./node_modules/discord-api-types/payloads/v10/permissions.d.ts","./node_modules/discord-api-types/payloads/v10/user.d.ts","./node_modules/discord-api-types/payloads/v10/emoji.d.ts","./node_modules/discord-api-types/payloads/v10/oauth2.d.ts","./node_modules/discord-api-types/payloads/v10/sticker.d.ts","./node_modules/discord-api-types/payloads/v10/guild.d.ts","./node_modules/discord-api-types/payloads/v10/teams.d.ts","./node_modules/discord-api-types/payloads/v10/application.d.ts","./node_modules/discord-api-types/payloads/v10/autoModeration.d.ts","./node_modules/discord-api-types/payloads/v10/guildScheduledEvent.d.ts","./node_modules/discord-api-types/payloads/v10/stageInstance.d.ts","./node_modules/discord-api-types/payloads/v10/webhook.d.ts","./node_modules/discord-api-types/payloads/v10/auditLog.d.ts","./node_modules/discord-api-types/payloads/v10/invite.d.ts","./node_modules/discord-api-types/rest/v10/application.d.ts","./node_modules/discord-api-types/rest/v10/auditLog.d.ts","./node_modules/discord-api-types/rest/v10/autoModeration.d.ts","./node_modules/discord-api-types/utils/internals.d.ts","./node_modules/discord-api-types/rest/v10/channel.d.ts","./node_modules/discord-api-types/rest/Line truncated