From dee9c96fd3bd34f683435b6e0c4e0f658a39503f Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Sat, 26 Sep 2020 23:05:06 +0100 Subject: [PATCH] Added basic styling to style.css, and linked it into the html. --- .../four-card-feature-section/css/style.css | 38 +++++++++++++++++++ .../four-card-feature-section/index.html | 1 + .../notes/process.md | 21 +++++++++- .../four-card-feature-section/style-guide.md | 4 +- notes.md | 6 ++- 5 files changed, 66 insertions(+), 4 deletions(-) create mode 100644 FrontendMentor/four-card-feature-section/css/style.css diff --git a/FrontendMentor/four-card-feature-section/css/style.css b/FrontendMentor/four-card-feature-section/css/style.css new file mode 100644 index 0000000..e18f525 --- /dev/null +++ b/FrontendMentor/four-card-feature-section/css/style.css @@ -0,0 +1,38 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap'); + +/* + * Challenge colors, font + * + * The font-size for 20px is to make rem clearer for increments + * + * Mobile: 375px (375x1360) + * Desktop: 1440px (1440x922) +*/ + +:root { + font-family: 'Poppins', sans-serif; + font-size: 20px; + + /* Primary Colors */ + --red: hsl(0, 78%, 62%); + --cyan: hsl(180, 62%, 55%); + --orange: hsl(34, 97%, 64%); + --blue: hsl(212, 86%, 64%); + + /* Neutral */ + --veryDarkBlue: hsl(234, 12%, 34%); + --grayishBlue: hsl(229, 6%, 66%); + --veryLightGray: hsl(0, 0%, 98%); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Basic Styling */ + +body { + font-size: 15px; +} \ No newline at end of file diff --git a/FrontendMentor/four-card-feature-section/index.html b/FrontendMentor/four-card-feature-section/index.html index 95bd5a9..973ea1d 100644 --- a/FrontendMentor/four-card-feature-section/index.html +++ b/FrontendMentor/four-card-feature-section/index.html @@ -5,6 +5,7 @@ + Frontend Mentor | Four card feature section diff --git a/FrontendMentor/four-card-feature-section/notes/process.md b/FrontendMentor/four-card-feature-section/notes/process.md index 37172d1..7f1ce60 100644 --- a/FrontendMentor/four-card-feature-section/notes/process.md +++ b/FrontendMentor/four-card-feature-section/notes/process.md @@ -1,3 +1,22 @@ Starting 2020-09-23 (22:49) -Well a little under 2 hours later, I've made zero progress on this project BUT I have set up a basic style for the top level project index page. Wasn't what I intended to do, but I'm actually glad I did. Intention is for it to develop and become more interesting/complex as I learn more. \ No newline at end of file +Well a little under 2 hours later, I've made zero progress on this project BUT I have set up a basic style for the top level project index page. Wasn't what I intended to do, but I'm actually glad I did. Intention is for it to develop and become more interesting/complex as I learn more. + +Last to days lost doing nothing. Spent part of today trying to find the perfect VSCode Code theme. None really quite right, don't want to create my own. Whatever it is must have different colouring for IDs and classes in css and the units should be a different color than the number. + +Interesting but not quite there + +Tokyo Night - I find the Classes/ID slightly too bright compared to the attributes (green vs purple-blue) +ReUI Mirage (React) (want darker background) +Panda Syntax +Palenight Theme - issues +Night Owl +Monokai Dark Soda +Gruvbox Dark (Hard) +Firefly Pro - +Dark Chrome DevTools - really nice, but JS REGEX is too hard to read + +2020-09-26 + +Added basics to the style.css from the style guide. +Again I'm setting the root font to 20px to make working with REM easier. \ No newline at end of file diff --git a/FrontendMentor/four-card-feature-section/style-guide.md b/FrontendMentor/four-card-feature-section/style-guide.md index dc1804b..5a362d4 100644 --- a/FrontendMentor/four-card-feature-section/style-guide.md +++ b/FrontendMentor/four-card-feature-section/style-guide.md @@ -4,8 +4,8 @@ The designs were created to the following widths: -- Mobile: 375px -- Desktop: 1440px +- Mobile: 375px (375x1360) +- Desktop: 1440px (1440x922) ## Colors diff --git a/notes.md b/notes.md index f169c36..6b36a49 100644 --- a/notes.md +++ b/notes.md @@ -52,4 +52,8 @@ Think of it as a combination of learning, and tips and tricks. They will start u * http://specificity.keegan.st/ * https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ * https://css-tricks.com/how-do-you-do-max-font-size-in-css/ -* https://css-tricks.com/simplified-fluid-typography/ \ No newline at end of file +* https://css-tricks.com/simplified-fluid-typography/ + +## Useful Links + +* http://www.heropatterns.com/ << Free repeatable background SVG's \ No newline at end of file