diff --git a/components/ConnectWithUs.module.css b/components/ConnectWithUs.module.css new file mode 100644 index 00000000..8160a48d --- /dev/null +++ b/components/ConnectWithUs.module.css @@ -0,0 +1,21 @@ +.header { + color: var(--blue-2); + font-weight: 600; + font-size: calc(36rem / 16); + margin-bottom: calc(12rem / 16); +} + +.socialLinks { + margin: calc(36rem / 16) 0; + line-height: 0; +} + +@media only screen and (max-width: calc(768rem / 16)) { + .header { + font-size: calc(24rem / 16); + } + + .socialLinks { + margin: 1rem 0; + } +} diff --git a/components/ConnectWithUs.tsx b/components/ConnectWithUs.tsx new file mode 100644 index 00000000..cef31144 --- /dev/null +++ b/components/ConnectWithUs.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import styles from "./ConnectWithUs.module.css"; +import { SocialLinks } from "./SocialLinks"; +import { Link } from "./Link"; + +export function ConnectWithUs() { + return ( +
+

Connect with us!

+

+ 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! +

+ +
+ +
+ + {/* TODO: fix feedback form link */} +

+ Send feedback through our Feedback Form +

+
+ ); +} diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css new file mode 100644 index 00000000..0d9567c8 --- /dev/null +++ b/components/EmailSignup.module.css @@ -0,0 +1,25 @@ +.container form { + box-sizing: border-box; +} + +.header { + color: var(--blue-2); + font-weight: 600; + font-size: calc(36rem / 16); + margin-bottom: calc(12rem / 16); +} + +.button { + margin-top: calc(34rem / 16); + display: block; +} + +@media only screen and (max-width: calc(768rem / 16)) { + .header { + font-size: calc(24rem / 16); + } + + .button { + margin-top: calc(20rem / 16); + } +} diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx new file mode 100644 index 00000000..c5e3ba0e --- /dev/null +++ b/components/EmailSignup.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import styles from "./EmailSignup.module.css"; +import { Button } from "./Button"; +import { Input } from "./Input"; + +export function EmailSignup() { + return ( +
+

Join Our Mailing List!

+
+ + + +
+
+ ); +} diff --git a/components/Input.module.css b/components/Input.module.css new file mode 100644 index 00000000..7fcb4c83 --- /dev/null +++ b/components/Input.module.css @@ -0,0 +1,37 @@ +.input { + display: block; + width: 100%; + margin: calc(21rem / 16) 0; + padding: calc(10rem / 16) calc(32rem / 16); + + box-sizing: border-box; + border: 0; + border-radius: calc(20rem / 16); + + background-color: var(--grey-1-24); + font-size: calc(18rem / 16); + line-height: calc(30rem / 16); + color: var(--grey-3); +} + +.input::placeholder { + color: var(--grey-2); + font-weight: 700; +} + +.input:is(:active, :hover, :focus) { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--blue-1); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} + +/* TODO: make this only happen if the form is clicked on? */ +/* .form input:invalid { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--red); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} */ diff --git a/components/Input.tsx b/components/Input.tsx new file mode 100644 index 00000000..477b3045 --- /dev/null +++ b/components/Input.tsx @@ -0,0 +1,8 @@ +import React, { InputHTMLAttributes } from "react"; +import styles from "./Input.module.css"; + +export function Input(props: InputHTMLAttributes) { + return ( + + ); +} diff --git a/components/SocialLinks.module.css b/components/SocialLinks.module.css index 98f5e00b..200a8587 100644 --- a/components/SocialLinks.module.css +++ b/components/SocialLinks.module.css @@ -1,12 +1,15 @@ .link, .links { - display: flex; + display: inline-flex; align-items: center; - justify-content: center; } -.links > * { - margin: 0 calc(10rem / 16); +.link { + margin-left: calc(20rem / 16); +} + +.link:first-child { + margin-left: 0; } .big > * { diff --git a/content/get-involved.mdx b/content/get-involved.mdx new file mode 100644 index 00000000..fef63b05 --- /dev/null +++ b/content/get-involved.mdx @@ -0,0 +1,85 @@ +**Everyone at the University of Waterloo is welcome to come to our events and to +use our resources!** Feel free to join our communities and chat with our +members. However, if you wanted to officially become a member or support our +vision of creating a supportive environment for all computing students, there's +a bunch of ways you can join and help out. + +## How to Join + +### General Membership + +
+ In-person Term + +1. Drop by our office in **MC 3036/3037** with + - your WatCard, and + - $2 for term that you would like to pay for +2. Sign our [Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage) + +That's all! After your account created, you'll have access to all the +[services](https://csclub.uwaterloo.ca/services/) available to members. + +#### Membership Renewal + +If you are already a member of the CSC and want to renew your membership, you +can do so by coming in person to our office. + +
+ +
+ Online Term + +Email the CSC Systems Committee at +[syscom@csclub.uwaterloo.ca](mailto:syscom@csclub.uwaterloo.ca) from your +University of Waterloo email address with the following: + +1. a scan or photograph copy of your **WatCard**, +2. your **WatIAM userid**, and +3. your acknowledgement of having read, understood, and agreeing with our  +[Machine Usage Agreement](https://csclub.uwaterloo.ca/services/machine_usage). + +#### Membership Renewal + +For this online term, you do not need to pay the $2 fee to renew your +membership. We have extended the memberships of all members who had already +previously paid for membership or have joined CS Club during an online term. + +
+ +### Executive Committees + +Are you interested in using your skills to get involved with CSC? We have +committees covering everything from design to development, so no matter your +interests, we’ve got a place for you. + +**CSC hires at the end of every term**, so make sure to stay connected through +social media to keep up to date on when applications open! + +#### Programme Committee + +- In charge of planning, advertising, and running all events hosted by CSC. +- Voices concerns/ideas on behalf of the CS community. + +#### Website Committee + +- Creates functional and modern design for the CSC website. +- Builds and maintains the static website, updating content for events and news. + +#### Systems Committee + +- Maintaining all services that CSC provides which includes file share, DNS, +mail, configuration for IRC, Mattermost, Git hosting. +- Managing mirrors used by large public organizations and 1000s of people +internationally. + +### Elected Roles +Each term the CSC holds elections to determine the executive council. + +- President +- Vice-President +- Assistant Vice-President +- Treasurer + +To find out when and where the next elections will be held, keep an eye on on the [News](/). + +For details on the elections, see the [Constitution](https://csclub.uwaterloo.ca/about/constitution). \ No newline at end of file diff --git a/pages/_app.css b/pages/_app.css index 2e36b3df..49ea8800 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -17,6 +17,11 @@ body { --purple-1: #525284; --purple-2: #2a2a62; --black: #000000; + --grey-1: #c4c4c4; + --grey-1-24: #c4c4c440; + --grey-2: #bbbbbb; + --grey-3: #6b6b6b; + --red: #9f616a; --gradient-blue-green: linear-gradient( 99.94deg, #1481e3 -17.95%, @@ -85,3 +90,7 @@ h4 { font-size: calc(18rem / 16); font-weight: 600; } + +input { + font-family: "Poppins", "sans-serif"; +} diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx index 68925bd6..426cadee 100644 --- a/pages/about/our-supporters.tsx +++ b/pages/about/our-supporters.tsx @@ -8,10 +8,7 @@ export default function OurSupporters() { <>

Our Supporters

- +
diff --git a/pages/get-involved.mdx b/pages/get-involved.mdx deleted file mode 100644 index da4c5a96..00000000 --- a/pages/get-involved.mdx +++ /dev/null @@ -1 +0,0 @@ -# Get Involved page diff --git a/pages/get-involved.module.css b/pages/get-involved.module.css new file mode 100644 index 00000000..7249c158 --- /dev/null +++ b/pages/get-involved.module.css @@ -0,0 +1,112 @@ +.headerContainer { + display: flex; + flex-direction: row; + border-bottom: calc(1rem / 16) solid var(--purple-2); +} + +.headerText h1 { + color: var(--purple-2); + margin: 0 0 calc(8rem / 16) 0; +} + +.headerText p { + color: var(--black); + margin: 0 0 calc(22rem / 16) 0; +} + +.codey { + align-self: flex-end; +} + +.content { + margin-top: calc(32rem / 16); +} + +.content h2 { + font-weight: 600; + color: var(--blue-2); + margin-top: calc(30rem / 16); +} + +.content h3 { + font-weight: 600; + color: var(--purple-2); + margin-top: calc(30rem / 16); + margin-bottom: 1rem; +} + +.content h4 { + margin-bottom: 0; +} + +.content h4 + * { + margin-top: calc(8rem / 16); +} + +.content strong { + font-weight: 600; +} +.content details > * { + padding-left: 1rem; +} + +.content details > summary { + padding-left: 0; +} + +.content details ol { + padding-left: 2rem; +} + +.connectWithUs { + margin-bottom: calc(21rem / 16); +} + +.emailSignup { + margin-bottom: calc(58rem / 16); +} + +.pageContainer { + margin-top: calc(50rem / 16); +} + +@media only screen and (max-width: calc(768rem / 16)) { + .headerContainer { + display: flex; + flex-direction: column-reverse; + align-content: center; + border-bottom: none; + } + + .headerText { + margin-top: calc(6rem / 16); + text-align: center; + } + + .headerText h1 { + color: var(--purple-2); + font-size: calc(24rem / 16); + margin-bottom: (12rem / 16); + } + + .headerText p { + margin: 0; + } + + .codey { + align-self: center; + height: calc(62rem / 16); + } + + .content h2 { + font-size: calc(24rem / 16); + } + + .connectWithUs { + margin-bottom: calc(46rem / 16); + } + + .emailSignup { + margin-bottom: calc(104rem / 16); + } +} diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx new file mode 100644 index 00000000..3ee19e68 --- /dev/null +++ b/pages/get-involved.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Image } from "../components/Image"; +import { ConnectWithUs } from "../components/ConnectWithUs"; +import { EmailSignup } from "../components/EmailSignup"; +import Content from "../content/get-involved.mdx"; +import styles from "./get-involved.module.css"; + +export default function GetInvolved() { + return ( +
+
+
+

Get Involved!

+

+ If you’re interested in helping out with CS Club, don’t hesitate to + get in touch with us! +

+
+ +
+
+ +
+
+ +
+
+ +
+
+ ); +} diff --git a/pages/playground.mdx b/pages/playground.mdx index 3a38453a..af488e24 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -9,6 +9,8 @@ import { OrganizedContentDemo, ButtonDemo, } from "../components/playground"; +import { ConnectWithUs } from "../components/ConnectWithUs" +import { EmailSignup } from "../components/EmailSignup" import { TeamMemberCard } from "../components/TeamMemberCard"; @@ -90,3 +92,19 @@ The `` component is used on various pages such as Meet the Team! and Our --- + +## `` + +The `` component is used on various pages such as the About page and the Get Involved Page! + + + +--- + +## `` + +The `` component is used on various pages such as the About page and the Get Involved Page! + + + +--- diff --git a/public/images/get-involved/codey.svg b/public/images/get-involved/codey.svg new file mode 100644 index 00000000..26a7897a --- /dev/null +++ b/public/images/get-involved/codey.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/our-supporters/supporters-codey.svg b/public/images/our-supporters/codey.svg similarity index 100% rename from public/our-supporters/supporters-codey.svg rename to public/images/our-supporters/codey.svg