Implement dark theme (Closes #287) (#407)
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
* 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>
This commit is contained in:
parent
443925190e
commit
f631f4013f
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
.bubble {
|
||||
--border-radius: calc(5000rem / 16);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
|
|
|
@ -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,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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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)) {
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -22,5 +22,5 @@
|
|||
}
|
||||
|
||||
.white {
|
||||
fill: var(--primary-background);
|
||||
fill: var(--text-light);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
File diff suppressed because it is too large
Load Diff
18
package.json
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
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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
height: calc(80rem / 16);
|
||||
margin-top: auto;
|
||||
padding-left: calc(20rem / 16);
|
||||
color: var(--primary-title);
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -56,7 +56,7 @@
|
|||
.clubDescription {
|
||||
margin-bottom: calc(50rem / 16);
|
||||
text-align: center;
|
||||
color: var(--primary-heading);
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.clubDescription br {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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…
Reference in New Issue