Add About Component #48
|
@ -0,0 +1,59 @@
|
||||||
|
.aboutWrapper {
|
||||||
|
position: relative;
|
||||||
|
width: 90%;
|
||||||
j285he marked this conversation as resolved
|
|||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding: calc(45rem / 16);
|
||||||
j285he marked this conversation as resolved
a258wang
commented
Is there any reason why we aren't doing Is there any reason why we aren't doing `width: 100%` (or maybe it's not even necessary to specify the width) and then just letting padding/margin handle the spacing?
|
|||||||
|
}
|
||||||
|
|
||||||
|
.about h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
j285he marked this conversation as resolved
a258wang
commented
NIT: rem NIT: rem
|
|||||||
|
|
||||||
|
.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--secondary-accent-light: #FEA0C8;
|
||||||
--light--primary-heading: #D02B53;
|
--light--primary-heading: #D02B53;
|
||||||
--light--primary-text: #483B35;
|
--light--primary-text: #483B35;
|
||||||
--light--secondary-text: var(--pink);
|
|
||||||
--light--link: var(--orange);
|
--light--link: var(--orange);
|
||||||
--light--link-hover: #FFBC9F;
|
--light--link-hover: #FFBC9F;
|
||||||
--light--card-background: #FFFFFF;
|
--light--card-background: #FFFFFF;
|
||||||
|
|
|
@ -10,6 +10,7 @@ import {
|
||||||
} from "data/mocks";
|
} from "data/mocks";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
|
import About from "@/components/About";
|
||||||
import { PieChart } from "@/components/PieChart";
|
import { PieChart } from "@/components/PieChart";
|
||||||
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
import { QuotationCarousel } from "@/components/QuotationCarousel";
|
||||||
|
|
||||||
|
@ -116,6 +117,11 @@ export default function Home() {
|
||||||
</p>
|
</p>
|
||||||
</CenterWrapper>
|
</CenterWrapper>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
<code>{"<About />"}</code>
|
||||||
|
<About />
|
||||||
|
</h2>
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
<code>{"<BoxPlot />"}</code>
|
<code>{"<BoxPlot />"}</code>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
Loading…
Reference in New Issue
Is
flex-direction: column
necessary? Since the wrapper only has 1 non-absolutely-positioned child