Add global colours and styles (Closes #11) #14

Merged
e26chiu merged 2 commits from global-colours-and-styles into main 4 months ago
Collaborator
  • Added variables for the theme colours (pink, orange, lighter pink, dark blue, etc.)
  • Added variables for common styles (header, background, text, link, etc.) in dark mode and light mode; default theme is in dark mode
  • Added font family Inconsolata
  • Styled the page background + font family

Note: Using custom properties for variables (CSS as a single source of truth)

Missing:

  • Line height
  • Spacing
- Added variables for the theme colours (pink, orange, lighter pink, dark blue, etc.) - Added variables for common styles (header, background, text, link, etc.) in dark mode and light mode; default theme is in dark mode - Added font family Inconsolata - Styled the page background + font family Note: Using custom properties for variables (CSS as a single source of truth) Missing: - Line height - Spacing
a258wang was assigned by e26chiu 4 months ago
e26chiu added 1 commit 4 months ago
snedadah approved these changes 4 months ago
snedadah left a comment
Collaborator

Looks good to me, few comments/questions:

  • I like how you have setup it up to be so modular and easy to switch out the colours!
  • How have we decided to share these to js, using the getComputedStyle(document.documentElement) .getPropertyValue trick?
  • We should consider adding a file that displays the colors for easy reference (sort of like csc color picker) (edit: I just did this, I'll make a pr after this is merged)
Looks good to me, few comments/questions: - I like how you have setup it up to be so modular and easy to switch out the colours! - How have we decided to share these to js, using the `getComputedStyle(document.documentElement) .getPropertyValue` trick? - We should consider adding a file that displays the colors for easy reference (sort of like csc color picker) (edit: I just did this, I'll make a pr after this is merged)
snedadah reviewed 4 months ago
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark-label);
Collaborator

should this be:
--label: var(--dark--label); ? (extra dash between the label to match above)

should this be: ` --label: var(--dark--label);` ? (extra dash between the label to match above)
Poster
Collaborator

Indeed, it should be --dark--label! Good catch! :D

Indeed, it should be `--dark--label`! Good catch! :D
snedadah reviewed 4 months ago
scroll-behavior: smooth;
}
body {
Collaborator

Should we consider adding a bit of global padding here as well? (edit: sorry just read, you mentioned this in your pr comment)

Should we consider adding a bit of global padding here as well? (edit: sorry just read, you mentioned this in your pr comment)
Poster
Collaborator

We would have to agree on a common margin for the entire document. I see that in the class profile of software engineering 2021, the margins are set to auto. I'd say we can go with that so we can resize the content however we want.

We would have to agree on a common margin for the entire document. I see that in [the class profile of software engineering 2021](https://sexxis.github.io/classprofile/), the margins are set to `auto`. I'd say we can go with that so we can resize the content however we want.
a258wang removed their assignment 4 months ago
a258wang reviewed 4 months ago
font-family: 'Inconsolata';
font-style: normal;
font-weight: 300;
src: url('../public/fonts/inconsolata-v30-latin-300.eot');
Owner

In this day and age, we only need woff2 (and maybe woff as fallback) to support the vast majority of modern browsers. Stackoverflow reference

(These are the only two formats we have on the website, btw.)

Let's get rid of the eot, ttf, and svg stuffs. 🙂

Also, we used this tool to generate the font-face declarations for the website, if you want to give it a try: https://google-webfonts-helper.herokuapp.com/fonts (or you can use whatever tool you used here)

In this day and age, we only need `woff2` (and maybe `woff` as fallback) to support the vast majority of modern browsers. [Stackoverflow reference](https://stackoverflow.com/a/11002874) (These are the only two formats we have on the [website](https://git.csclub.uwaterloo.ca/www/www-new/src/branch/main/pages/font.css), btw.) Let's get rid of the `eot`, `ttf`, and `svg` stuffs. 🙂 Also, we used this tool to generate the font-face declarations for the website, if you want to give it a try: https://google-webfonts-helper.herokuapp.com/fonts (or you can use whatever tool you used here)
a258wang reviewed 4 months ago
pages/_app.css Outdated
--light-orange: #FFC4A9;
--dark-blue: #252D41;
--light-blue: #354265;
--darker-blue: #141D34;
Owner

NIT: can we rename this colour to navy instead of dark-blue? Then we can name the colours navy, light-navy, dark-navy.

NIT: can we rename this colour to `navy` instead of `dark-blue`? Then we can name the colours `navy`, `light-navy`, `dark-navy`.
a258wang reviewed 4 months ago
pages/_app.css Outdated
--light--link-hover: #FFBC9F;
--light--card-background: #FFFFFF;
--light--label: #A98778;
--dark--primary-background: var(--dark-blue);
Owner

NIT: can we put an empty line between the light and dark variables? 😅

NIT: can we put an empty line between the light and dark variables? 😅
a258wang reviewed 4 months ago
--dark--secondary-text: var(--light-pink);
--dark--card-background: #2C3651;
--dark--label: #FFFFFF;
--primary-background: var(--dark--primary-background);
Owner

NIT: can we put an empty line between the dark colour variables and the no-colour-prefix variables?

NIT: can we put an empty line between the dark colour variables and the no-colour-prefix variables?
a258wang reviewed 4 months ago
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark-label);
background-color: var(--primary-background);
Owner

NIT: can we have an empty line between the CSS variables and the actual styles? 😁

NIT: can we have an empty line between the CSS variables and the actual styles? 😁
e26chiu added 1 commit 4 months ago
a258wang approved these changes 4 months ago
a258wang left a comment
Owner

Nice!

Nice!
e26chiu merged commit e5acb92e3e into main 4 months ago
e26chiu deleted branch global-colours-and-styles 4 months ago

Reviewers

snedadah approved these changes 4 months ago
a258wang approved these changes 4 months ago
The pull request has been merged as e5acb92e3e.
Sign in to join this conversation.
No Milestone
No project
No Assignees
3 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/cs-2022-class-profile#14
Loading…
There is no content yet.