Add global colours and styles (Closes #11) #14
|
@ -0,0 +1,112 @@
|
|||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
/* 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;
|
||||
a258wang
commented
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);
|
||||
snedadah
commented
should this be: should this be:
` --label: var(--dark--label);` ? (extra dash between the label to match above)
e26chiu
commented
Indeed, it should be Indeed, it should be `--dark--label`! Good catch! :D
|
||||
--card-background: var(--dark--card-background);
|
||||
a258wang
commented
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);
|
||||
}
|
||||
}
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
@ -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(''),
|
||||
a258wang
commented
In this day and age, we only need (These are the only two formats we have on the website, btw.) Let's get rid of the 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'),
|
||||
}
|
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.