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
19 changed files with 195 additions and 0 deletions

112
pages/_app.css Normal file
View File

@ -0,0 +1,112 @@
html {
scroll-behavior: smooth;
}
body {
Review

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)
Review

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.
/* Theme colours */
--pink: #EF839D;
--light-pink: #FFCAD0;
--lighter-pink: #FFE7E7;
--orange: #F5917B;
--light-orange: #FFC4A9;
--navy: #252D41;
--light-navy: #354265;
--dark-navy: #141D34;
/* Default is dark theme */
--light--primary-background: #FFFFEF;
--light--secondary-background: #FDF5ED;
--light--primary-accent: #CA634D;
--light--primary-accent-light: var(--orange);
--light--primary-accent-lighter: #FFBC9F;
--light--secondary-accent: #E55F98;
--light--secondary-accent-light: #FEA0C8;
--light--primary-heading: #D02B53;
--light--primary-text: #483B35;
--light--secondary-text: var(--pink);
--light--link: var(--orange);
--light--link-hover: #FFBC9F;
--light--card-background: #FFFFFF;
--light--label: #A98778;
--dark--primary-background: var(--navy);
--dark--secondary-background: var(--dark-navy);
--dark--tertiary-background: var(--light-navy);
--dark--primary-accent: var(--pink);
--dark--primary-accent-light: var(--light-pink);
--dark--primary-accent-lighter: var(--lighter-pink);
--dark--secondary-accent: var(--orange);
--dark--secondary-accent-light: var(--light-orange);
--dark--primary-heading: #FFC48D;
--dark--secondary-heading: var(--pink);
--dark--link: var(--pink);
--dark--link-hover: var(--light-pink);
--dark--primary-text: #FDF5ED;
--dark--secondary-text: var(--light-pink);
--dark--card-background: #2C3651;
--dark--label: #FFFFFF;
Review

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?
--primary-background: var(--dark--primary-background);
--secondary-background: var(--dark--secondary-background);
--tertiary-background: var(--dark--tertiary-background);
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
Review

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)
Review

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

Indeed, it should be `--dark--label`! Good catch! :D
--card-background: var(--dark--card-background);
Review

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? 😁
--label: var(--dark--label);
background-color: var(--primary-background);
color: var(--primary-text);
font-family: "Inconsolata", "sans-serif";
margin: 0;
}
h1,
h2 {
color: var(--primary-heading);
}
h3,
h4,
h5,
h6 {
color: var(--secondary-heading);
}
a {
color: var(--link);
text-decoration: none;
}
a:hover {
color: var(--link-hover);
}
@media only screen and (prefers-color-scheme: dark) {
body {
--primary-background: var(--dark--primary-background);
--secondary-background: var(--dark--secondary-background);
--tertiary-background: var(--dark--tertiary-background);
--primary-accent: var(--dark--primary-accent);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-dark: var(--dark--primary-accent-dark);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--secondary-accent-dark: var(--primary-accent-dark);
--primary-heading: var(--dark--primary-heading);
--secondary-heading: var(--dark--secondary-heading);
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--card-background: var(--dark--card-background);
--label: var(--dark--label);
}
}

View File

@ -1,6 +1,9 @@
import type { AppProps } from "next/app";
import React from "react";
import "./_app.css";
import "./font.css";
export default function App({ Component, pageProps }: AppProps): JSX.Element {
return <Component {...pageProps} />;
}

80
pages/font.css Normal file
View File

@ -0,0 +1,80 @@
/* inconsolata-200 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 200;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-200.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-200.woff') format('woff'),
}
/* inconsolata-300 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 300;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-300.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-300.woff') format('woff'),
}
/* inconsolata-regular - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 400;
src: local(''),
Review

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)
url('../public/fonts/inconsolata-v30-latin-regular.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-regular.woff') format('woff'),
}
/* inconsolata-500 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 500;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-500.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-500.woff') format('woff'),
}
/* inconsolata-600 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 600;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-600.woff2') format('woff2'),
/* Super Modern Browsers */
url('../public/fonts/inconsolata-v30-latin-600.woff') format('woff'),
}
/* inconsolata-700 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 700;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-700.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-700.woff') format('woff'),
}
/* inconsolata-800 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 800;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-800.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-800.woff') format('woff'),
}
/* inconsolata-900 - latin */
@font-face {
font-family: 'Inconsolata';
font-style: normal;
font-weight: 900;
src: local(''),
url('../public/fonts/inconsolata-v30-latin-900.woff2') format('woff2'),
url('../public/fonts/inconsolata-v30-latin-900.woff') format('woff'),
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.