Set up basic styling per the style guide

This commit is contained in:
Robert McGovern 2020-09-12 10:16:18 +01:00
parent 58ee69ff20
commit 53abbe6c9e
3 changed files with 45 additions and 1 deletions

View File

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

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <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="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> <title>Frontend Mentor | Single Price Grid Component</title>

View File

@ -2,3 +2,5 @@ Next challenge started 12th Sept 2020
As usual copy files into place and commit. As usual copy files into place and commit.
Checked size of the design images: 1440x800 and 375x870 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