Added basic styling to style.css, and linked it into the html.

This commit is contained in:
Robert McGovern 2020-09-26 23:05:06 +01:00
parent f61e1bf053
commit dee9c96fd3
5 changed files with 66 additions and 4 deletions

View File

@ -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;
}

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 | Four card feature section</title> <title>Frontend Mentor | Four card feature section</title>

View File

@ -1,3 +1,22 @@
Starting 2020-09-23 (22:49) 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. 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.

View File

@ -4,8 +4,8 @@
The designs were created to the following widths: The designs were created to the following widths:
- Mobile: 375px - Mobile: 375px (375x1360)
- Desktop: 1440px - Desktop: 1440px (1440x922)
## Colors ## Colors

View File

@ -53,3 +53,7 @@ Think of it as a combination of learning, and tips and tricks. They will start u
* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ * 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/how-do-you-do-max-font-size-in-css/
* https://css-tricks.com/simplified-fluid-typography/ * https://css-tricks.com/simplified-fluid-typography/
## Useful Links
* http://www.heropatterns.com/ << Free repeatable background SVG's