Add global colours and styles (Closes #11) #14
Labels
No Label
Bug
Component
Config
Good First Issue
Low-Priority
Page
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…
Reference in New Issue
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?
Note: Using custom properties for variables (CSS as a single source of truth)
Missing:
Looks good to me, few comments/questions:
getComputedStyle(document.documentElement) .getPropertyValue
trick?@ -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);
should this be:
--label: var(--dark--label);
? (extra dash between the label to match above)Indeed, it should be
--dark--label
! Good catch! :D@ -0,0 +2,4 @@
scroll-behavior: smooth;
}
body {
Should we consider adding a bit of global padding here as well? (edit: sorry just read, you mentioned this in your pr comment)
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.@ -0,0 +23,4 @@
font-family: 'Inconsolata';
font-style: normal;
font-weight: 300;
src: url('../public/fonts/inconsolata-v30-latin-300.eot');
In this day and age, we only need
woff2
(and maybewoff
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
, andsvg
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)
@ -0,0 +11,4 @@
--light-orange: #FFC4A9;
--dark-blue: #252D41;
--light-blue: #354265;
--darker-blue: #141D34;
NIT: can we rename this colour to
navy
instead ofdark-blue
? Then we can name the coloursnavy
,light-navy
,dark-navy
.@ -0,0 +28,4 @@
--light--link-hover: #FFBC9F;
--light--card-background: #FFFFFF;
--light--label: #A98778;
--dark--primary-background: var(--dark-blue);
NIT: can we put an empty line between the light and dark variables? 😅
@ -0,0 +44,4 @@
--dark--secondary-text: var(--light-pink);
--dark--card-background: #2C3651;
--dark--label: #FFFFFF;
--primary-background: var(--dark--primary-background);
NIT: can we put an empty line between the dark colour variables and the no-colour-prefix variables?
@ -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);
NIT: can we have an empty line between the CSS variables and the actual styles? 😁
a258wang referenced this pull request2022-06-17 22:19:22 -04:00
Nice!