From 53abbe6c9e5c64b5c12069d1ececad615d0bc70c Mon Sep 17 00:00:00 2001
From: Robert McGovern <rob@tarasis.net>
Date: Sat, 12 Sep 2020 10:16:18 +0100
Subject: [PATCH] Set up basic styling per the style guide

---
 .../css/style.css                             | 41 +++++++++++++++++++
 .../index.html                                |  1 +
 .../work-through/process.md                   |  4 +-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 FrontendMentor/single-price-grid-component-master/css/style.css

diff --git a/FrontendMentor/single-price-grid-component-master/css/style.css b/FrontendMentor/single-price-grid-component-master/css/style.css
new file mode 100644
index 0000000..3c8fa1a
--- /dev/null
+++ b/FrontendMentor/single-price-grid-component-master/css/style.css
@@ -0,0 +1,41 @@
+@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');
+
+:root {
+    /* setting base to 20px to make my life nicer working with rem */
+    font-size: 20px;
+    /* primary site colours */
+    --site-cyan: hsl(179, 62%, 43%);
+    --site-bright-yellow: hsl(71, 73%, 54%);
+    /* neutral site colours */
+    --site-light-gray: hsl(204, 43%, 93%);
+    --site-grayish-blue: hsl(218, 22%, 67%);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    /* per the style guide, the body copy is 16px */
+    font-size: 16px;
+    font-family: 'Karla', sans-serif;
+    min-width: 375px;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--site-light-gray);
+}
+
+/** 
+* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
+* TODO: Tweak transition point later
+*/ 
+@media screen and (max-width: 500px) {
+
+}
+
+@media screen and (min-width: 500px) {
+
+}
\ No newline at end of file
diff --git a/FrontendMentor/single-price-grid-component-master/index.html b/FrontendMentor/single-price-grid-component-master/index.html
index d166d16..7a59c1f 100644
--- a/FrontendMentor/single-price-grid-component-master/index.html
+++ b/FrontendMentor/single-price-grid-component-master/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
 
   <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
+  <link rel="stylesheet" href="./css/style.css">
   
   <title>Frontend Mentor | Single Price Grid Component</title>
 
diff --git a/FrontendMentor/single-price-grid-component-master/work-through/process.md b/FrontendMentor/single-price-grid-component-master/work-through/process.md
index 750d7e3..6a2c8f3 100644
--- a/FrontendMentor/single-price-grid-component-master/work-through/process.md
+++ b/FrontendMentor/single-price-grid-component-master/work-through/process.md
@@ -1,4 +1,6 @@
 Next challenge started 12th Sept 2020
 
 As usual copy files into place and commit.  
-Checked size of the design images: 1440x800 and 375x870  
\ No newline at end of file
+Checked size of the design images: 1440x800 and 375x870  
+
+Set up the style.css to have the base things listed in the style guide (font, colors, font size), and add style.css to index.html
\ No newline at end of file