Fix background on body, improve theme toggle visibility, restore single column layout

Co-authored-by: nwalters512 <1476544+nwalters512@users.noreply.github.com>

Author: Copilot

.prettierignore

@@ -3,3 +3,4 @@
 package.json
 package-lock.json
 public
+next-env.d.ts

src/components/theme-toggle.tsx

@@ -7,12 +7,12 @@ const ThemeToggle: React.FC = () => {
   return (
     <button
       onClick={toggleTheme}
-      className="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+      className="p-2 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-gray-300 dark:border-gray-600"
       aria-label="Toggle theme"
     >
       {theme === "light" ? (
         <svg
-          className="w-5 h-5 text-gray-800"
+          className="w-5 h-5 text-gray-800 dark:text-gray-200"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
@@ -26,7 +26,7 @@ const ThemeToggle: React.FC = () => {
         </svg>
       ) : (
         <svg
-          className="w-5 h-5 text-yellow-300"
+          className="w-5 h-5 text-yellow-400 dark:text-yellow-300"
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"

src/pages/_app.tsx

@@ -15,9 +15,7 @@ const sourceSans3 = Source_Sans_3({
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   return (
-    <div
-      className={`${sourceSans3.className} min-h-screen bg-white dark:bg-gray-900 transition-colors`}
-    >
+    <div className={sourceSans3.className}>
       <SEO />
       <Header title="Nathan's Cookbook" />
       <ContentContainer>

src/pages/index.tsx

@@ -10,26 +10,22 @@ interface IndexProps {
 
 const Index: React.FC<IndexProps> = ({ recipes }) => {
   return (
-    <div className="grid gap-4 md:grid-cols-2">
+    <React.Fragment>
       {recipes.map((recipe) => (
-        <Link
-          href={`/recipes/${recipe.slug}`}
-          key={recipe.slug}
-          className="group"
-        >
-          <article className="h-full bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-200 p-4 border border-gray-200 dark:border-gray-700">
-            <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-orange-600 dark:group-hover:text-orange-400 transition-colors">
+        <article className="mb-4" key={recipe.slug}>
+          <Link href={`/recipes/${recipe.slug}`}>
+            <h2 className="text-2xl hover:text-orange-600 dark:hover:text-orange-400 transition-colors">
               {recipe.title}
             </h2>
-            {recipe.description && (
-              <p className="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
-                {recipe.description}
-              </p>
-            )}
-          </article>
-        </Link>
+          </Link>
+          {recipe.description && (
+            <p className="text-gray-600 dark:text-gray-400">
+              {recipe.description}
+            </p>
+          )}
+        </article>
       ))}
-    </div>
+    </React.Fragment>
   )
 }
 

src/tailwind.css

@@ -2,6 +2,7 @@
 
 body {
   font-family: "Source Sans Pro", serif;
+  @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors;
 }
 
 ol.step-list {