created Bubble component

This commit is contained in:
Linna Luo 2021-07-01 20:49:02 -04:00
parent 94890c2895
commit 1381465fac
5 changed files with 80 additions and 45 deletions

View File

@ -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);
}

10
components/Bubble.tsx Normal file
View File

@ -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>;
}

View File

@ -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.
</div>
</Bubble>
<div>
@ -16,7 +18,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
</div>
<div>
<Bubble>
## 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.
</div>
</Bubble>
<div>
@ -34,7 +36,7 @@ The CS Club team is devoted to providing you with all the resources you could ne
</div>
<div>
<Bubble>
## Our Office
@ -53,6 +55,6 @@ Canada
Our office phone number is (519) 888-4567 x33870.
</div>
</Bubble>

View File

@ -8,7 +8,6 @@
.headings {
color: var(--blue-2);
font-size: 24px;
margin-top: 5rem;
}
.headings li {
@ -21,35 +20,48 @@
color: black;
}
.title,
.bubble > * {
.title {
margin: 2rem auto;
max-width: calc(806rem / 16);
}
.bubble {
padding: calc(36rem / 16) 0;
margin: calc(16rem / 16) 0;
/* border-radius: 20rem; */
.divs {
margin-top: 4rem;
}
.divs > * {
margin: 2rem auto;
max-width: calc(806rem / 16);
}
/*box-sizing: border box*/
.bubble:nth-child(odd) {
/* should not need this after component*/
/* .bubble:nth-child(odd) {
background-color: #e1eefa;
} */
.content {
margin: auto;
}
.flexBox {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.codey {
transform: rotate(1.91deg);
position: relative;
left: calc(1020rem / 16);
margin-bottom: -280px;
/* position: relative;
left: calc(400rem / 16);
margin-bottom: -280px; */
z-index: -1;
}
.mailingList {
margin: 4rem auto;
max-width: calc(806rem / 16);
padding: 0 calc(60rem / 16);
/* padding: 0 calc(60rem / 16); */
}
.mailingList form > * {

View File

@ -12,30 +12,32 @@ export default function AboutUs() {
<div>
<h1 className={styles.title}>About Us!</h1>
</div>
<div>
<div className={styles.flexBox}>
<Image src="/about/codey.svg" className={styles.codey} />
</div>
<div className={styles.headings}>
<Content />
</div>
<div className={styles.mailingList}>
<h2>Connect with us!</h2>
<p>
Drop by any of our social media outlets to learn more about us, keep
up-to-date with our upcoming events, or to chat with our members!
</p>
<SocialLinks color="gradient" size="big" />
<p>Send feedback through our Feedback Form </p>
<h2>Join our Mailing List!</h2>
<form action="">
<div>
<input type="text" placeholder="Full Name*" required />
</div>
<div>
<input type="text" placeholder="Email*" required />
</div>
<Button>Subscribe</Button>
</form>
<div className={styles.content}>
<div className={styles.headings}>
<Content />
</div>
<div className={styles.mailingList}>
<h2>Connect with us!</h2>
<p>
Drop by any of our social media outlets to learn more about us, keep
up-to-date with our upcoming events, or to chat with our members!
</p>
<SocialLinks color="gradient" size="big" />
<p>Send feedback through our Feedback Form </p>
<h2>Join our Mailing List!</h2>
<form action="">
<div>
<input type="text" placeholder="Full Name*" required />
</div>
<div>
<input type="text" placeholder="Email*" required />
</div>
<Button>Subscribe</Button>
</form>
</div>
</div>
</MDXProvider>
);
@ -51,9 +53,5 @@ function Text(props: HTMLAttributes<HTMLParagraphElement>) {
}
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} />;
// }