feat: simplified body

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',
-            height: '100vh',
-            display: 'flex',
-            flexDirection: 'column',
-            background: 'url(https://i.imgur.com/PhS06NJ.png)',
-            alignItems: 'center',
+            flex: 1,
+            width: '100%',
           }}
         >
-          <Navbar />
-
-          <div style={{ flex: 1, maxWidth: 780, width: '100%' }}>
+          <div style={{ maxWidth: 780, margin: 'auto', display: 'block' }}>
             {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: 'flex-start',
-                        justifyContent: 'flex-end',
-                        padding: 16,
-                        gap: 4,
-                        background: 'linear-gradient(#00000000, #000000ff)',
-                        height: '100%',
-                        width: '100%',
+                        alignItems: 'center',
+                        justifyContent: 'center',
                       }}
                     >
-                      <span
-                        style={{
-                          fontSize: 32,
-                          color: theme.colors.textHighContrast,
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'center',
-                        }}
-                      >
-                        {tool.title}
-                        <CaretRightIcon
-                          style={{ width: '1em', height: '1em' }}
-                        />
-                      </span>
-                      <span
-                        style={{
-                          color: theme.colors.textLowContrast,
-                          fontSize: 16,
-                        }}
-                      >
-                        {tool.description}
-                      </span>
-                    </div>
+                      {tool.title}
+                      <CaretRightIcon style={{ width: '1em', height: '1em' }} />
+                    </span>
+                    <span
+                      style={{
+                        color: theme.colors.textLowContrast,
+                        fontSize: 16,
+                      }}
+                    >
+                      {tool.description}
+                    </span>
                   </Link>
                 ),
                 query: `${tool.title} ${tool.description}`,

src/stitches.config.ts

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