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>

View file

@ -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>