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

- 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

Co-authored-by: Emily Chiu <e26chiu@uwaterloo.ca>
Reviewed-on: #14
Reviewed-by: Shahan Neda <snedadah@csclub.uwaterloo.ca>
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>

pages/_app.css

@@ -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;
+
+  --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);
+  --card-background: var(--dark--card-background);
+  --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);
+  }
+}

pages/_app.tsx

@@ -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} />;
 }

pages/font.css

@@ -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(''),
+    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'),
+}