Browse Source

Implement dark theme (Closes #287) (#407)

* The website will have a dark theme or a light theme depending on your OS preferences. You can still customize in the `themer` page to override some properties.
* A toggle button in the footer to toggle between light mode and dark mode.
* Added a "Reset to dark mode" button in the `themer` page.

Staging link: https://csclub.uwaterloo.ca/~a3thakra/csc/dark-theme/

Co-authored-by: Miniapple8888 <miniapple8888@gmail.com>
Reviewed-on: #407
Reviewed-by: Amy <a258wang@csclub.uwaterloo.ca>
pull/427/head
Emily Chiu 2 months ago
parent
commit
f631f4013f
  1. 2
      components/ArchivePage.module.css
  2. 1
      components/Bubble.module.css
  3. 4
      components/Button.module.css
  4. 4
      components/EventDescriptionCard.module.css
  5. 4
      components/Footer.module.css
  6. 14
      components/Footer.tsx
  7. 4
      components/Link.module.css
  8. 9
      components/MiniEventCard.module.css
  9. 6
      components/MiniEventCard.tsx
  10. 10
      components/Navbar.module.css
  11. 65
      components/Navbar.tsx
  12. 6
      components/NewsCard.module.css
  13. 10
      components/OrganizedContent.module.css
  14. 4
      components/OrganizedContent/Header.module.css
  15. 2
      components/SocialLinks.module.css
  16. 10
      components/SocialLinks.tsx
  17. 6
      components/Table.module.css
  18. 73
      components/Theme.tsx
  19. 2
      lib/news.ts
  20. 2
      lib/team.ts
  21. 3202
      package-lock.json
  22. 18
      package.json
  23. 226
      pages/_app.css
  24. 1
      pages/about/index.module.css
  25. 8
      pages/about/members.module.css
  26. 2
      pages/about/members.tsx
  27. 4
      pages/about/our-supporters.module.css
  28. 6
      pages/about/team.module.css
  29. 3
      pages/events/[year]/[term]/index.module.css
  30. 15
      pages/events/[year]/[term]/index.tsx
  31. 2
      pages/events/[year]/index.module.css
  32. 4
      pages/get-involved.module.css
  33. 2
      pages/index.module.css
  34. 2
      pages/news/[year]/[term].module.css
  35. 15
      pages/resources/advice/co-op.module.css
  36. 4
      pages/resources/tech-talks/index.module.css
  37. 9
      pages/themer.tsx

2
components/ArchivePage.module.css

@ -3,7 +3,7 @@
}
.page > h1 {
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
padding-bottom: 1rem;
}

1
components/Bubble.module.css

@ -6,7 +6,6 @@
.bubble {
--border-radius: calc(5000rem / 16);
display: flex;
flex-direction: row;
position: absolute;

4
components/Button.module.css

@ -2,8 +2,8 @@
.link {
font-family: "Poppins", "sans-serif";
border-radius: calc(20rem / 16);
background-color: var(--primary-accent);
color: var(--primary-background);
background-color: var(--button-background);
color: var(--text-light);
border: none;
outline: none;
transition-duration: 0.3s;

4
components/EventDescriptionCard.module.css

@ -4,7 +4,7 @@
max-width: calc(540rem / 16);
padding: calc(24rem / 16);
border-radius: calc(20rem / 16);
background-color: var(--primary-background);
background-color: var(--card-background);
}
.poster {
@ -38,7 +38,7 @@
.setting {
margin: 0;
color: var(--primary-accent);
color: var(--link);
font-size: calc(14rem / 16);
font-weight: 600;
}

4
components/Footer.module.css

@ -1,6 +1,6 @@
.footer {
box-sizing: border-box;
background: var(--primary-heading);
background: var(--footer-background);
padding: 1rem 0;
width: 100%;
}
@ -17,7 +17,7 @@
}
.text {
color: var(--primary-background);
color: var(--text-light);
font-style: normal;
text-align: center;
}

14
components/Footer.tsx

@ -1,11 +1,15 @@
import Link from "next/link";
import React from "react";
import { Button } from "./Button";
import { SocialLinks } from "./SocialLinks";
import { useThemeContext } from "./Theme";
import styles from "./Footer.module.css";
export function Footer() {
const themeContext = useThemeContext();
return (
<footer className={styles.footer}>
<div className={styles.container}>
@ -15,6 +19,16 @@ export function Footer() {
<a className={styles.email}>exec@csclub.uwaterloo.ca</a>
</Link>
</div>
<Button
size="small"
onClick={() =>
themeContext?.theme.name === "dark"
? themeContext?.setTheme("light")
: themeContext?.setTheme("dark")
}
>
Toggle Theme
</Button>
<SocialLinks color="white" size="small" />
</div>
</footer>

4
components/Link.module.css

@ -1,5 +1,5 @@
.link {
color: var(--primary-accent);
color: var(--link);
transition-duration: 0.3s;
text-decoration: none;
white-space: normal;
@ -7,5 +7,5 @@
}
.link:hover {
color: var(--secondary-accent);
color: var(--link-hover);
}

9
components/MiniEventCard.module.css

@ -2,10 +2,11 @@
box-sizing: border-box;
position: relative;
padding: calc(20rem / 16);
color: var(--text);
}
.card:nth-child(odd) {
background-color: var(--secondary-accent-light);
.darkBg {
background-color: var(--dark-card-background);
}
.name {
@ -61,13 +62,15 @@
fill: var(--primary-accent);
}
.card h1,
.card h2,
.card h3,
.card h4 {
font-size: calc(16rem / 16);
font-size: calc(18rem / 16);
margin-top: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
color: var(--mini-event-card-text);
}
@media only screen and (max-width: calc(768rem / 16)) {

6
components/MiniEventCard.tsx

@ -13,6 +13,7 @@ interface MiniEventCardProps {
location: string;
startDate: Date;
endDate?: Date;
background: "dark-bg" | "normal-bg";
year: string;
term: string;
slug: string;
@ -26,12 +27,15 @@ export const MiniEventCard: React.FC<MiniEventCardProps> = ({
startDate,
endDate,
online,
background,
year,
term,
slug,
}) => {
const cardBackground =
background === "dark-bg" ? `${styles.darkBg} ${styles.card}` : styles.card;
return (
<details className={styles.card}>
<details className={cardBackground}>
<summary>
<div onClick={(event) => event.preventDefault()}>
<h2 className={styles.name}>

10
components/Navbar.module.css

@ -63,7 +63,7 @@
}
.navMenu a {
color: var(--primary-heading);
color: var(--primary-text);
text-decoration: none;
}
@ -219,6 +219,14 @@
cursor: pointer;
}
.icon line {
stroke: var(--icon);
}
.icon path {
fill: var(--icon);
}
.navMobileBackground {
position: fixed;
visibility: hidden;

65
components/Navbar.tsx

@ -120,7 +120,7 @@ export function Navbar() {
className={styles.hamburger}
onClick={() => dispatch({ type: "open", route: router.pathname })}
>
<Image src="/images/hamburger.svg" alt="Menu" />
<HamburgerSvg />
</button>
<div
className={
@ -263,7 +263,7 @@ function NavItem(props: NavItemProps) {
}
onClick={() => props.onToggle(props.route)}
>
<Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
<DropdownSvg />
</button>
<ul
className={
@ -348,3 +348,64 @@ function getMainRoute(route: string) {
}
return "/" + route.split("/")[1];
}
function HamburgerSvg() {
return (
<svg
width="30"
height="23"
viewBox="0 0 30 23"
className={styles.icon}
xmlns="http://www.w3.org/2000/svg"
>
<line
x1="28"
y1="2"
x2="2"
y2="2"
stroke="#2A2A62"
strokeWidth="4"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1="28"
y1="11.375"
x2="2"
y2="11.375"
stroke="#2A2A62"
strokeWidth="4"
strokeLinecap="round"
strokeLinejoin="round"
/>
<line
x1="28"
y1="20.75"
x2="2"
y2="20.75"
stroke="#2A2A62"
strokeWidth="4"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
function DropdownSvg() {
return (
<svg
width="14"
height="9"
viewBox="0 0 14 9"
fill="none"
className={styles.icon}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75593 8.12713C7.35716 8.58759 6.64284 8.58759 6.24407 8.12713L0.638743 1.65465C0.0778675 1.00701 0.537921 0 1.39467 0L12.6053 0C13.4621 0 13.9221 1.00701 13.3613 1.65465L7.75593 8.12713Z"
fill="#2A2A62"
/>
</svg>
);
}

6
components/NewsCard.module.css

@ -1,7 +1,7 @@
.card {
padding: calc(30rem / 16) calc(40rem / 16);
max-width: calc(524rem / 16);
background-color: var(--primary-background);
background-color: var(--card-background);
border-radius: calc(20rem / 16);
margin-bottom: 1rem;
}
@ -10,15 +10,17 @@
max-width: unset;
padding: unset;
border-radius: unset;
background-color: var(--primary-background);
}
.date {
font-size: calc(18rem / 16);
margin: 0;
color: var(--primary-subtitle);
}
.author {
color: var(--secondary-heading);
color: var(--author-text);
font-style: normal;
}

10
components/OrganizedContent.module.css

@ -30,7 +30,7 @@
margin: calc(8rem / 16) calc(32rem / 16) calc(20rem / 16) 0;
height: calc(100vh - (44rem / 16));
color: var(--primary-heading);
color: var(--sidebar-text);
font-weight: 500;
}
@ -55,10 +55,14 @@
.selected {
background-color: var(--primary-accent-lightest);
color: var(--primary-accent);
color: var(--primary-heading);
font-weight: 700;
}
.selected div {
color: var(--primary-heading);
}
.readAll {
font-weight: 700;
}
@ -69,7 +73,7 @@
.selected .marker {
display: inline;
background-color: var(--primary-accent);
background-color: var(--marker);
height: calc(24rem / 16);
width: calc(4rem / 16);
margin-right: 1rem;

4
components/OrganizedContent/Header.module.css

@ -8,12 +8,12 @@
flex-direction: row;
align-items: flex-end;
padding-bottom: 1rem;
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.header {
line-height: 1;
color: var(--primary-heading);
color: var(--primary-title);
font-size: calc(48rem / 16);
margin: 0 0 0 calc(36rem / 16);
text-align: center;

2
components/SocialLinks.module.css

@ -22,5 +22,5 @@
}
.white {
fill: var(--primary-background);
fill: var(--text-light);
}

10
components/SocialLinks.tsx

@ -77,7 +77,7 @@ function InstagramSvg(color: string) {
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient id="bluegreen-gradient">
<stop offset="0%" stopColor="#1481E3" />
<stop offset="0%" stopColor="var(--blue-gradient)" />
<stop offset="100%" stopColor="#4ED4B2" />
</linearGradient>
<path
@ -101,7 +101,7 @@ function DiscordSvg(color: string) {
version="1.1"
>
<linearGradient id="bluegreen-gradient">
<stop offset="0%" stopColor="#1481E3" />
<stop offset="0%" stopColor="var(--blue-gradient)" />
<stop offset="100%" stopColor="#4ED4B2" />
</linearGradient>
<g id="surface1">
@ -125,7 +125,7 @@ function TwitchSvg(color: string) {
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient id="bluegreen-gradient">
<stop offset="0%" stopColor="#1481E3" />
<stop offset="0%" stopColor="var(--blue-gradient)" />
<stop offset="100%" stopColor="#4ED4B2" />
</linearGradient>
<g clipPath="url(#clip0)">
@ -170,7 +170,7 @@ function FacebookSvg(color: string) {
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient id="bluegreen-gradient">
<stop offset="0%" stopColor="#1481E3" />
<stop offset="0%" stopColor="var(--blue-gradient)" />
<stop offset="100%" stopColor="#4ED4B2" />
</linearGradient>
<path
@ -194,7 +194,7 @@ function LiberaSvg(color: string) {
xmlns="http://www.w3.org/2000/svg"
>
<linearGradient id="bluegreen-gradient">
<stop offset="0%" stopColor="#1481E3" />
<stop offset="0%" stopColor="var(--blue-gradient)" />
<stop offset="100%" stopColor="#4ED4B2" />
</linearGradient>
<path

6
components/Table.module.css

@ -7,7 +7,7 @@
}
.table thead tr {
background: var(--secondary-accent-light);
background: var(--table-header);
}
.table tbody tr {
@ -15,8 +15,8 @@
vertical-align: top;
}
.table tbody tr:nth-child(odd) {
background: var(--primary-accent-lightest);
.table tbody tr:nth-child(even) {
background: var(--table-section);
}
.table th {

73
components/Theme.tsx

@ -29,9 +29,17 @@ export const PALETTE_NAMES = [
"--secondary-accent-light",
"--primary-heading",
"--secondary-heading",
"--primary-title",
"--primary-subtitle",
"--secondary-subtitle",
"--primary-text",
"--text",
"--text-light",
"--author-text",
"--sidebar-text",
"--mini-event-card-text",
"--form-invalid",
"--warning-background",
@ -41,9 +49,24 @@ export const PALETTE_NAMES = [
"--input-placeholder-text",
"--input-text",
"--icon",
"--code-background",
"--button-background",
"--footer-background",
"--card-background",
"--dark-card-background",
"--table-header",
"--table-section",
"--navbar-page-overlay",
"--link",
"--link-hover",
"--blue-gradient",
"--border",
"--marker",
] as const;
export const emptyPalette = PALETTE_NAMES.reduce(
@ -77,15 +100,9 @@ export function ThemeProvider(props: Props) {
const setTheme = (input: SetThemeInput) => {
if (typeof input === "string") {
PALETTE_NAMES.forEach((name) =>
document.body.style.setProperty(name, "")
document.body.style.setProperty(name, "var(--" + input + name + ")")
);
if (input === "light") {
document.body.classList.remove("dark");
} else if (input === "dark") {
document.body.classList.add("dark");
}
savePalette(getCurrentPalette(input));
setThemeName(input);
} else {
const properties = Object.keys(input) as PaletteNames[];
@ -107,7 +124,14 @@ export function ThemeProvider(props: Props) {
const customPalette = getSavedPalette();
if (customPalette == null) {
setThemeName("light");
const prefersDark = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
if (prefersDark) {
setTheme("dark");
} else {
setTheme("light");
}
} else {
setTheme(customPalette);
setThemeName("custom");
@ -124,11 +148,11 @@ export function ThemeProvider(props: Props) {
theme: {
name: themeName,
get palette() {
return getCurrentPalette();
return getCurrentPalette(themeName);
},
},
setTheme,
save: () => savePalette(getCurrentPalette()),
save: () => savePalette(getCurrentPalette(themeName)),
clearSaved: clearSavedPalette,
}
}
@ -148,13 +172,30 @@ export type Palette = {
[key in PaletteNames]: string;
};
function getCurrentPalette() {
const styles = getComputedStyle(document.body);
function themePropertyName(
name: PaletteNames,
themeName: BuiltInThemes
): string {
return `--${themeName}${name}`;
}
function getCurrentPalette(themeName: string) {
const styles = getComputedStyle(document.body);
if (themeName === "light" || themeName === "dark") {
return PALETTE_NAMES.reduce(
(partial, name) => ({
...partial,
[name]: styles
.getPropertyValue(themePropertyName(name, themeName))
.trim(),
}),
{} as Palette
);
}
return PALETTE_NAMES.reduce(
(partial, varName) => ({
(partial, name) => ({
...partial,
[varName]: styles.getPropertyValue(varName).trim(),
[name]: styles.getPropertyValue(name).trim(),
}),
{} as Palette
);

2
lib/news.ts

@ -88,7 +88,7 @@ export async function getNewsBySlug(
metadata: {
...metadata,
date: getLocalDateFromEST(
parse(metadata.date, DATE_FORMAT, new Date())
parse(metadata.date as string, DATE_FORMAT, new Date())
).toString(),
permalink: `/news/${year}/${term}/${slugDate}`,
} as Metadata,

2
lib/team.ts

@ -96,7 +96,7 @@ export async function getExec(name: string, pos: string, convert = true) {
const raw = await readFile(path.join(EXECS_PATH, `${name}${FILETYPE}`));
({ content, data: metadata } = matter(raw));
const image = await getMemberImagePath(metadata.name);
const image = await getMemberImagePath(metadata.name as string);
return {
content: convert ? await serialize(content) : content,

3202
package-lock.json generated

File diff suppressed because it is too large Load Diff

18
package.json

@ -41,14 +41,14 @@
"@types/mdx-js__react": "^1.5.3",
"@types/node": "^16.9.1",
"@types/react": "^17.0.14",
"@typescript-eslint/eslint-plugin": "4.28.4",
"@typescript-eslint/parser": "4.28.4",
"eslint": "7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"@typescript-eslint/eslint-plugin": "5.22.0",
"@typescript-eslint/parser": "5.22.0",
"eslint": "8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "^4.5.0",
"gray-matter": "^4.0.3",
"ical-generator": "^3.0.0",
"postcss": "^8.3.0",
@ -56,6 +56,6 @@
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.0.0",
"ts-node": "^10.2.1",
"typescript": "4.3.5"
"typescript": "4.6.4"
}
}

226
pages/_app.css

@ -4,34 +4,161 @@ html {
body {
/* Default is light theme */
--primary-background: #ffffff;
--secondary-background: #fdf8f5;
--light--primary-background: #ffffff;
--light--secondary-background: #fdf8f5;
--primary-accent: #1482e3;
--primary-accent-soft: #5caff9;
--primary-accent-light: #c4e0f8;
--primary-accent-lighter: #e1eefa;
--primary-accent-lightest: #f7fbff;
--light--primary-accent: #1482e3;
--light--primary-accent-soft: #5caff9;
--light--primary-accent-light: #c4e0f8;
--light--primary-accent-lighter: #e1eefa;
--light--primary-accent-lightest: #f7fbff;
--secondary-accent: #4ed4b2;
--secondary-accent-light: #dcf6f0;
--light--secondary-accent: #4ed4b2;
--light--secondary-accent-light: #dcf6f0;
--primary-heading: #2a2a62;
--secondary-heading: #525284;
--light--primary-heading: #2a2a62;
--text: #000000;
--light--primary-text: #2a2a62;
--light--text: #000000;
--light--text-light: #FFFFFF;
--light--sidebar-text: #2a2a62;
--light--author-text: #525284;
--light--mini-event-card-text: #000000;
--form-invalid: #9f616a;
--warning-background: #dd0014;
--warning-text: #ffffff;
--light--primary-title: #2a2a62;
--light--primary-subtitle: #2a2a62;
--light--secondary-subtitle: #2a2a62;
--input-background: #f0f0f0;
--input-placeholder-text: #bbbbbb;
--input-text: #6b6b6b;
--light--form-invalid: #9f616a;
--light--warning-background: #dd0014;
--light--warning-text: #ffffff;
--code-background: #f0f0f0;
--light--link: #1482e3;
--light--link-hover: #4ed3b2;
--navbar-page-overlay: #787878b2;
--light--input-background: #f0f0f0;
--light--input-placeholder-text: #bbbbbb;
--light--input-text: #6b6b6b;
--light--icon: #2A2A62;
--light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
--light--code-background: #f0f0f0;
--light--button-background: #1482e3;
--light--footer-background: #2a2a62;
--light--card-background: #FFFFFF;
--light--dark-card-background: #DCF6F0;
--light--table-header: #DCF6F0;
--light--table-section: #f7fbff;
--light--blue-gradient: #1481E3;
--light--border: #2a2a62;
--light--marker: #1482e3;
--dark--primary-background: #171729;
--dark--secondary-background: #252542;
--dark--primary-accent: #5CAFF9;
--dark--primary-accent-soft: #5cb0f9;
--dark--primary-accent-light: #252542;
--dark--primary-accent-lighter: #171729;
--dark--primary-accent-lightest: #464671;
--dark--secondary-accent: #4ed3b2;
--dark--secondary-accent-light: #525284;
--dark--primary-heading: #fcf7f4;
--dark--form-invalid: #9f616a;
--dark--warning-background: #dd0014;
--dark--warning-text: #ffffff;
--dark--link: #4ED4B2;
--dark--link-hover: #C1F0E4;
--dark--primary-text: #ffffff;
--dark--text: #AFAFD3;
--dark--text-light: #FFFFFF;
--dark--sidebar-text: #AFAFD3;
--dark--author-text: #ABABF2;
--dark--mini-event-card-text: #5CAFF9;
--dark--input-background: #C4C4C4;
--dark--input-placeholder-text: #bbbbbb;
--dark--input-text: #6b6b6b;
--dark--icon: #ffffff;
--dark--primary-title: #5CAFF9;
--dark--primary-subtitle: #E0E0F7;
--dark--secondary-subtitle: #ABABF2;
--dark--navbar-page-overlay: rgba(0, 0, 0, 0.7);
--dark--code-background: #3d3d68;
--dark--button-background: #1482e3;
--dark--footer-background: #525284;
--dark--card-background: #272751;
--dark--dark-card-background: #272751;
--dark--table-header: #252542;
--dark--table-section: #202037;
--dark--blue-gradient: #5CAFF9;
--dark--border: #2A2A62;
--dark--marker: #C5C5F0;
--primary-background: var(--light--primary-background);
--secondary-background: var(--light--secondary-background);
--primary-accent: var(--light--primary-accent);
--primary-accent-soft: var(--light--primary-accent-soft);
--primary-accent-light: var(--light--primary-accent-light);
--primary-accent-lighter: var(--light--primary-accent-lighter);
--primary-accent-lightest: var(--light--primary-accent-lightest);
--secondary-accent: var(--light--secondary-accent);
--secondary-accent-light: var(--light--secondary-accent-light);
--primary-heading: var(--light--primary-heading);
--form-invalid: var(--light--form-invalid);
--warning-background: var(--light--warning-background);
--warning-text: var(--light--warning-text);
--link: var(--light--link);
--link-hover: var(--light--link-hover);
--primary-text: var(--light--primary-text);
--text: var(--light--text);
--text-light: var(--light--text-light);
--sidebar-text: var(--light--sidebar-text);
--author-text: var(--light--author-text);
--mini-event-card-text: var(--light--mini-event-card-text);
--input-background: var(--light--input-background);
--input-placeholder-text: var(--light--input-placeholder-text);
--input-text: var(--light--input-text);
--icon: var(--light--icon);
--primary-title: var(--light--primary-title);
--primary-subtitle: var(--light--primary-subtitle);
--secondary-subtitle: var(--light--secondary-subtitle);
--navbar-page-overlay: var(--light--navbar-page-overlay);
--code-background: var(--light--code-background);
--button-background: var(--light--button-background);
--footer-background: var(--light--footer-background);
--card-background: var(--light--card-background);
--dark-card-background: var(--light--dark-card-background);
--table-header: var(--light--table-header);
--table-section: var(--light--table-section);
--blue-gradient: var(--light--blue-gradient);
--border: var(--light--border);
--marker: var(--light--marker);
background-color: var(--primary-background);
color: var(--text);
@ -47,10 +174,6 @@ input {
font-family: "Poppins", "sans-serif";
}
.dark {
/* FIXME: Implement dark theme */
}
h1,
h2,
h3,
@ -117,3 +240,58 @@ h4 + * {
font-weight: 600;
}
}
@media only screen and (prefers-color-scheme: dark) {
body {
--primary-background: var(--dark--primary-background);
--secondary-background: var(--dark--secondary-background);
--primary-accent: var(--dark--primary-accent);
--primary-accent-soft: var(--dark--primary-accent-soft);
--primary-accent-light: var(--dark--primary-accent-light);
--primary-accent-lighter: var(--dark--primary-accent-lighter);
--primary-accent-lightest: var(--dark--primary-accent-lightest);
--secondary-accent: var(--dark--secondary-accent);
--secondary-accent-light: var(--dark--secondary-accent-light);
--primary-heading: var(--dark--primary-heading);
--form-invalid: var(--dark--form-invalid);
--warning-background: var(--dark--warning-background);
--warning-text: var(--dark--warning-text);
--link: var(--dark--link);
--link-hover: var(--dark--link-hover);
--primary-text: var(--dark--primary-text);
--text: var(--dark--text);
--text-light: var(--dark--text-light);
--sidebar-text: var(--dark--sidebar-text);
--author-text: var(--dark--author-text);
--mini-event-card-text: var(--dark--mini-event-card-text);
--input-background: var(--dark--input-background);
--input-placeholder-text: var(--dark--input-placeholder-text);
--input-text: var(--dark--input-text);
--icon: var(--dark--icon);
--primary-title: var(--dark--primary-title);
--primary-subtitle: var(--dark--primary-subtitle);
--secondary-subtitle: var(--dark--secondary-subtitle);
--navbar-page-overlay: var(--dark--navbar-page-overlay);
--code-background: var(--dark--code-background);
--button-background: var(--dark--button-background);
--footer-background: var(--dark--footer-background);
--card-background: var(--dark--card-background);
--table-header: var(--dark--table-header);
--table-section: var(--dark--table-section);
--blue-gradient: var(--dark--blue-gradient);
--border: var(--dark--border);
--marker: var(--dark--marker);
}
}

1
pages/about/index.module.css

@ -6,6 +6,7 @@
height: calc(80rem / 16);
margin-top: auto;
padding-left: calc(20rem / 16);
color: var(--primary-title);
}
.content {

8
pages/about/members.module.css

@ -1,6 +1,14 @@
.title {
color: var(--primary-title);
}
.table {
display: table;
width: 100%;
margin-top: calc(20rem / 16);
margin-bottom: calc(60rem / 16);
}
.table thead {
background-color: var(--table-header);
}

2
pages/about/members.tsx

@ -20,7 +20,7 @@ export default function Members(props: Props) {
return (
<>
<Title>Members</Title>
<h1>Members</h1>
<h1 className={styles.title}>Members</h1>
<p>
{`The members for ${capitalize(props.term)} ${
props.year

4
pages/about/our-supporters.module.css

@ -7,11 +7,11 @@
flex-direction: row;
align-items: flex-end;
padding-bottom: 1rem;
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.header {
color: var(--primary-heading);
color: var(--primary-title);
margin: 0 1rem 0 0;
text-align: center;
}

6
pages/about/team.module.css

@ -2,7 +2,7 @@
display: flex;
flex-direction: row;
padding-bottom: calc(24rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
margin-bottom: calc(46rem / 16);
}
@ -15,7 +15,7 @@
}
.header {
color: var(--primary-heading);
color: var(--primary-title);
font-size: calc(48rem / 16);
margin: 0 calc(53rem / 16) 0 0;
}
@ -25,7 +25,7 @@
font-size: calc(36rem / 16);
font-weight: 600;
padding-bottom: calc(22rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
margin-bottom: calc(46rem / 16);
margin-top: calc(86rem / 16);
}

3
pages/events/[year]/[term]/index.module.css

@ -4,8 +4,9 @@
.main > h1,
.main > section > h1 {
color: var(--primary-title);
padding-bottom: calc(16rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.header {

15
pages/events/[year]/[term]/index.tsx

@ -99,15 +99,18 @@ export default function TermPage(props: Props) {
</h1>
)}
<div className={styles.miniEventCards}>
{props.pastEvents.map(({ content, metadata }) => (
{props.pastEvents.map((event, idx) => (
<MiniEventCard
{...metadata}
startDate={new Date(metadata.startDate)}
{...event.metadata}
startDate={new Date(event.metadata.startDate)}
endDate={
metadata.endDate ? new Date(metadata.endDate) : undefined
event.metadata.endDate
? new Date(event.metadata.endDate)
: undefined
}
description={<MDXRemote {...content} />}
key={metadata.name + metadata.startDate.toString()}
description={<MDXRemote {...event.content} />}
key={event.metadata.name + event.metadata.startDate.toString()}
background={idx % 2 === 0 ? "dark-bg" : "normal-bg"}
/>
))}
</div>

2
pages/events/[year]/index.module.css

@ -4,7 +4,7 @@
.main > h1 {
padding-bottom: calc(16rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.blue {

4
pages/get-involved.module.css

@ -5,11 +5,11 @@
.page > header {
display: flex;
flex-direction: row;
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.headerText > h1 {
color: var(--primary-heading);
color: var(--primary-title);
margin: 0 0 calc(8rem / 16) 0;
}

2
pages/index.module.css

@ -56,7 +56,7 @@
.clubDescription {
margin-bottom: calc(50rem / 16);
text-align: center;
color: var(--primary-heading);
color: var(--primary-text);
}
.clubDescription br {

2
pages/news/[year]/[term].module.css

@ -4,7 +4,7 @@
.page > h1 {
padding-bottom: calc(16rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.term {

15
pages/resources/advice/co-op.module.css

@ -4,11 +4,12 @@
justify-content: space-between;
align-items: flex-end;
padding-bottom: calc(32rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.title {
padding-right: calc(40rem / 16);
color: var(--primary-title);
}
.adviceBarContainer {
@ -30,10 +31,22 @@ a.currentAdvice {
color: var(--primary-accent);
}
.adviceBarContainer a:hover {
color: var(--link-hover);
}
.content {
padding-bottom: calc(48rem / 16);
}
.content h3 {
color: var(--primary-subtitle);
}
.content h4 {
color: var(--secondary-subtitle);
}
@media only screen and (max-width: calc(768rem / 16)) {
.titleContainer {
flex-direction: column-reverse;

4
pages/resources/tech-talks/index.module.css

@ -8,7 +8,7 @@
align-items: flex-end;
padding-bottom: 1rem;
margin-bottom: calc(40rem / 16);
border-bottom: calc(1rem / 16) solid var(--primary-heading);
border-bottom: calc(1rem / 16) solid var(--border);
}
.header {
@ -16,7 +16,7 @@
}
.header h1 {
color: var(--primary-heading);
color: var(--primary-title);
margin: 0 1rem 0 0;
text-align: left;
}

9
pages/themer.tsx

@ -26,6 +26,15 @@ export default function Themer() {
>
Reset to light mode
</Button>
<Button
type="reset"
onClick={() => {
context?.clearSaved();
context?.setTheme("dark");
}}
>
Reset to dark mode
</Button>
<Button type="submit" onClick={() => context?.save()}>
Save
</Button>

Loading…
Cancel
Save