diff --git a/README.md b/README.md
index 14e0f73..60f259c 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Please **fork** and **clone** this repository. There are instructions for how t
Then navigate to the correct directory using the command line.
Once you're in the project directory, you can run:
-```
+```bash
npm install
npm start
@@ -21,8 +21,8 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Edit `App.js` and add a tiny change, like adding your name, to see if the change appears.
Add and commit this change to git, and push it up to your remote github repo:
-```
-git add .
+```git
+git add App.js
git commit -m "Added my name to the app"
git push
```
@@ -60,12 +60,12 @@ There is a special way to show images from a React app created with create-react
At the top of your component, import the image like this (remember to give it a name!)
-```
+```javascript
import storm from '../img/weather-icons/storm.svg';
```
Then later in your `` tag, use the imported value as the image source, like this:
-```
+```html
```
@@ -100,7 +100,7 @@ Copy all contents into a new file and add it to your project somewhere under the
Import it into your react app with
-```
+```javascript
import FakeWeatherData from "./data/FakeWeather.json";
```
@@ -115,7 +115,7 @@ This JSON represents weather data for **just one city**.
It includes **an array called `list` containing the weather predicitons for the next 5 days, split into 8 x 3-hour chunks**
Each object inside `list` contains a `weather` array with an object that looks like this:
-```
+```json
"weather": [
{
"id": 521,
@@ -169,7 +169,7 @@ Look at the design:
- Each object inside `list` contains a `weather` array with an object that looks like this:
-```
+```json
"weather": [
{
"id": 521,
diff --git a/public/index.html b/public/index.html
index 2fda59f..1f640ab 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,6 +25,12 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
CYF Weather App
+
+
+
diff --git a/src/theme/base.scss b/src/theme/base.scss
index 6d8c393..a322051 100644
--- a/src/theme/base.scss
+++ b/src/theme/base.scss
@@ -5,10 +5,10 @@
}
body,
html {
- font-family: var(--theme-font-copy);
+ font-family: var(--theme-font);
font-size: 100%;
- background-color: var(--theme-color-paper);
- color: var(--theme-color-ink);
+ background-color: var(--theme-color-blue-light);
+ color: var(--theme-color-blue-navy);
margin: 0;
padding: 0;
}
@@ -16,7 +16,7 @@ html {
$heading__levels: 1, 2, 3, 4, 5, 6;
@each $h in $heading__levels {
h#{$h} {
- font-family: var(--theme-font-display);
+ font-family: var(--theme-font);
font-size: var(--theme-type-size--#{$h});
margin: 0;
}
diff --git a/src/theme/colors.scss b/src/theme/colors.scss
index 6ed93c1..138e939 100644
--- a/src/theme/colors.scss
+++ b/src/theme/colors.scss
@@ -3,15 +3,34 @@
// but is it easier or clearer than writing them out?
// I think in this case, no. Always choose the simplest, easiest, clearest option
:root {
- --theme-color-paper: rgba(255, 255, 255, 1);
- --theme-color-ink: rgba(0, 0, 0, 1);
- --theme-color-highlight: rgba(0, 0, 0, 1);
- --theme-color-shade: rgba(0, 0, 0, 1);
+ --theme-color---block: #759eda;
+ --theme-color--button: #5879c7;
+ --theme-color--paper: #9ccef4;
+ --theme-color--highlight: #ffffff;
+ --theme-color--link: #141a5b;
+ --weather--storm: #888;
+ --weather--drizzle: #efefef;
+ --weather--rain: #555;
+ --weather--snow: #bbb;
+ --weather--fog: #333;
+ --weather--clear: #3257ea;
+ --weather--partlycloudy: #4259b8;
+ --weather--mostlycloudy: #888;
- @media (prefers-color-scheme: dark) {
- --theme-color-paper: rgba(0, 0, 0, 1);
- --theme-color-ink: rgba(255, 255, 255, 1);
- --theme-color-highlight: rgba(0, 0, 0, 1);
- --theme-color-shade: rgba(0, 0, 0, 1);
- }
-}
+// @media (prefers-color-scheme: dark) {
+// --theme-color---block: #759eda;
+// --theme-color--button: #5879c7;
+// --theme-color--paper: #9ccef4;
+// --theme-color--highlight: #ffffff;
+// --theme-color--link: #141a5b;
+// --weather--storm: #888;
+// --weather--drizzle: #efefef;
+// --weather--rain: #555;
+// --weather--snow: #bbb;
+// --weather--fog: #333;
+// --weather--clear: #3257ea;
+// --weather--partlycloudy: #4259b8;
+// --weather--mostlycloudy: #888;
+// }
+//
+}
\ No newline at end of file
diff --git a/src/theme/fonts.scss b/src/theme/fonts.scss
index 65cc8ba..6f1f540 100644
--- a/src/theme/fonts.scss
+++ b/src/theme/fonts.scss
@@ -1,18 +1,3 @@
:root {
- --theme-font-display: "TODO", system-ui, serif;
- --theme-font-copy: "TODO";
+ --theme-font: "Raleway", system-ui, serif;
}
-
-/* latin-ext */
-// @font-face {
-// font-family: "TODO";
-// font-style: normal;
-// font-weight: 400;
-// font-display: swap;
-// src: local("TODO"), url("TODO".woff2) format("woff2");
-// unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-// U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-// }
-
-/* latin */
-//"TODO"