From 6787db39ca2f469a72cd9cb66d15934e6e2c7292 Mon Sep 17 00:00:00 2001 From: hyper-neutrino Date: Thu, 4 Apr 2024 14:59:44 -0400 Subject: [PATCH] fix header sizing --- app/academics/page.tsx | 141 ++++++++++++++++++++++++---- app/coop/page.tsx | 2 + app/globals.css | 28 +++++- app/layout.tsx | 9 ++ components/Boxplot.tsx | 4 + components/SectionHeader.module.css | 15 ++- utils/title.ts | 11 +++ 7 files changed, 190 insertions(+), 20 deletions(-) diff --git a/app/academics/page.tsx b/app/academics/page.tsx index e51185b..0b3b753 100644 --- a/app/academics/page.tsx +++ b/app/academics/page.tsx @@ -538,23 +538,130 @@ export default function Academics() { - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TermMeanMinQ1MedianQ3Max
1A86.456083.887.29297
1B84.62608085.291.2599
2A82.8959.47785.39097.2
2B87.9653.883.55909498
3A88.526385.290.89498.71
3B88.3364.338589.6393.6399
4A87.116583889297
4B86.5968.678188.389299.5
5A93.1790.69293.29496
5B84.4808084.488.888.8
+
diff --git a/app/coop/page.tsx b/app/coop/page.tsx index 88d7af5..e441952 100644 --- a/app/coop/page.tsx +++ b/app/coop/page.tsx @@ -181,6 +181,7 @@ export default function Coop() { left: 20, }} background + means={{ 1: 23.43, 2: 30.14, 3: 36.43, 4: 43.6, 5: 57.91, 6: 63.42 }} /> @@ -198,6 +199,7 @@ export default function Coop() { top: 20, left: 20, }} + means={{ 1: 724.87, 2: 1874.68, 3: 1363.7, 4: 2706.27, 5: 7694.31, 6: 7623.83 }} /> diff --git a/app/globals.css b/app/globals.css index 3caf07a..be270f8 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,8 @@ @font-face { font-family: Lexend; - src: local(''), url('../public/fonts/Lexend-VariableFont_wght.ttf') format('ttf'); + src: + local(""), + url("../public/fonts/Lexend-VariableFont_wght.ttf") format("ttf"); } html { @@ -167,7 +169,7 @@ h3 { h4 { font-size: calc(26rem / 16); font-weight: 700; - color: var(-dark--4-heading); + color: var(--dark--4-heading); margin-top: calc(24rem / 16); margin-bottom: calc(8rem / 16); letter-spacing: 0.05rem; @@ -236,3 +238,25 @@ a:hover { flex-direction: column; align-items: center; } + +table, +thead, +tbody, +tr, +th, +td { + border-collapse: collapse; +} + +th, +td { + padding: 0.32rem 0.64rem; +} + +thead tr { + border-bottom: 1px solid var(--label); +} + +tbody tr:nth-child(2n) { + background-color: var(--tertiary-background); +} diff --git a/app/layout.tsx b/app/layout.tsx index becf5d4..438996e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,5 +1,14 @@ +import { Viewport } from "next"; +import { title } from "../utils/title"; import "./globals.css"; +export const metadata = title("Home"); + +export const viewport: Viewport = { + colorScheme: "dark", + themeColor: "#5caff9", +}; + export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/components/Boxplot.tsx b/components/Boxplot.tsx index 9d64949..f5b7622 100644 --- a/components/Boxplot.tsx +++ b/components/Boxplot.tsx @@ -71,6 +71,8 @@ export type StatsPlotProps = { boxPlotPadding?: number; /** Minimum width of the graph. */ minWidth?: number; + /** Arithmetic means (if applicable) */ + means?: Record; background?: boolean; }; @@ -102,6 +104,7 @@ export const BoxPlot = withTooltip( boxPlotPadding = 0.3, minWidth = 500, background = false, + means, }: StatsPlotProps & WithTooltipProvidedProps) => { if (width < minWidth) { width = minWidth; @@ -297,6 +300,7 @@ export const BoxPlot = withTooltip(

median: {tooltipData.median}

first quartile: {tooltipData.firstQuartile}

min: {tooltipData.min}

+ {means?.[tooltipData.category] ?

mean: {means[tooltipData.category]}

: null} )} diff --git a/components/SectionHeader.module.css b/components/SectionHeader.module.css index c10086c..e221a17 100644 --- a/components/SectionHeader.module.css +++ b/components/SectionHeader.module.css @@ -1,6 +1,7 @@ .header { display: flex; flex-direction: column; + align-items: center; justify-content: center; padding: calc(40rem / 16) 0; text-align: center; @@ -23,7 +24,7 @@ margin: auto; } -@media screen and (max-width: 900px) { +@media screen and (max-width: 1000px) { .title { font-size: calc(50rem / 16); margin: calc(20rem / 16) auto; @@ -34,3 +35,15 @@ margin: auto calc(15rem / 16); } } + +@media screen and (max-width: 750px) { + .title { + font-size: 2.5rem; + margin: 0.75rem auto; + } + + .subTitle { + font-size: 1.5rem; + margin: auto 0.5rem; + } +} \ No newline at end of file diff --git a/utils/title.ts b/utils/title.ts index dae6d79..c1cbbe6 100644 --- a/utils/title.ts +++ b/utils/title.ts @@ -1,8 +1,19 @@ import { Metadata } from "next"; +const description = + "The 2023 CS Class Profile is a showcase of data relevant to CS, CFM, and CS/BBA students completing their undergrad in 2023. Explore the graduating class of 2023 with data gathered and presented by the University of Waterloo Computer Science Club!"; + export function title(title: string): Metadata { return { title: `${title} — 2023 CS Class Profile`, + description, + keywords: ["uw", "csc", "csclub", "uwaterloo", "uwcsc", "university", "waterloo", "computer", "science", "club", "class", "profile", "2023"], + openGraph: { + type: "website", + title: "2023 CS Class Profile", + description, + url: "https://csclub.uwaterloo.ca/classprofile/2023/", + }, icons: ["/images/favicon.ico"], }; }