Set up basic styling per the style guide

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) {
+
+}

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>
 

FrontendMentor/single-price-grid-component-master/work-through/process.md

@@ -2,3 +2,5 @@ Next challenge started 12th Sept 2020
 
 As usual copy files into place and commit.  
 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