Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#7 Colors #23

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
+49 −39
Open

#7 Colors #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
21e80e2
upgrade to react 18 + sass
SallyMcGrath Jan 30, 2023
db71448
strip unwanted files, add missing test files
SallyMcGrath Jan 30, 2023
156a8b4
add .env example
SallyMcGrath Jan 30, 2023
97ff92a
swap npm for yarn
SallyMcGrath Jan 30, 2023
83668e2
stub a simple sass theme
SallyMcGrath Jan 30, 2023
a4a205d
stub example components
SallyMcGrath Jan 30, 2023
1eb1a44
tweak head, ready for dev
SallyMcGrath Jan 30, 2023
b06a700
mistakenly renamed App.js
SallyMcGrath Jan 30, 2023
fca9249
rm git add, format code
SallyMcGrath Feb 3, 2023
9ce3280
Merge remote-tracking branch 'origin/master'
SallyMcGrath Feb 3, 2023
6ef5b18
link to google fonts cdn
SallyMcGrath Feb 4, 2023
468bb68
assign Raleway to font variable
SallyMcGrath Feb 4, 2023
4f64c2f
rename font variable to theme-font
SallyMcGrath Feb 4, 2023
87d25de
Merge pull request #3 from CodeYourFuture/feature/type
Emeka1993 Feb 4, 2023
8009ba0
change colors
youweb3 Feb 4, 2023
2280815
remove old colors
youweb3 Feb 4, 2023
983232c
update the value name
youweb3 Feb 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
```
Expand Down Expand Up @@ -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 `<img/>` tag, use the imported value as the image source, like this:
```
```html
<img src={storm} alt="storm icon" />
```

Expand Down Expand Up @@ -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";
```

Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand Down
6 changes: 6 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>CYF Weather App</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;500&display=swap"
rel="stylesheet"
/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
8 changes: 4 additions & 4 deletions src/theme/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
}
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);
Comment on lines +10 to +11
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youweb3 these colours no long exist since you have changed the naming of your colour variables. Please update these before merging.

margin: 0;
padding: 0;
}

$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;
}
Expand Down
41 changes: 30 additions & 11 deletions src/theme/colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
// }
//
}
17 changes: 1 addition & 16 deletions src/theme/fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"