From a31259d3d6e799da9aa55301088f3400ce4f665c Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Tue, 7 Jun 2022 16:14:24 -0400
Subject: [PATCH 1/2] Add Card component

---
 src/components/Card.astro | 51 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 src/components/Card.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..ec1dc4e
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,51 @@
+---
+const { colour, title, description } = Astro.props;
+---
+
+<style define:vars={{ colour }}>
+* {
+  font-family: Helvetica, sans-serif;
+}
+
+div {
+  background-color: var(--colour);
+  border-radius: 0.3em;
+  width: 30em;
+  height: 15em;
+}
+
+h1, p, button {
+  position: relative;
+}
+
+h1 {
+  left: 1em;
+  top: 1em;
+  left: 1em;
+  font-weight: 300;
+}
+
+p {
+  top: 2em;
+  left: 2.2em;
+}
+
+button {
+  bottom: -5.5rem;
+  left: 2.5em;
+  width: 5.5em;
+  height: 2.5em;
+  font-size: medium;
+  border-radius: 5em;
+  border: 0em solid black;
+  background-color: black;
+  color: white;
+  font-weight: 200;
+}
+</style>
+
+<div>
+  <h1>{title}</h1>
+  <p>{description}</p>
+  <button>Read</button>
+</div>
\ No newline at end of file

From fd60caf5cd28cfc19a5ffde7bdecbd35b72adb15 Mon Sep 17 00:00:00 2001
From: Vasily Inkovskiy <76574837+xxArchitect@users.noreply.github.com>
Date: Wed, 15 Jun 2022 19:12:45 -0400
Subject: [PATCH 2/2] Change em to rem and uitlize padding and margins to
 position elements

---
 src/components/Card.astro | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/Card.astro b/src/components/Card.astro
index ec1dc4e..b13e335 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -9,35 +9,30 @@ const { colour, title, description } = Astro.props;
 
 div {
   background-color: var(--colour);
-  border-radius: 0.3em;
-  width: 30em;
-  height: 15em;
-}
-
-h1, p, button {
-  position: relative;
+  border-radius: 0.3rem;
+  width: 30rem;
+  height: 15rem;
 }
 
 h1 {
-  left: 1em;
-  top: 1em;
-  left: 1em;
+  padding-top: 2rem;
+  padding-left: 2rem;
   font-weight: 300;
 }
 
 p {
-  top: 2em;
-  left: 2.2em;
+  padding-top: 0.25rem;
+  padding-left: 2rem;
 }
 
 button {
-  bottom: -5.5rem;
-  left: 2.5em;
-  width: 5.5em;
-  height: 2.5em;
+  margin-top: 2.5rem;
+  margin-left: 2rem;
+  width: 5.5rem;
+  height: 2.5rem;
   font-size: medium;
-  border-radius: 5em;
-  border: 0em solid black;
+  border-radius: 5rem;
+  border: 0rem solid black;
   background-color: black;
   color: white;
   font-weight: 200;