mirror of
https://github.com/MaggieAppleton/digital-gardeners.git
synced 2024-11-21 08:59:45 +01:00
colour updates and layout shift
This commit is contained in:
Maggie Appleton
parent
d6cf6d10fc
commit
8e4d516d85
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
---
|
||||
title: Bill Seitz
|
||||
url: ""
|
||||
image: https://via.placeholder.com/250
|
||||
image: /bill1.png
|
||||
tools: [""]
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
BIN
public/bill1.png
Normal file
BIN
public/bill1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
public/bill2.png
Normal file
BIN
public/bill2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
BIN
public/bill3.png
Normal file
BIN
public/bill3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
BIN
public/bill4.png
Normal file
BIN
public/bill4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
|
|
@ -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);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(245, 255, 247) 0%,
|
||||
rgb(246, 255, 240) 70%,
|
||||
rgb(213, 240, 218) 100%
|
||||
);
|
||||
@apply bg-offWhite;
|
||||
@apply text-black;
|
||||
}
|
||||
|
||||
/* https://tailwindcss.com/docs/adding-base-styles */
|
||||
|
|
|
|||
|
|
@ -25,12 +25,11 @@ module.exports = {
|
|||
},
|
||||
colors: {
|
||||
...colors,
|
||||
primary: colors.blue["500"],
|
||||
secondary: colors.blue["700"],
|
||||
accent: colors.blue["800"],
|
||||
success: colors.green["500"],
|
||||
warning: colors.orange["500"],
|
||||
error: colors.red["500"],
|
||||
deepGreen: "#136464",
|
||||
offWhite: "#F7F7F5",
|
||||
black: "#2B2B2B",
|
||||
lightBlack: "#3F433E",
|
||||
orangeRed: "#FF6148",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue