@ -1 +0,0 @@ |
||||
Visit the [playground](/playground) |
||||
@ -0,0 +1,201 @@ |
||||
.page { |
||||
padding-bottom: calc(60rem / 16); |
||||
} |
||||
|
||||
.intro { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
position: relative; |
||||
|
||||
height: 65vh; |
||||
min-height: calc(420rem / 16); |
||||
max-height: calc(580rem / 16); |
||||
} |
||||
|
||||
.introTop { |
||||
flex-grow: 1; |
||||
} |
||||
|
||||
.introContent { |
||||
flex-grow: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
} |
||||
|
||||
.introBottom { |
||||
flex-grow: 1; |
||||
min-height: calc(132rem / 16); |
||||
} |
||||
|
||||
.clubTitleWrapper { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: center; |
||||
gap: 1rem; |
||||
} |
||||
|
||||
.clubTitleWrapper img { |
||||
height: calc(70rem / 16); |
||||
} |
||||
|
||||
.clubTitle { |
||||
font-family: "Futura", "sans-serif"; |
||||
font-size: calc(33rem / 16); |
||||
text-align: center; |
||||
color: var(--home-title-purple); |
||||
} |
||||
|
||||
.clubDescription { |
||||
margin-bottom: calc(50rem / 16); |
||||
text-align: center; |
||||
color: var(--purple-2); |
||||
} |
||||
|
||||
.clubDescription br { |
||||
display: none; |
||||
} |
||||
|
||||
.codey { |
||||
position: absolute; |
||||
bottom: calc(-124rem / 16); |
||||
right: calc(20rem / 16); |
||||
z-index: -1; |
||||
} |
||||
|
||||
.cardsBackground { |
||||
margin: 0; |
||||
width: 100%; |
||||
|
||||
background-color: var(--off-white); |
||||
} |
||||
|
||||
.cards { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: center; |
||||
align-items: flex-start; |
||||
gap: calc(100rem / 16); |
||||
|
||||
padding: calc(42rem / 16) calc(100rem / 16); |
||||
} |
||||
|
||||
.cardsHeading { |
||||
margin: 1rem 0 calc(8rem / 16); |
||||
font-size: calc(24rem / 16); |
||||
font-weight: 700; |
||||
} |
||||
|
||||
.cardsDescription { |
||||
margin: calc(8rem / 16) 0 1rem; |
||||
} |
||||
|
||||
.cardsDescription br { |
||||
display: none; |
||||
} |
||||
|
||||
.cardsDividingLine { |
||||
display: none; |
||||
} |
||||
|
||||
.eventCards { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: flex-start; |
||||
gap: 1rem; |
||||
} |
||||
|
||||
/* On a smaller desktop screen, make the events/new flow vertically */ |
||||
@media only screen and (max-width: calc(1100rem / 16)) { |
||||
.cards { |
||||
flex-direction: column; |
||||
align-items: center; |
||||
gap: calc(32rem / 16); |
||||
} |
||||
|
||||
.cards > section { |
||||
max-width: calc(540rem / 16); |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) { |
||||
.page { |
||||
padding-bottom: calc(30rem / 16); |
||||
} |
||||
|
||||
.intro { |
||||
height: calc(330rem / 16); |
||||
min-height: unset; |
||||
max-height: unset; |
||||
} |
||||
|
||||
.introContent { |
||||
padding: 1rem; |
||||
max-width: calc(260rem / 16); |
||||
} |
||||
|
||||
.introBottom { |
||||
min-height: calc(100rem / 16); |
||||
} |
||||
|
||||
.clubTitleWrapper img { |
||||
display: none; |
||||
} |
||||
|
||||
.clubTitle { |
||||
margin: calc(8rem / 16) 0; |
||||
font-size: calc(20rem / 16); |
||||
} |
||||
|
||||
.clubDescription { |
||||
margin: calc(8rem / 16) 0 calc(26rem / 16); |
||||
color: var(--purple-2); |
||||
} |
||||
|
||||
.clubDescription br { |
||||
display: inline; |
||||
} |
||||
|
||||
.codey { |
||||
bottom: calc(-46rem / 16); |
||||
right: auto; |
||||
z-index: -1; |
||||
height: calc(120rem / 16); |
||||
} |
||||
|
||||
.cards { |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
align-items: center; |
||||
gap: calc(8rem / 16); |
||||
|
||||
padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16); |
||||
} |
||||
|
||||
.cards > section { |
||||
max-width: unset; |
||||
} |
||||
|
||||
.cardsHeading { |
||||
margin: 0; |
||||
font-size: calc(18rem / 16); |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.cardsDescription br { |
||||
display: inline; |
||||
} |
||||
|
||||
.cardsDividingLine { |
||||
display: block; |
||||
margin: 1rem 0 calc(34rem / 16); |
||||
height: calc(1rem / 16); |
||||
border: none; |
||||
background-color: var(--purple-2); |
||||
} |
||||
} |
||||
@ -0,0 +1,91 @@ |
||||
import React from "react"; |
||||
import { Image } from "../components/Image"; |
||||
import { SocialLinks } from "../components/SocialLinks"; |
||||
import { EventDescriptionCard } from "../components/EventDescriptionCard"; |
||||
import { NewsCard } from "../components/NewsCard"; |
||||
import { ConnectWithUs } from "../components/ConnectWithUs"; |
||||
import { EmailSignup } from "../components/EmailSignup"; |
||||
import { DefaultLayout } from "../components/DefaultLayout"; |
||||
import styles from "./index.module.css"; |
||||
|
||||
// temporary event and news imports
|
||||
import OOTBReact, { |
||||
metadata as OOTBReactEventMetadata, |
||||
} from "../content/playground/ootb-react.event.mdx"; |
||||
import AltTab, { |
||||
metadata as altTabEventMetadata, |
||||
} from "../content/playground/alt-tab.event.mdx"; |
||||
import UnavailableContent, { |
||||
metadata as unavailableMetadata, |
||||
} from "../content/playground/unavailable.news.mdx"; |
||||
|
||||
export default function Home() { |
||||
const events = [ |
||||
{ Content: OOTBReact, metadata: OOTBReactEventMetadata }, |
||||
{ Content: AltTab, metadata: altTabEventMetadata }, |
||||
]; |
||||
|
||||
return ( |
||||
<> |
||||
<DefaultLayout> |
||||
<header className={styles.intro}> |
||||
<div className={styles.introTop} /> |
||||
<div className={styles.introContent}> |
||||
<div className={styles.clubTitleWrapper}> |
||||
<Image src="/images/logo-icon.svg" alt="CSC Logo" /> |
||||
<h1 className={styles.clubTitle}>Computer Science Club</h1> |
||||
</div> |
||||
<p className={styles.clubDescription}> |
||||
University of Waterloo's <br /> |
||||
student computing community |
||||
</p> |
||||
<SocialLinks color="gradient" size="big" /> |
||||
</div> |
||||
<div className={styles.introBottom} /> |
||||
<Image |
||||
className={styles.codey} |
||||
src="/images/home/codey_sitting.svg" |
||||
alt="CSC mascot Codey, a blue shiba with circular glasses" |
||||
/> |
||||
</header> |
||||
</DefaultLayout> |
||||
<div className={styles.cardsBackground}> |
||||
<div className={styles.cards}> |
||||
{/* TODO: add links to past events and past news */} |
||||
<section className={styles.events}> |
||||
<h1 className={styles.cardsHeading}>Upcoming Events</h1> |
||||
<p className={styles.cardsDescription}>See past events here</p> |
||||
<hr className={styles.cardsDividingLine} /> |
||||
<div className={styles.eventCards}> |
||||
{events.map(({ metadata }) => ( |
||||
<EventDescriptionCard |
||||
{...metadata} |
||||
key={metadata.name + metadata.date.toString()} |
||||
/> |
||||
))} |
||||
</div> |
||||
</section> |
||||
<section className={styles.news}> |
||||
<h1 className={styles.cardsHeading}>News</h1> |
||||
<p className={styles.cardsDescription}> |
||||
Updates from our execs! <br /> |
||||
See past news here |
||||
</p> |
||||
<hr className={styles.cardsDividingLine} /> |
||||
<NewsCard {...unavailableMetadata}> |
||||
<UnavailableContent /> |
||||
</NewsCard> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
<DefaultLayout> |
||||
<ConnectWithUs /> |
||||
<EmailSignup /> |
||||
</DefaultLayout> |
||||
</> |
||||
); |
||||
} |
||||
|
||||
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) { |
||||
return <div className={styles.page}>{props.children}</div>; |
||||
}; |
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Loading…
Reference in new issue