www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

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

Merged
e26chiu merged 2 commits from global-colours-and-styles into main 2022-06-17 23:41:10 -04:00
Conversation 0 Commits 2 Files Changed 19 +195
e26chiu commented 2022-06-15 19:32:47 -04:00
Contributor
Copy Link
  • 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 2022-06-15 19:32:47 -04:00
e26chiu added 1 commit 2022-06-15 19:32:48 -04:00
snedadah approved these changes 2022-06-15 20:13:58 -04:00
snedadah left a comment
Owner
Copy Link

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 2022-06-15 20:31:15 -04:00
pages/_app.css
@ -0,0 +58,4 @@
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark-label);
snedadah commented 2022-06-15 20:31:15 -04:00
Owner
Copy Link

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)
e26chiu commented 2022-06-17 22:46:27 -04:00
Author
Contributor
Copy Link

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

Indeed, it should be `--dark--label`! Good catch! :D
snedadah reviewed 2022-06-15 20:53:01 -04:00
pages/_app.css
@ -0,0 +2,4 @@
scroll-behavior: smooth;
}
body {
snedadah commented 2022-06-15 20:53:01 -04:00
Owner
Copy Link

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)
e26chiu commented 2022-06-17 23:11:19 -04:00
Author
Contributor
Copy Link

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 2022-06-17 19:13:29 -04:00
a258wang reviewed 2022-06-17 19:49:47 -04:00
pages/font.css
@ -0,0 +23,4 @@
font-family: 'Inconsolata';
font-style: normal;
font-weight: 300;
src: url('../public/fonts/inconsolata-v30-latin-300.eot');
a258wang commented 2022-06-17 19:49:47 -04:00
Owner
Copy Link

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 2022-06-17 19:50:48 -04:00
pages/_app.css Outdated
@ -0,0 +11,4 @@
--light-orange: #FFC4A9;
--dark-blue: #252D41;
--light-blue: #354265;
--darker-blue: #141D34;
a258wang commented 2022-06-17 19:50:48 -04:00
Owner
Copy Link

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 2022-06-17 19:51:16 -04:00
pages/_app.css Outdated
@ -0,0 +28,4 @@
--light--link-hover: #FFBC9F;
--light--card-background: #FFFFFF;
--light--label: #A98778;
--dark--primary-background: var(--dark-blue);
a258wang commented 2022-06-17 19:51:16 -04:00
Owner
Copy Link

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 2022-06-17 19:52:52 -04:00
pages/_app.css
@ -0,0 +44,4 @@
--dark--secondary-text: var(--light-pink);
--dark--card-background: #2C3651;
--dark--label: #FFFFFF;
--primary-background: var(--dark--primary-background);
a258wang commented 2022-06-17 19:52:52 -04:00
Owner
Copy Link

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 2022-06-17 19:58:32 -04:00
pages/_app.css
@ -0,0 +59,4 @@
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark-label);
background-color: var(--primary-background);
a258wang commented 2022-06-17 19:58:32 -04:00
Owner
Copy Link

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 2022-06-17 23:19:25 -04:00
a258wang approved these changes 2022-06-17 23:38:03 -04:00
a258wang left a comment
Owner
Copy Link

Nice!

Nice!
e26chiu merged commit e5acb92e3e into main 2022-06-17 23:41:10 -04:00
e26chiu deleted branch global-colours-and-styles 2022-06-17 23:41:11 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
snedadah
a258wang
Labels
Clear labels   
Bug

   
Component

   
Config

   
Good First Issue

   
Low-Priority

   
Page
No Label
Bug
Component
Config
Good First Issue
Low-Priority
Page
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: www/cs-2022-class-profile#14
No description provided.
Delete Branch "global-colours-and-styles"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?