About Us page #70
|
@ -0,0 +1,13 @@
|
||||||
|
.bubble {
|
||||||
|
padding: calc(36rem / 16) 0;
|
||||||
|
margin: calc(64rem / 16) 0;
|
||||||
|
background-color: #e1eefa;
|
||||||
|
/* width: 100% !important; */
|
||||||
|
max-width: 5000px !important;
|
||||||
|
/* border-radius: 20rem; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble > * {
|
||||||
|
margin: 2rem auto;
|
||||||
|
max-width: calc(806rem / 16);
|
||||||
|
}
|
|
@ -0,0 +1,10 @@
|
||||||
|
import React, { ReactNode } from "react";
|
||||||
|
import styles from "./Bubble.module.css";
|
||||||
|
|
||||||
|
export default function Bubble(props: { children: React.ReactNode }) {
|
||||||
|
return <DefaultLayout> {props.children} </DefaultLayout>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DefaultLayout(props: { children: React.ReactNode }) {
|
||||||
|
return <div className={styles.bubble}>{props.children}</div>;
|
||||||
|
}
|
|
@ -1,8 +1,10 @@
|
||||||
<div>
|
import Bubble from "./../../components/Bubble";
|
||||||
|
|
||||||
|
<Bubble>
|
||||||
|
|
||||||
CS Club is working towards bridging the gap between each and every CS student, to support their undergraduate experience and to provide a community that students can belong to and identify with. With hundreds of CS students joining Waterloo every year, CS Club aims to run events that encourage students to connect and socialize, to increase technical and academic interest with workshops and talks, and to provide a safe environment for academic learning and growth.
|
CS Club is working towards bridging the gap between each and every CS student, to support their undergraduate experience and to provide a community that students can belong to and identify with. With hundreds of CS students joining Waterloo every year, CS Club aims to run events that encourage students to connect and socialize, to increase technical and academic interest with workshops and talks, and to provide a safe environment for academic learning and growth.
|
||||||
|
|
||||||
</div>
|
</Bubble>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
@ -16,7 +18,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<Bubble>
|
||||||
|
|
||||||
## Our Story
|
## Our Story
|
||||||
|
|
||||||
|
@ -24,7 +26,7 @@ We are students ourselves, coming from all computing backgrounds — Computer Sc
|
||||||
|
|
||||||
By recreating what CS Club means for our community, we're passionate about helping students redefine their university experience here at Waterloo.
|
By recreating what CS Club means for our community, we're passionate about helping students redefine their university experience here at Waterloo.
|
||||||
|
|
||||||
</div>
|
</Bubble>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
@ -34,7 +36,7 @@ The CS Club team is devoted to providing you with all the resources you could ne
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<Bubble>
|
||||||
|
|
||||||
## Our Office
|
## Our Office
|
||||||
|
|
||||||
|
@ -53,6 +55,6 @@ Canada
|
||||||
|
|
||||||
Our office phone number is (519) 888-4567 x33870.
|
Our office phone number is (519) 888-4567 x33870.
|
||||||
|
|
||||||
</div>
|
</Bubble>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
.headings {
|
.headings {
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-top: 5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.headings li {
|
.headings li {
|
||||||
|
@ -21,35 +20,48 @@
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title,
|
.title {
|
||||||
.bubble > * {
|
|
||||||
margin: 2rem auto;
|
margin: 2rem auto;
|
||||||
max-width: calc(806rem / 16);
|
max-width: calc(806rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble {
|
.divs {
|
||||||
padding: calc(36rem / 16) 0;
|
margin-top: 4rem;
|
||||||
margin: calc(16rem / 16) 0;
|
}
|
||||||
/* border-radius: 20rem; */
|
|
||||||
|
.divs > * {
|
||||||
|
margin: 2rem auto;
|
||||||
|
max-width: calc(806rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*box-sizing: border box*/
|
/*box-sizing: border box*/
|
||||||
.bubble:nth-child(odd) {
|
/* should not need this after component*/
|
||||||
|
/* .bubble:nth-child(odd) {
|
||||||
background-color: #e1eefa;
|
background-color: #e1eefa;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
transform: rotate(1.91deg);
|
transform: rotate(1.91deg);
|
||||||
position: relative;
|
/* position: relative;
|
||||||
left: calc(1020rem / 16);
|
left: calc(400rem / 16);
|
||||||
margin-bottom: -280px;
|
margin-bottom: -280px; */
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailingList {
|
.mailingList {
|
||||||
margin: 4rem auto;
|
margin: 4rem auto;
|
||||||
max-width: calc(806rem / 16);
|
max-width: calc(806rem / 16);
|
||||||
padding: 0 calc(60rem / 16);
|
/* padding: 0 calc(60rem / 16); */
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailingList form > * {
|
.mailingList form > * {
|
||||||
|
|
|
@ -12,9 +12,10 @@ export default function AboutUs() {
|
||||||
<div>
|
<div>
|
||||||
<h1 className={styles.title}>About Us!</h1>
|
<h1 className={styles.title}>About Us!</h1>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className={styles.flexBox}>
|
||||||
<Image src="/about/codey.svg" className={styles.codey} />
|
<Image src="/about/codey.svg" className={styles.codey} />
|
||||||
</div>
|
</div>
|
||||||
l42luo marked this conversation as resolved
Outdated
|
|||||||
|
<div className={styles.content}>
|
||||||
<div className={styles.headings}>
|
<div className={styles.headings}>
|
||||||
<Content />
|
<Content />
|
||||||
</div>
|
</div>
|
||||||
|
@ -37,6 +38,7 @@ export default function AboutUs() {
|
||||||
<Button>Subscribe</Button>
|
<Button>Subscribe</Button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</MDXProvider>
|
</MDXProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -51,9 +53,5 @@ function Text(props: HTMLAttributes<HTMLParagraphElement>) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function Div(props: HTMLAttributes<HTMLHeadingElement>) {
|
function Div(props: HTMLAttributes<HTMLHeadingElement>) {
|
||||||
return <div {...props} className={styles.bubble} />;
|
return <div {...props} className={styles.divs} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
// function AboutUsCodey() {
|
|
||||||
// return <Image src="images/about/codey.svg" className={styles.codey} />;
|
|
||||||
// }
|
|
||||||
|
|
Loading…
Reference in New Issue
any reason why
<Content />
is nested under two divs?also, i think a better classname for the div wrapping
<Content />
would becontent
:P