- 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>
This commit is contained in:
parent
591b885ae2
commit
e5acb92e3e
112
pages/_app.css
Normal file
112
pages/_app.css
Normal file
@ -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} />;
|
||||
}
|
||||
|
80
pages/font.css
Normal file
80
pages/font.css
Normal 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(''),
|
||||
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'),
|
||||
}
|
BIN
public/fonts/inconsolata-v30-latin-200.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-200.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-200.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-200.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-300.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-300.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-300.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-300.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-500.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-500.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-500.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-500.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-600.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-600.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-600.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-600.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-700.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-700.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-700.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-700.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-800.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-800.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-800.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-800.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-900.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-900.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-900.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-900.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-regular.woff
Normal file
BIN
public/fonts/inconsolata-v30-latin-regular.woff
Normal file
Binary file not shown.
BIN
public/fonts/inconsolata-v30-latin-regular.woff2
Normal file
BIN
public/fonts/inconsolata-v30-latin-regular.woff2
Normal file
Binary file not shown.
Loading…
x
Reference in New Issue
Block a user