colour updates and layout shift

This commit is contained in:
Maggie Appleton 2021-09-06 16:36:23 +01:00
parent d6cf6d10fc
commit 8e4d516d85
10 changed files with 29 additions and 28 deletions

View file

@ -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}
height={200}
width={320}
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>