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>
pull/17/head
Emily Chiu 4 months ago
parent 591b885ae2
commit e5acb92e3e
  1. 112
      pages/_app.css
  2. 3
      pages/_app.tsx
  3. 80
      pages/font.css
  4. BIN
      public/fonts/inconsolata-v30-latin-200.woff
  5. BIN
      public/fonts/inconsolata-v30-latin-200.woff2
  6. BIN
      public/fonts/inconsolata-v30-latin-300.woff
  7. BIN
      public/fonts/inconsolata-v30-latin-300.woff2
  8. BIN
      public/fonts/inconsolata-v30-latin-500.woff
  9. BIN
      public/fonts/inconsolata-v30-latin-500.woff2
  10. BIN
      public/fonts/inconsolata-v30-latin-600.woff
  11. BIN
      public/fonts/inconsolata-v30-latin-600.woff2
  12. BIN
      public/fonts/inconsolata-v30-latin-700.woff
  13. BIN
      public/fonts/inconsolata-v30-latin-700.woff2
  14. BIN
      public/fonts/inconsolata-v30-latin-800.woff
  15. BIN
      public/fonts/inconsolata-v30-latin-800.woff2
  16. BIN
      public/fonts/inconsolata-v30-latin-900.woff
  17. BIN
      public/fonts/inconsolata-v30-latin-900.woff2
  18. BIN
      public/fonts/inconsolata-v30-latin-regular.woff
  19. BIN
      public/fonts/inconsolata-v30-latin-regular.woff2

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

@ -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(''),
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'),
}
Loading…
Cancel
Save