More tweaks

website/src/app/globals.css

@@ -1,32 +1,31 @@
-
 :root {
-  --background: #252525;
-  --foreground: #ededed;
+    --background: #252525;
+    --foreground: #ededed;
 }
 
 
 html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
-  color-scheme: dark;
+    max-width: 100vw;
+    overflow-x: hidden;
+    color-scheme: dark;
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    color: var(--foreground);
+    background: var(--background);
+    font-family: Arial, Helvetica, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 * {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
 }
 
 a {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }

website/src/app/layout.tsx

@@ -3,31 +3,31 @@ import { Space_Grotesk, Space_Mono } from "next/font/google";
 import "./globals.css";
 
 const spaceGrotesk = Space_Grotesk({
-  variable: "--font-space-grotesk",
-  subsets: ["latin"]
+    variable: "--font-space-grotesk",
+    subsets: ["latin"]
 });
 
 const spaceMono = Space_Mono({
-  variable: "--font-space-mono",
-  subsets: ["latin"],
-  weight: ["400"]
+    variable: "--font-mono",
+    subsets: ["latin"],
+    weight: ["400"]
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+    title: "Create Next App",
+    description: "Generated by create next app",
 };
 
 export default function RootLayout({
-  children,
+    children,
 }: Readonly<{
-  children: React.ReactNode;
+    children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en">
-      <body className={`${spaceGrotesk.variable} ${spaceMono.variable}`}>
-        {children}
-      </body>
-    </html>
-  );
+    return (
+        <html lang="en">
+            <body className={`${spaceGrotesk.variable} ${spaceMono.variable}`}>
+                {children}
+            </body>
+        </html>
+    );
 }

website/src/app/page.module.css

@@ -227,7 +227,7 @@
 .hydrationCode {
     flex: 2;
     width: 100%;
-    max-width: 800px;
+    max-width: 780px;
 }
 
 .hydrationText {
@@ -282,3 +282,13 @@
         padding: 1rem;
     }
 }
+
+.hydrationText p code {
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    background-color: var(--gray-alpha-100);
+    border-radius: 0.2em;
+    padding: 0.1em 0.2em;
+    color: var(--foreground);
+    border: 1px solid var(--gray-alpha-200);
+}

website/src/app/page.tsx

@@ -54,13 +54,13 @@ export default function Home() {
                 <div className={styles.hydrationSection}>
                     <div className={styles.hydrationContainer}>
                         <div className={styles.hydrationCode}>
-                            <CodeExample code={hydrationExample} height={260} noScroll={true} />
+                            <CodeExample code={hydrationExample} height={245} noScroll={true} />
                         </div>
                         <div className={styles.hydrationText}>
                             <h2>Smart Hydration</h2>
                             <p>
                                 Unicord's hydration system automatically manages Discord object lifecycles. 
-                                The context.hydrate method intelligently fetches and caches Discord objects 
+                                The <code>context.hydrate</code> method intelligently fetches and caches Discord objects 
                                 like messages, users, and guilds, ensuring your bot stays efficient while 
                                 keeping your code clean and predictable.
                             </p>

website/src/components/CodeExample.module.css

@@ -10,6 +10,4 @@
     border-radius: 8px;
     overflow: hidden;
     border: 1px solid #2d2d2d;
-    /* Prevent scroll capture */
-    /* pointer-events: none; */
 }