Merge main
This commit is contained in:
Jared He
commit
8465b5be44
|
|
@ -0,0 +1,59 @@
|
|||
.aboutWrapper {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.about {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: calc(45rem / 16);
|
||||
}
|
||||
|
||||
.about h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about h4 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.about aside {
|
||||
flex: 1;
|
||||
margin-right: calc(40rem / 16);
|
||||
}
|
||||
|
||||
.about aside h1 {
|
||||
color: var(--secondary-accent)
|
||||
}
|
||||
|
||||
.about aside p {
|
||||
color: var(--primary-accent-lighter)
|
||||
}
|
||||
|
||||
.about article {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.about article p {
|
||||
color: var(--primary-text);
|
||||
}
|
||||
|
||||
.angle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(70rem / 16);
|
||||
height: calc(70rem / 16);
|
||||
}
|
||||
|
||||
.anglePath {
|
||||
stroke: var(--primary-accent-light)
|
||||
}
|
||||
|
||||
.left.angle {
|
||||
transform: rotate(180deg);
|
||||
top: unset;
|
||||
left: unset;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
import React from "react";
|
||||
|
||||
import styles from "./About.module.css";
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<div className={styles.aboutWrapper}>
|
||||
<AngleDecoration isBottom={false} />
|
||||
<section className={styles.about}>
|
||||
<aside>
|
||||
<h1>About the Programs</h1>
|
||||
<p>Getting an overview of the CS programs in UW</p>
|
||||
</aside>
|
||||
<article>
|
||||
<h4>Computer Science</h4>
|
||||
<p>
|
||||
Offered from the Faculty of Mathematics as most commonly a co-op
|
||||
program, students usually attend 8 school and 6 co-op terms in their
|
||||
degree. However, CS is very flexible, as many students historically
|
||||
have dropped co-ops, taking terms off, and messing with their
|
||||
schedule to fit their desires.
|
||||
</p>
|
||||
<h4>Computing and Financial Management</h4>
|
||||
<p>
|
||||
Computing and Financial Management (CFM) combines the core CS
|
||||
courses with electives from areas such as accounting, economics, and
|
||||
financial management. This is a joint offer from the Faculty of
|
||||
Mathematics and the School of Accounting and Finance, and has the
|
||||
same schedule (and flexibility) as CS.
|
||||
</p>
|
||||
<h4>CS/BBA</h4>
|
||||
<p>
|
||||
Joint with Wilfrid Laurier University, the Business Administration
|
||||
and Computer Science Double Degree (CS/BBA) is an exclusive offering
|
||||
that allows students to get experience in CS as well as many
|
||||
subfields of business. There are 10 school terms and either 4 or 5
|
||||
co-op terms in the usual schedule, so it’s a bit more work than CS
|
||||
or CFM.
|
||||
</p>
|
||||
</article>
|
||||
</section>
|
||||
<AngleDecoration isBottom={true} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface AngleDecorationProps {
|
||||
isBottom: boolean;
|
||||
}
|
||||
|
||||
function AngleDecoration({ isBottom }: AngleDecorationProps) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
|
||||
>
|
||||
<path
|
||||
d="M100,2 L2,2 L2,100"
|
||||
fill="none"
|
||||
strokeWidth="10"
|
||||
className={styles.anglePath}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -24,7 +24,6 @@ body {
|
|||
--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;
|
||||
|
|
@ -69,22 +68,52 @@ body {
|
|||
color: var(--primary-text);
|
||||
font-family: "Inconsolata", monospace;
|
||||
margin: 0;
|
||||
|
||||
/* Font styling for body */
|
||||
font-size: calc(18rem / 16);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h1,
|
||||
/* Page titles (e.g. Demographics) */
|
||||
h1 {
|
||||
font-size: calc(48rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--primary-accent-light);
|
||||
margin-top: calc(32rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
/* Major section headings (e.g. About the Programs) */
|
||||
h2 {
|
||||
font-size: calc(36rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--primary-heading);
|
||||
margin-top: calc(32rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
/* Minor section headings & questions (e.g. What Program Are You In?) */
|
||||
h3 {
|
||||
font-size: calc(32rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--secondary-heading);
|
||||
font-size: calc(45rem / 16);
|
||||
margin-top: calc(24rem / 16);
|
||||
margin-bottom: calc(16rem / 16);
|
||||
}
|
||||
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
/* Titles within paragraphs (e.g. About the Programs -> Computer Science)*/
|
||||
h4 {
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
color: var(--secondary-heading);
|
||||
margin-top: calc(24rem / 16);
|
||||
margin-bottom: calc(8rem / 16);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--primary-text);
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -96,10 +125,6 @@ a:hover {
|
|||
color: var(--link-hover);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: calc(28rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
--primary-background: var(--dark--primary-background);
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import {
|
|||
import { sectionsData } from "data/routes";
|
||||
import React from "react";
|
||||
|
||||
import About from "@/components/About";
|
||||
import { PieChart } from "@/components/PieChart";
|
||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||
import { Sections } from "@/components/Sections";
|
||||
|
|
@ -26,13 +27,25 @@ export default function Home() {
|
|||
<div className={styles.page}>
|
||||
<h1>Playground</h1>
|
||||
<p>Show off your components here!</p>
|
||||
|
||||
<ColorPalette />
|
||||
<h2>
|
||||
<code>Text Styles</code>
|
||||
</h2>
|
||||
<h1>h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1 h1</h1>
|
||||
<h2>h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2 h2</h2>
|
||||
<h3>h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3 h3</h3>
|
||||
<h4>h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4 h4</h4>
|
||||
<p>p p p p p p p p p p p p p p p p p p p p p p p p p p p p</p>
|
||||
<a href="#">a a a a a a a a a a a a a a a a a a a a a a a a a a a a</a>
|
||||
|
||||
<h2>
|
||||
<code>{"<PieChart />"}</code>
|
||||
</h2>
|
||||
<div style={{ padding: "30px" }}>
|
||||
<PieChart data={mockPieData} width={800} labelWidth={215} />
|
||||
</div>
|
||||
<ColorPalette />
|
||||
|
||||
<h2>
|
||||
<code>{"<BarGraphHorizontal />"}</code>
|
||||
</h2>
|
||||
|
|
@ -48,6 +61,7 @@ export default function Home() {
|
|||
right: 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
<code>{"<BarGraphVertical />"}</code>
|
||||
</h2>
|
||||
|
|
@ -67,6 +81,7 @@ export default function Home() {
|
|||
right: 20,
|
||||
}}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
<code>{"<WordCloud />"}</code>
|
||||
</h2>
|
||||
|
|
@ -76,6 +91,7 @@ export default function Home() {
|
|||
value: word.value,
|
||||
}))}
|
||||
/>
|
||||
|
||||
<h2>
|
||||
<code>{"<Textbox />"}</code>
|
||||
</h2>
|
||||
|
|
@ -113,6 +129,11 @@ export default function Home() {
|
|||
</h2>
|
||||
<Sections data={sectionsData} />
|
||||
|
||||
<h2>
|
||||
<code>{"<About />"}</code>
|
||||
</h2>
|
||||
<About />
|
||||
|
||||
<h2>
|
||||
<code>{"<BoxPlot />"}</code>
|
||||
</h2>
|
||||
|
|
|
|||
Loading…
Reference in New Issue