diff --git a/components/EventDescriptionCard.module.css b/components/EventDescriptionCard.module.css index 011ecd2a..0ddff676 100644 --- a/components/EventDescriptionCard.module.css +++ b/components/EventDescriptionCard.module.css @@ -50,6 +50,7 @@ @media only screen and (max-width: calc(768rem / 16)) { .card { + max-width: unset; padding: 0; background-color: transparent; } diff --git a/components/Navbar.module.css b/components/Navbar.module.css index fa656d66..9dbbf03d 100644 --- a/components/Navbar.module.css +++ b/components/Navbar.module.css @@ -2,6 +2,7 @@ display: flex; justify-content: center; align-items: center; + z-index: 10; background-color: var(--white); } @@ -154,13 +155,13 @@ /* On a smaller desktop screen, keep the same navbar layout but decrease the * horizontal padding so it still fits */ -@media screen and (max-width: calc(960rem / 16)) { +@media only screen and (max-width: calc(960rem / 16)) { .navContent { padding: calc(28rem / 16) calc(64rem / 16); } } -@media screen and (max-width: calc(768rem / 16)) { +@media only screen and (max-width: calc(768rem / 16)) { .navContent { display: grid; grid-template-columns: 1fr 1fr 1fr; diff --git a/components/NewsCard.module.css b/components/NewsCard.module.css index 87d6ba99..4114b061 100644 --- a/components/NewsCard.module.css +++ b/components/NewsCard.module.css @@ -22,9 +22,14 @@ @media only screen and (max-width: calc(768rem / 16)) { .card { padding: 0; + max-width: unset; background-color: transparent; } + .date { + font-weight: 600; + } + .content > *:first-child { margin-top: 1rem; } diff --git a/pages/_app.css b/pages/_app.css index bd4f486f..0763d20c 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -25,6 +25,8 @@ body { ); /* used in mobile navbar background */ --navbar-gray: #787878b2; + /* used in home page */ + --home-title-purple: #27153e; color: var(--black); font-family: "Poppins", "sans-serif"; diff --git a/pages/font.css b/pages/font.css index 2e48ac89..0b701ad5 100644 --- a/pages/font.css +++ b/pages/font.css @@ -159,4 +159,13 @@ src: local(''), url('../public/fonts/poppins-v15-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../public/fonts/poppins-v15-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} \ No newline at end of file +} +/* futura-bold */ +@font-face { + font-family: 'Futura'; + font-style: normal; + font-weight: 700; + src: local(''), + url('../public/fonts/futura-bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ + url('../public/fonts/futura-bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} diff --git a/pages/index.mdx b/pages/index.mdx deleted file mode 100644 index 7a6200c7..00000000 --- a/pages/index.mdx +++ /dev/null @@ -1 +0,0 @@ -Visit the [playground](/playground) diff --git a/pages/index.module.css b/pages/index.module.css new file mode 100644 index 00000000..ec2407d6 --- /dev/null +++ b/pages/index.module.css @@ -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); + } +} diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 00000000..a64dd9ab --- /dev/null +++ b/pages/index.tsx @@ -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 ( + <> + +
+
+
+
+ CSC Logo +

Computer Science Club

+
+

+ University of Waterloo's
+ student computing community +

+ +
+
+ CSC mascot Codey, a blue shiba with circular glasses +
+ +
+
+ {/* TODO: add links to past events and past news */} +
+

Upcoming Events

+

See past events here

+
+
+ {events.map(({ metadata }) => ( + + ))} +
+
+
+

News

+

+ Updates from our execs!
+ See past news here +

+
+ + + +
+
+
+ + + + + + ); +} + +Home.Layout = function HomeLayout(props: { children: React.ReactNode }) { + return
{props.children}
; +}; diff --git a/public/fonts/futura-bold.woff b/public/fonts/futura-bold.woff new file mode 100644 index 00000000..99f00c60 Binary files /dev/null and b/public/fonts/futura-bold.woff differ diff --git a/public/fonts/futura-bold.woff2 b/public/fonts/futura-bold.woff2 new file mode 100644 index 00000000..05dbc943 Binary files /dev/null and b/public/fonts/futura-bold.woff2 differ diff --git a/public/images/home/codey_sitting.svg b/public/images/home/codey_sitting.svg new file mode 100644 index 00000000..bd48f8ff --- /dev/null +++ b/public/images/home/codey_sitting.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + +