colour updates and layout shift

components/Card.js

@@ -5,7 +5,7 @@ import Image from "next/image";
 export default function Card({ garden }) {
     return (
         <motion.li
-            className="w-60 mr-10 mb-14 space-y-2 opacity-80"
+            className="w-80 mr-8 mb-8 space-y-2 opacity-80"
             key={garden.filePath}
             whileHover={{
                 scale: 1.02,
@@ -25,12 +25,13 @@ export default function Card({ garden }) {
                         <Image
                             className="rounded-md"
                             src={garden.data.image}
-                            width={250}
+                            width={320}
-                            height={200}
+                            height={180}
+                            layout="responsive"
                             alt={garden.data.title}
                         />
                     )}
-                    <h3 className="text-coolGray-600 leading-tight mt-2">
+                    <h3 className=" leading-tight mt-4 text-lg">
                         {garden.data.title}
                     </h3>
                 </a>
@@ -39,7 +40,7 @@ export default function Card({ garden }) {
                 {garden.data.tools &&
                     garden.data.tools.map((tool) => <p>{tool}</p>)}
             </motion.div>
-            <svg className="h-4 w-4 text-coolGray-600" viewBox="0 0 20 20">
+            <svg className="h-4 w-4 " viewBox="0 0 20 20">
                 <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
             </svg>
         </motion.li>

components/Sidemenu.js

@@ -18,30 +18,30 @@ export default function Sidemenu() {
                     },
                 },
             }}
-            className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12"
+            className="flex flex-col space-y-3 mt-28 ml-6 w-60 mr-12 text-deepGreen"
         >
             <Link href="/what">
-                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold">
+                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight font-bold">
                     What's a Digital Garden?
                 </a>
             </Link>
             <Link href="/directory">
-                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
                     Garden Directory
                 </a>
             </Link>
             <Link href="/tools">
-                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
                     Tools for Gardening
                 </a>
             </Link>
             <Link href="/tutorials">
-                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
                     Gardening Tutorials and Guides
                 </a>
             </Link>
             <Link href="/theory">
-                <a className="text-teal-700 hover:text-teal-900 text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
+                <a className="text-base opacity-80 hover:opacity-100 transition-all duration-350 leading-tight">
                     Gardening Theory and Navel-Gazing
                 </a>
             </Link>

gardens/bill-seitz.mdx

@@ -1,6 +1,11 @@
 ---
 title: Bill Seitz
 url: ""
-image: https://via.placeholder.com/250
+image: /bill1.png
 tools: [""]
 ---
+
+![](/bill1.png)
+![](/bill2.png)
+![](/bill3.png)
+![](/bill4.png)

pages/index.js

@@ -30,13 +30,13 @@ export default function Index({ gardens }) {
                         },
                     }}
                 >
-                    <h1 className="sm:text-4xl text-coolGray-700 mb-6 font-semibold">
+                    <h1 className="sm:text-4xl  mb-6 font-semibold">
                         Garden of Digital Gardens
                     </h1>
-                    <p className="text-xl text-coolGray-600 font-serif font-light max-w-5xl leading-tight">
+                    <h2 className="text-xl text-deepGreen font-serif font-light max-w-5xl leading-tight">
                         A collection of digital gardens, tools, and resources
                         for gardeners
-                    </p>
+                    </h2>
                 </motion.div>
                 <motion.ul
                     initial="hidden"

styles/tailwind.css

@@ -13,6 +13,7 @@
     h2 {
         @apply text-2xl;
         @apply leading-none;
+        @apply text-lightBlack;
     }
     h3 {
         @apply text-xl;
@@ -27,13 +28,8 @@ html {
     background-repeat: no-repeat;
     background-size: cover;
     min-height: 100vh;
-    background-color: rgb(243, 250, 218);
+    @apply bg-offWhite;
-    background: linear-gradient(
+    @apply text-black;
-        180deg,
-        rgb(245, 255, 247) 0%,
-        rgb(246, 255, 240) 70%,
-        rgb(213, 240, 218) 100%
-    );
 }
 
 /* https://tailwindcss.com/docs/adding-base-styles */

tailwind.config.js

@@ -25,12 +25,11 @@ module.exports = {
             },
             colors: {
                 ...colors,
-                primary: colors.blue["500"],
+                deepGreen: "#136464",
-                secondary: colors.blue["700"],
+                offWhite: "#F7F7F5",
-                accent: colors.blue["800"],
+                black: "#2B2B2B",
-                success: colors.green["500"],
+                lightBlack: "#3F433E",
-                warning: colors.orange["500"],
+                orangeRed: "#FF6148",
-                error: colors.red["500"],
             },
         },
     },