Compare commits

...

3 Commits

Author SHA1 Message Date
Jared He 36120123d8 Merge branch 'main' into j285he-timeline 3 months ago
Jared He fc5600cb20 Add About Component (#48) 3 months ago
Jared He 3cb5780964 Standardize font sizes (#46) 3 months ago
  1. 59
      components/About.module.css
  2. 65
      components/About.tsx
  3. 45
      pages/_app.css
  4. 16
      pages/playground.tsx

@ -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 its 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;
}
/* 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);
}
h1,
/* 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 {
} from "data/mocks";
import React from "react";
import About from "@/components/About";
import { PieChart } from "@/components/PieChart";
import { QuotationCarousel } from "@/components/QuotationCarousel";
import { Timeline } from "@/components/Timeline";
@ -35,6 +36,16 @@ export default function Home() {
<PieChart data={mockPieData} width={800} labelWidth={215} />
</div>
<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>{"<BarGraphHorizontal />"}</code>
</h2>
@ -118,6 +129,11 @@ export default function Home() {
</p>
</CenterWrapper>
<h2>
<code>{"<About />"}</code>
<About />
</h2>
<h2>
<code>{"<BoxPlot />"}</code>
</h2>

Loading…
Cancel
Save