From f2f64f9eb496691f8fdf07bb4515fced37968764 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 20 Jun 2021 16:57:34 -0400 Subject: [PATCH 01/17] wireframe of about us page --- components/Navbar.tsx | 2 +- content/about-us.mdx | 72 +++++++++++ pages/about/about-us.module.css | 68 +++++++++++ pages/about/about-us.tsx | 209 ++++++++++++++++++++++++++++++++ public/logos/Discord.png | Bin 900 -> 0 bytes public/logos/Facebook.png | Bin 615 -> 0 bytes public/logos/Instagram.png | Bin 1077 -> 0 bytes public/logos/Twitch.png | Bin 575 -> 0 bytes 8 files changed, 350 insertions(+), 1 deletion(-) create mode 100644 content/about-us.mdx create mode 100644 pages/about/about-us.module.css create mode 100644 pages/about/about-us.tsx delete mode 100644 public/logos/Discord.png delete mode 100644 public/logos/Facebook.png delete mode 100644 public/logos/Instagram.png delete mode 100644 public/logos/Twitch.png diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 5bf8d8c4..3c603984 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -24,7 +24,7 @@ const menu: NavLink[] = [ submenu: [ { name: "About Us", - route: "/about", + route: "/about/about-us", }, { name: "Meet the Team", diff --git a/content/about-us.mdx b/content/about-us.mdx new file mode 100644 index 00000000..f8362c76 --- /dev/null +++ b/content/about-us.mdx @@ -0,0 +1,72 @@ +import {SocialLinks} from "../components/SocialLinks"; + +
+ +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. + +
+ +
+ +## Our Vision + +1. Academic: Promoting the knowledge and interest of Computer Science, as well as supporting students throughout their academic experiences. + +2. Career: Providing career guidance and resources to help students gain experience and knowledge for their own job search. + +3. Community: Encouraging interpersonal relationships through community building and social events for all computing students. + +
+ +
+ +## Our Story + +We are students ourselves, coming from all computing backgrounds — Computer Science, Software Engineering, CFM, Mechatronics Engineering, and more. CS Club was born from an unfulfilled need; we felt that although there are so many students at UW that are interested in CS, there wasn't a proper support network in place. We lacked the cohorts provided to engineers, and we felt disconnected from one another. + +By recreating what CS Club means for our community, we're passionate about helping students redefine their university experience here at Waterloo. + +
+ +
+ +## Our Mission + +The CS Club team is devoted to providing you with all the resources you could need as a student. We want to create a community that members can call home, to make it a place where you can reach out for career advice, for academic help, or even just to socialize. To fulfil this mission, we'll be running events and initiatives throughout the term, so please check out our Events page to stay updated! + +
+ +
+ +## Our Office + +The CS Club office is located at room MC 3036/3037, in the Math and Computer Building of the University of Waterloo. +- An office favorite is our $0.50 pop for members. We have a fridge in the office which is stocked with many different kinds of pop. +- We have lots of informative books, 5 computer terminals, and an array of knowledgeable people to talk to. + +Come visit us on campus in our office! Meet new members and find out what’s new in the club + +Computer Science Club +Math & Computer 3036/3037 +University of Waterloo +200 University Avenue West +Waterloo, ON N2L 3G1 +Canada + +Our office phone number is (519) 888-4567 x33870. + +
+ +
+ +## 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! + + + +Send feedback through our Feedback Form + +
+ + diff --git a/pages/about/about-us.module.css b/pages/about/about-us.module.css new file mode 100644 index 00000000..9808e8a5 --- /dev/null +++ b/pages/about/about-us.module.css @@ -0,0 +1,68 @@ +.title { + color: var(--purple-2); + font-size: 48px; + position: relative; + bottom: -160px; +} + +.headings { + color: var(--blue-2); + font-size: 24px; + margin-top: 5rem; +} + +.text { + font-size: 16px; + color: black; +} + +.title, +.bubble > * { + margin: 2rem auto; + max-width: calc(806rem / 16); + padding: 0 calc(60rem / 16); +} + +.bubble { + padding: calc(48rem / 16) 0 calc(48rem / 16); + margin: calc(16rem / 16) 0; +} + +/*box-sizing: border box*/ +.bubble:nth-child(odd) { + background-color: #e1eefa; +} + +.codey { + transform: rotate(1.91deg); + position: relative; + left: 600px; + margin-bottom: -280px; + z-index: -1; +} + +.mailingList { + margin: 2rem auto; + max-width: calc(806rem / 16); + padding: 0 calc(60rem / 16); +} + +.mailingList form > * { + margin: 0.5rem auto; +} + +.mailingList form input { + border-radius: 16px; + padding: calc(8rem / 16) 0; +} + +.mailingList form input[type="text"] { + /*temporary hard coding of font*/ + font-family: Poppins; + font-style: normal; + padding: 0 calc(8rem / 16); +} + +.mailingList h2 { + color: var(--blue-2); +} diff --git a/pages/about/about-us.tsx b/pages/about/about-us.tsx new file mode 100644 index 00000000..67861dc9 --- /dev/null +++ b/pages/about/about-us.tsx @@ -0,0 +1,209 @@ +import React, { HTMLAttributes } from "react"; +import { MDXProvider } from "@mdx-js/react"; +import Content from "../../content/about-us.mdx"; +import styles from "./about-us.module.css"; +import { Button } from "../../components/Button"; + +export default function AboutUs() { + return ( + +

About Us!

+
{AboutUsCodey()}
+
+ +
+
+

Join our Mailing List!

+
+
+ +
+
+ +
+ +
+
+ + ); +} + +/*to be replaced by css rules in about-us.module.css*/ +function H2(props: HTMLAttributes) { + return

; +} + +function Text(props: HTMLAttributes) { + return

; +} + +function Li(props: HTMLAttributes) { + return

  • ; +} + +function Div(props: HTMLAttributes) { + return
    ; +} + +function AboutUsCodey() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/public/logos/Discord.png b/public/logos/Discord.png deleted file mode 100644 index e231006c7cdcd5be8ea082c33e150e616189c983..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 900 zcmV-~1AF|5P)oR_~xUrcnFmu(jCAG+O7byf}~PpArNx?oI0kitX&q{Ey9J-3=n1pCKkXtN0B^H7<;ZmOjD7x6())5F#6w8EwJm8HK zuq3R>@z0n#HMYBS9W;@d2Skrf^Q!5CWcb#0z%qAv%jhD&$so*pv=l~X2XgP(!iP@$z7`XD3 z{UaD+5L_X4GB}v@y$$*a@ASP~8p&F7zd6ahq+Tz$gt`LnUBPXi?}G*rL?Y@A+=1;5bOriQL=Z{cL3dzXfpG@~A5z-n zj5BSOG*uz(B&C=il*}KRe4I09=F9;~z7Zllu;a^(UmPBT>@5@tM~^Xy_KjN!(o-`c zJ%8{3$Uj&DN=z^W*V95N**UmV7F?1*jRdN;6sPHNJJ}HewM4h4M!F~f30YNEtd2E^ zZS|NEYJdJ$(QUau>nH&4E^L74?6Y~o3a}C)ZRCs&Mk4D-sDM;~u>t00Yq!$K@{U|Z z9{Phz6%@y#(7^oU=5FtPcs3TeIQdzU`F$HvRt$jnf>`uoiZgF(xrp@qum-*UCWwen zT6=39%t;~9&1=pR7QmP#bz-s}^(RNFm`YA$IQZ+`hMT$_*$6&LB2a|L-`wAkHeG%+ zXIb#yoJPzi>T!h(lqZfUjJf-ToVJ60N4I}4YLXJJkGQVaqHgxd=^-P=M7CX_KRyzm zwxA$6r=$Dkzj(%+lxxxyrASkhB27_>G(|2VTW+Njfj8fN*9&aqn%pw;tm)WStagH- zOCO`kLJ^Sl50m?(oSgqj(zT%Ay{&6AUz9$~A``9I`qPxVZ8+!So88jr#fY2f!I}Ex zz8_XCiG~ogB@#EjyivyKGKS4-cfF8GUP;L!yaHe1pFdTIb4~yN002ovPDHLkV1lm` B5a|E_ diff --git a/public/logos/Instagram.png b/public/logos/Instagram.png deleted file mode 100644 index 83729cd354d1fa9cd16daf4667452b5cbd9cca55..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1077 zcmV-51j_q~P)xc&;}04AKDAfQowpK3(* zd+5QsB{R#=JHQSmJPztMh~3XdsulJylqivW0lgm*APbKOB-84HD1?#K!v>Hf10>sc zv~a36Bo3Lwzl?i@YwDmK<7FY(Yeb?StqykPm;N-snhrR|Ln@gS-g*akx$ZaGq7by% z5sB&oZIa*LCry&fDh>9I1euk>xu_YbifPGh8+v&dNLJUj@YGPp@!&*~sVZlUq$NqV z4qQhkvVo8+L{cMCJYv7-OVQ`fWlA4s_L>-55{g7S|Vjz}8 zmqpig80&aiG6HZVY2kQEoF`_>+ezF*Q*R&X6<~;dx`+7|(h94IT5_ z`AakjFktg1DnJ_wb+&z*8#l)Dbf28yP79{Q)I@8>0)@qUvbwf6Zj8?LE%jakZ^D#_ zsd{mwESoP{{RhbwzjX4reU<&*Ql7=h$YK%IVd)T5sbUD-w0g(tW==uDeF2@Ht79D| zOArIGh*JJ2un<$*D5g_ofQiTz9+zq8UC|2+4aC3@H@}VT^^}<-S&A@2&P8E0JVBAW zQGsC`X4;;JEXMWM!I(Y_$^k^-)NsuuHfGL8Jyn`$lODLUouEqE#=&OL#1>=x8-Ulqnw>u<&{lC)0@oTx)G`jW&NBd_F2sCRO!i`p`ds zIiq;i-&1!AIn3dXR_H*hcTN#U=|n|Z9W(T6NDz{1D>!#fU5iTeQ)6*8*f-Rfs4}E_ zXz(GxE7D4sF+-AIH1jap68c71-_Vt5%WKIC>xtkKEP vQL2!*VJ%=P)tb z!Y~v-uWyVLBqTCIM(7Cb2BiI|sz{|9umNF$c7yVP`qe6Bf-*uzNH^f46{%?K+CU^8 zG34O{q;h^@V{&s6KW-cX3U2+GZGh2-ieWJyQ&0#r06#cz8!E;i>=QvL05;SFJt)A~ zV06>;KqIa{y99Baq>g(9Y66cfu#h;mfP_*8U5>>Bx<0pJ7IkDf#yEI!TETj|`})%% zgjphfIC7d3RU8T>h#;~k;r)%GNo0*y@pXk5LEaaD`NJ^@)j*c}{=w(Q64-y<V{GTBwD&dDX@l0K#N3KfzlE> z1SEym34(af8MC3JfTZw~IP`X&RiKoFE&&PU$mNO^ssk?Ox0TjLQqB_sp%8Gg3asMn z$9$3<&{5Ajp N002ovPDHLkV1ig7>B0a2 -- 2.39.2 From ff3a3d57a2a55f50e95a1a5d502b7f8fcdbea8dd Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 20 Jun 2021 17:10:09 -0400 Subject: [PATCH 02/17] added mdx module declaration to next-env.d.ts file --- next-env.d.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/next-env.d.ts b/next-env.d.ts index cdebab18..ffde38ef 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -62,3 +62,11 @@ declare module "*.section.mdx" { export const metadata: SectionMetadata; export default ReactComponent; } + +declare module "*.mdx" { + import { ComponentType } from "react"; + + const ReactComponent: ComponentType; + + export default ReactComponent; +} -- 2.39.2 From 1195a5dc564e00efe338459a677169a085a21a7c Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 20 Jun 2021 17:17:05 -0400 Subject: [PATCH 03/17] removed Li function for styling list elements, styled in css module --- pages/about/about-us.module.css | 5 +++++ pages/about/about-us.tsx | 6 +----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/pages/about/about-us.module.css b/pages/about/about-us.module.css index 9808e8a5..34654e16 100644 --- a/pages/about/about-us.module.css +++ b/pages/about/about-us.module.css @@ -11,6 +11,11 @@ margin-top: 5rem; } +.headings li { + font-size: 16px; + color: black; +} + .text { font-size: 16px; color: black; diff --git a/pages/about/about-us.tsx b/pages/about/about-us.tsx index 67861dc9..9c3b9dc3 100644 --- a/pages/about/about-us.tsx +++ b/pages/about/about-us.tsx @@ -6,7 +6,7 @@ import { Button } from "../../components/Button"; export default function AboutUs() { return ( - +

    About Us!

    {AboutUsCodey()}
    @@ -37,10 +37,6 @@ function Text(props: HTMLAttributes) { return

    ; } -function Li(props: HTMLAttributes) { - return

  • ; -} - function Div(props: HTMLAttributes) { return
    ; } -- 2.39.2 From aa7f1c11d5f904fed7a1d25c0a07b4bab2bfda09 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sat, 26 Jun 2021 20:33:48 -0400 Subject: [PATCH 04/17] using Image tag, changed about page route in Navbar, moved SocialLinks out of mdx file --- components/Navbar.tsx | 10 +++--- content/about-us.mdx | 12 ------- pages/about-us.module.css | 73 +++++++++++++++++++++++++++++++++++++++ pages/about-us.tsx | 59 +++++++++++++++++++++++++++++++ public/about/codey.svg | 38 ++++++++++++++++++++ 5 files changed, 175 insertions(+), 17 deletions(-) create mode 100644 pages/about-us.module.css create mode 100644 pages/about-us.tsx create mode 100644 public/about/codey.svg diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 8bb7155b..042777fa 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -20,12 +20,12 @@ const menu: NavLink[] = [ }, { name: "About", - route: "/about", + route: "/about-us", submenu: [ - { - name: "About Us", - route: "/about/about-us", - }, + // { + // name: "About Us", + // route: "/about/about-us", + // }, { name: "Meet the Team", route: "/about/team", diff --git a/content/about-us.mdx b/content/about-us.mdx index f8362c76..dfbcdbb6 100644 --- a/content/about-us.mdx +++ b/content/about-us.mdx @@ -57,16 +57,4 @@ Our office phone number is (519) 888-4567 x33870.
    -
    - -## 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! - - - -Send feedback through our Feedback Form - -
    - diff --git a/pages/about-us.module.css b/pages/about-us.module.css new file mode 100644 index 00000000..2d19616c --- /dev/null +++ b/pages/about-us.module.css @@ -0,0 +1,73 @@ +.title { + color: var(--purple-2); + font-size: 48px; + position: relative; + bottom: -160px; +} + +.headings { + color: var(--blue-2); + font-size: 24px; + margin-top: 5rem; +} + +.headings li { + font-size: 16px; + color: black; +} + +.text { + font-size: 16px; + color: black; +} + +.title, +.bubble > * { + margin: 2rem auto; + max-width: calc(806rem / 16); + padding: 0 calc(60rem / 16); +} + +.bubble { + padding: calc(48rem / 16) 0 calc(48rem / 16); + margin: calc(16rem / 16) 0; +} + +/*box-sizing: border box*/ +.bubble:nth-child(odd) { + background-color: #e1eefa; +} + +.codey { + transform: rotate(1.91deg); + position: relative; + left: calc(1020rem / 16); + margin-bottom: -280px; + z-index: -1; +} + +.mailingList { + margin: 4rem auto; + max-width: calc(806rem / 16); + padding: 0 calc(60rem / 16); +} + +.mailingList form > * { + margin: 0.5rem auto; +} + +.mailingList form input { + border-radius: 16px; + padding: calc(8rem / 16) 0; +} + +.mailingList form input[type="text"] { + /*temporary hard coding of font*/ + font-family: Poppins; + font-style: normal; + padding: 0 calc(8rem / 16); +} + +.mailingList h2 { + color: var(--blue-2); +} diff --git a/pages/about-us.tsx b/pages/about-us.tsx new file mode 100644 index 00000000..b181d67b --- /dev/null +++ b/pages/about-us.tsx @@ -0,0 +1,59 @@ +import React, { HTMLAttributes } from "react"; +import { MDXProvider } from "@mdx-js/react"; +import { Image } from "../components/Image"; +import Content from "../content/about-us.mdx"; +import styles from "./about-us.module.css"; +import { Button } from "../components/Button"; +import { SocialLinks } from "../components/SocialLinks"; + +export default function AboutUs() { + return ( + +
    +

    About Us!

    +
    +
    + +
    +
    + +
    +
    +

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

    + +

    Send feedback through our Feedback Form

    +

    Join our Mailing List!

    +
    +
    + +
    +
    + +
    + +
    +
    +     + ); +} + +/*to be replaced by css rules in about-us.module.css*/ +function H2(props: HTMLAttributes) { + return

    ; +} + +function Text(props: HTMLAttributes) { + return

    ; +} + +function Div(props: HTMLAttributes) { + return

    ; +} + +// function AboutUsCodey() { +// return ; +// } diff --git a/public/about/codey.svg b/public/about/codey.svg new file mode 100644 index 00000000..7eb4dd58 --- /dev/null +++ b/public/about/codey.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- 2.39.2 From c73f6dd76de34525e75cd52d30f63ec84ed91d42 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sat, 26 Jun 2021 22:03:28 -0400 Subject: [PATCH 05/17] some styling for blue hotdogs and mobile styles --- pages/about-us.module.css | 48 +++++++++++++++++++++++++++++++++++++-- public/about/hotdog.svg | 3 +++ 2 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 public/about/hotdog.svg diff --git a/pages/about-us.module.css b/pages/about-us.module.css index 2d19616c..413a59ad 100644 --- a/pages/about-us.module.css +++ b/pages/about-us.module.css @@ -31,11 +31,34 @@ .bubble { padding: calc(48rem / 16) 0 calc(48rem / 16); margin: calc(16rem / 16) 0; + /* border-radius: 20rem; */ } /*box-sizing: border box*/ -.bubble:nth-child(odd) { - background-color: #e1eefa; +/* .bubble:nth-child(odd) { + background-color: #e1eefa; + background: no-repeat url(/about/hotdog.svg); + background-size: contain; + background-position: right center; +} */ + +/*styling hotdogs*/ +.bubble:nth-child(1) { + background: no-repeat url(/about/hotdog.svg); + background-size: contain; + background-position: left center; +} + +.bubble:nth-child(3) { + background: no-repeat url(/about/hotdog.svg); + background-size: cover; + background-position: left center; +} + +.bubble:nth-child(5) { + background: no-repeat url(/about/hotdog.svg); + background-size: cover; + background-position: left center; } .codey { @@ -71,3 +94,24 @@ .mailingList h2 { color: var(--blue-2); } + +@media only screen and (max-width: calc(768rem / 16)) { + .bubble:nth-child(odd) { + background-color: #e1eefa; + } + + .title { + color: var(--purple-2); + font-size: 48px; + display: flex; + justify-content: center; + } + + .codey { + transform: rotate(1.91deg); + position: relative; + right: calc(1020rem / 16); + margin-bottom: -280px; + z-index: -1; + } +} diff --git a/public/about/hotdog.svg b/public/about/hotdog.svg new file mode 100644 index 00000000..af6ce194 --- /dev/null +++ b/public/about/hotdog.svg @@ -0,0 +1,3 @@ + + + -- 2.39.2 From ce5486a603a6581c3158708f17f208d51d69e9ab Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 27 Jun 2021 19:42:36 -0400 Subject: [PATCH 06/17] moved files to pages/about --- components/Navbar.tsx | 10 +- content/{about-us.mdx => about/index.mdx} | 2 - content/{ => about}/our-supporters.mdx | 0 pages/about/about-us.module.css | 73 ------- pages/about/about-us.tsx | 205 ------------------ pages/about/index.mdx | 1 - .../index.module.css} | 29 +-- pages/{about-us.tsx => about/index.tsx} | 10 +- pages/about/our-supporters.tsx | 2 +- 9 files changed, 14 insertions(+), 318 deletions(-) rename content/{about-us.mdx => about/index.mdx} (97%) rename content/{ => about}/our-supporters.mdx (100%) delete mode 100644 pages/about/about-us.module.css delete mode 100644 pages/about/about-us.tsx delete mode 100644 pages/about/index.mdx rename pages/{about-us.module.css => about/index.module.css} (67%) rename pages/{about-us.tsx => about/index.tsx} (86%) diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 042777fa..dd97771b 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -20,12 +20,12 @@ const menu: NavLink[] = [ }, { name: "About", - route: "/about-us", + route: "/about", submenu: [ - // { - // name: "About Us", - // route: "/about/about-us", - // }, + { + name: "About Us", + route: "/about", + }, { name: "Meet the Team", route: "/about/team", diff --git a/content/about-us.mdx b/content/about/index.mdx similarity index 97% rename from content/about-us.mdx rename to content/about/index.mdx index dfbcdbb6..bcc84a81 100644 --- a/content/about-us.mdx +++ b/content/about/index.mdx @@ -1,5 +1,3 @@ -import {SocialLinks} from "../components/SocialLinks"; -
    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. diff --git a/content/our-supporters.mdx b/content/about/our-supporters.mdx similarity index 100% rename from content/our-supporters.mdx rename to content/about/our-supporters.mdx diff --git a/pages/about/about-us.module.css b/pages/about/about-us.module.css deleted file mode 100644 index 34654e16..00000000 --- a/pages/about/about-us.module.css +++ /dev/null @@ -1,73 +0,0 @@ -.title { - color: var(--purple-2); - font-size: 48px; - position: relative; - bottom: -160px; -} - -.headings { - color: var(--blue-2); - font-size: 24px; - margin-top: 5rem; -} - -.headings li { - font-size: 16px; - color: black; -} - -.text { - font-size: 16px; - color: black; -} - -.title, -.bubble > * { - margin: 2rem auto; - max-width: calc(806rem / 16); - padding: 0 calc(60rem / 16); -} - -.bubble { - padding: calc(48rem / 16) 0 calc(48rem / 16); - margin: calc(16rem / 16) 0; -} - -/*box-sizing: border box*/ -.bubble:nth-child(odd) { - background-color: #e1eefa; -} - -.codey { - transform: rotate(1.91deg); - position: relative; - left: 600px; - margin-bottom: -280px; - z-index: -1; -} - -.mailingList { - margin: 2rem auto; - max-width: calc(806rem / 16); - padding: 0 calc(60rem / 16); -} - -.mailingList form > * { - margin: 0.5rem auto; -} - -.mailingList form input { - border-radius: 16px; - padding: calc(8rem / 16) 0; -} - -.mailingList form input[type="text"] { - /*temporary hard coding of font*/ - font-family: Poppins; - font-style: normal; - padding: 0 calc(8rem / 16); -} - -.mailingList h2 { - color: var(--blue-2); -} diff --git a/pages/about/about-us.tsx b/pages/about/about-us.tsx deleted file mode 100644 index 9c3b9dc3..00000000 --- a/pages/about/about-us.tsx +++ /dev/null @@ -1,205 +0,0 @@ -import React, { HTMLAttributes } from "react"; -import { MDXProvider } from "@mdx-js/react"; -import Content from "../../content/about-us.mdx"; -import styles from "./about-us.module.css"; -import { Button } from "../../components/Button"; - -export default function AboutUs() { - return ( - -

    About Us!

    -
    {AboutUsCodey()}
    -
    - -
    -
    -

    Join our Mailing List!

    -
    -
    - -
    -
    - -
    - -
    -
    -     - ); -} - -/*to be replaced by css rules in about-us.module.css*/ -function H2(props: HTMLAttributes) { - return

    ; -} - -function Text(props: HTMLAttributes) { - return

    ; -} - -function Div(props: HTMLAttributes) { - return

    ; -} - -function AboutUsCodey() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/pages/about/index.mdx b/pages/about/index.mdx deleted file mode 100644 index abfeb232..00000000 --- a/pages/about/index.mdx +++ /dev/null @@ -1 +0,0 @@ -# About Us page diff --git a/pages/about-us.module.css b/pages/about/index.module.css similarity index 67% rename from pages/about-us.module.css rename to pages/about/index.module.css index 413a59ad..d9be4a5e 100644 --- a/pages/about-us.module.css +++ b/pages/about/index.module.css @@ -25,40 +25,17 @@ .bubble > * { margin: 2rem auto; max-width: calc(806rem / 16); - padding: 0 calc(60rem / 16); } .bubble { - padding: calc(48rem / 16) 0 calc(48rem / 16); + padding: calc(36rem / 16) 0; margin: calc(16rem / 16) 0; /* border-radius: 20rem; */ } /*box-sizing: border box*/ -/* .bubble:nth-child(odd) { - background-color: #e1eefa; - background: no-repeat url(/about/hotdog.svg); - background-size: contain; - background-position: right center; -} */ - -/*styling hotdogs*/ -.bubble:nth-child(1) { - background: no-repeat url(/about/hotdog.svg); - background-size: contain; - background-position: left center; -} - -.bubble:nth-child(3) { - background: no-repeat url(/about/hotdog.svg); - background-size: cover; - background-position: left center; -} - -.bubble:nth-child(5) { - background: no-repeat url(/about/hotdog.svg); - background-size: cover; - background-position: left center; +.bubble:nth-child(odd) { + background-color: #e1eefa; } .codey { diff --git a/pages/about-us.tsx b/pages/about/index.tsx similarity index 86% rename from pages/about-us.tsx rename to pages/about/index.tsx index b181d67b..aca52e05 100644 --- a/pages/about-us.tsx +++ b/pages/about/index.tsx @@ -1,10 +1,10 @@ import React, { HTMLAttributes } from "react"; import { MDXProvider } from "@mdx-js/react"; -import { Image } from "../components/Image"; -import Content from "../content/about-us.mdx"; -import styles from "./about-us.module.css"; -import { Button } from "../components/Button"; -import { SocialLinks } from "../components/SocialLinks"; +import { Image } from "../../components/Image"; +import Content from "../../content/about/index.mdx"; +import styles from "./index.module.css"; +import { Button } from "../../components/Button"; +import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx index dc79825b..59ed255c 100644 --- a/pages/about/our-supporters.tsx +++ b/pages/about/our-supporters.tsx @@ -1,7 +1,7 @@ import { MDXProvider } from "@mdx-js/react"; import React, { HTMLAttributes } from "react"; import { Image } from "../../components/Image"; -import Content from "../../content/our-supporters.mdx"; +import Content from "../../content/about/our-supporters.mdx"; import styles from "./our-supporters.module.css"; export default function OurSupporters() { -- 2.39.2 From 1381465facf147d8ddba37a19b064e65e7d1a434 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Thu, 1 Jul 2021 20:49:02 -0400 Subject: [PATCH 07/17] created Bubble component --- components/Bubble.module.css | 13 +++++++++ components/Bubble.tsx | 10 +++++++ content/about/index.mdx | 14 +++++----- pages/about/index.module.css | 36 ++++++++++++++++--------- pages/about/index.tsx | 52 +++++++++++++++++------------------- 5 files changed, 80 insertions(+), 45 deletions(-) create mode 100644 components/Bubble.module.css create mode 100644 components/Bubble.tsx diff --git a/components/Bubble.module.css b/components/Bubble.module.css new file mode 100644 index 00000000..700f72ac --- /dev/null +++ b/components/Bubble.module.css @@ -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); +} diff --git a/components/Bubble.tsx b/components/Bubble.tsx new file mode 100644 index 00000000..5327859c --- /dev/null +++ b/components/Bubble.tsx @@ -0,0 +1,10 @@ +import React, { ReactNode } from "react"; +import styles from "./Bubble.module.css"; + +export default function Bubble(props: { children: React.ReactNode }) { + return {props.children} ; +} + +function DefaultLayout(props: { children: React.ReactNode }) { + return
    {props.children}
    ; +} diff --git a/content/about/index.mdx b/content/about/index.mdx index bcc84a81..3851b8c4 100644 --- a/content/about/index.mdx +++ b/content/about/index.mdx @@ -1,8 +1,10 @@ -
    +import Bubble from "./../../components/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. -
    +
    @@ -16,7 +18,7 @@ CS Club is working towards bridging the gap between each and every CS student, t
    -
    + ## 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. -
    +
    @@ -34,7 +36,7 @@ The CS Club team is devoted to providing you with all the resources you could ne
    -
    + ## Our Office @@ -53,6 +55,6 @@ Canada Our office phone number is (519) 888-4567 x33870. -
    + diff --git a/pages/about/index.module.css b/pages/about/index.module.css index d9be4a5e..9dba3d02 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -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 > * { diff --git a/pages/about/index.tsx b/pages/about/index.tsx index aca52e05..25cfb77e 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -12,30 +12,32 @@ export default function AboutUs() {

    About Us!

    -
    +
    -
    - -
    -
    -

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

    - -

    Send feedback through our Feedback Form

    -

    Join our Mailing List!

    -
    -
    - -
    -
    - -
    - -
    +
    +
    + +
    +
    +

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

    + +

    Send feedback through our Feedback Form

    +

    Join our Mailing List!

    +
    +
    + +
    +
    + +
    + +
    +
    ); @@ -51,9 +53,5 @@ function Text(props: HTMLAttributes) { } function Div(props: HTMLAttributes) { - return
    ; + return
    ; } - -// function AboutUsCodey() { -// return ; -// } -- 2.39.2 From 9f50614ec308122bcc7a40a09e2a3ca1f187f2fb Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Thu, 1 Jul 2021 21:14:01 -0400 Subject: [PATCH 08/17] mobile styling applied --- pages/about/index.module.css | 33 ++++++++++++++++++++------------- pages/about/index.tsx | 2 +- 2 files changed, 21 insertions(+), 14 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index 9dba3d02..6310e88b 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,8 +1,6 @@ .title { color: var(--purple-2); font-size: 48px; - position: relative; - bottom: -160px; } .headings { @@ -45,16 +43,23 @@ } .flexBox { + position: relative; display: flex; flex-direction: row; justify-content: flex-end; + margin-bottom: -240px; +} + +.flexBoxTitle { + position: relative; + display: flex; + flex-direction: row; + right: 280px; + bottom: -200px; } .codey { transform: rotate(1.91deg); - /* position: relative; - left: calc(400rem / 16); - margin-bottom: -280px; */ z-index: -1; } @@ -82,6 +87,7 @@ .mailingList h2 { color: var(--blue-2); + font-size: 24px; } @media only screen and (max-width: calc(768rem / 16)) { @@ -89,18 +95,19 @@ background-color: #e1eefa; } - .title { - color: var(--purple-2); - font-size: 48px; + .flexBoxTitle { + position: relative; display: flex; + flex-direction: row; justify-content: center; + right: 0px; + bottom: 0px; } - .codey { - transform: rotate(1.91deg); + .flexBox { position: relative; - right: calc(1020rem / 16); - margin-bottom: -280px; - z-index: -1; + display: flex; + flex-direction: row; + justify-content: center; } } diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 25cfb77e..78a11ba7 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -9,7 +9,7 @@ import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( -
    +

    About Us!

    -- 2.39.2 From c94448f6abf2c06327ff46f96331d3b8a997f3ee Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Fri, 2 Jul 2021 21:56:07 -0400 Subject: [PATCH 09/17] cleaned up some of css file --- pages/about/index.module.css | 23 ++++---------- pages/about/index.tsx | 59 +++++++++++++++--------------------- 2 files changed, 31 insertions(+), 51 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index 6310e88b..b6bc5e5d 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,28 +1,21 @@ .title { color: var(--purple-2); font-size: 48px; + margin: 2rem auto; + max-width: calc(806rem / 16); } -.headings { +.headings h2 { color: var(--blue-2); font-size: 24px; } -.headings li { +.text, +.text li { font-size: 16px; color: black; } -.text { - font-size: 16px; - color: black; -} - -.title { - margin: 2rem auto; - max-width: calc(806rem / 16); -} - .divs { margin-top: 4rem; } @@ -38,10 +31,6 @@ background-color: #e1eefa; } */ -.content { - margin: auto; -} - .flexBox { position: relative; display: flex; @@ -63,10 +52,10 @@ z-index: -1; } +/*for temp mailing list components*/ .mailingList { margin: 4rem auto; max-width: calc(806rem / 16); - /* padding: 0 calc(60rem / 16); */ } .mailingList form > * { diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 78a11ba7..97d5fdda 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -8,50 +8,41 @@ import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( - +

    About Us!

    -
    -
    +
    +
    -
    -

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

    - -

    Send feedback through our Feedback Form

    -

    Join our Mailing List!

    -
    -
    - -
    -
    - -
    - -
    -
    - +
    +

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

    + +

    Send feedback through our Feedback Form

    +

    Join our Mailing List!

    +
    +
    + +
    +
    + +
    + +
    +
    + ); } -/*to be replaced by css rules in about-us.module.css*/ -function H2(props: HTMLAttributes) { - return

    ; -} - -function Text(props: HTMLAttributes) { - return

    ; -} - -function Div(props: HTMLAttributes) { - return

    ; +function DefaultLayout(props: { children: React.ReactNode }) { + return
    {props.children}
    ; } -- 2.39.2 From da586414727b052385a683a6f94fb57ee7d6c70d Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 4 Jul 2021 11:58:26 -0400 Subject: [PATCH 10/17] blue bubble styling spans entire width of screen --- pages/about/index.module.css | 8 +++----- pages/about/index.tsx | 11 +++++------ 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index b6bc5e5d..5525bc66 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -16,11 +16,7 @@ color: black; } -.divs { - margin-top: 4rem; -} - -.divs > * { +.text > * { margin: 2rem auto; max-width: calc(806rem / 16); } @@ -32,6 +28,8 @@ } */ .flexBox { + margin: 2rem auto; + max-width: calc(806rem / 16); position: relative; display: flex; flex-direction: row; diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 97d5fdda..c5514bb3 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -1,5 +1,4 @@ -import React, { HTMLAttributes } from "react"; -import { MDXProvider } from "@mdx-js/react"; +import React from "react"; import { Image } from "../../components/Image"; import Content from "../../content/about/index.mdx"; import styles from "./index.module.css"; @@ -8,7 +7,7 @@ import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( - +

    About Us!

    @@ -39,10 +38,10 @@ export default function AboutUs() {
    -     +
    ); } -function DefaultLayout(props: { children: React.ReactNode }) { +AboutUs.Layout = function AboutUsLayout(props: { children: React.ReactNode }) { return
    {props.children}
    ; -} +}; -- 2.39.2 From 1c30f4f5f1f77c88d7cbd12b589637c2db047d71 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Sun, 4 Jul 2021 17:40:50 -0400 Subject: [PATCH 11/17] addressed PR comments --- components/Bubble.module.css | 6 ++---- pages/about/index.module.css | 10 ++++------ pages/about/index.tsx | 4 ++-- 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/components/Bubble.module.css b/components/Bubble.module.css index 700f72ac..4bea90a8 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,13 +1,11 @@ .bubble { padding: calc(36rem / 16) 0; margin: calc(64rem / 16) 0; - background-color: #e1eefa; - /* width: 100% !important; */ + background-color: var(--blue-1-20); max-width: 5000px !important; - /* border-radius: 20rem; */ } .bubble > * { margin: 2rem auto; - max-width: calc(806rem / 16); + max-width: calc(800rem / 16); } diff --git a/pages/about/index.module.css b/pages/about/index.module.css index 5525bc66..2ba35dfb 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -10,6 +10,10 @@ font-size: 24px; } +.text { + background-color: white; +} + .text, .text li { font-size: 16px; @@ -21,12 +25,6 @@ max-width: calc(806rem / 16); } -/*box-sizing: border box*/ -/* should not need this after component*/ -/* .bubble:nth-child(odd) { - background-color: #e1eefa; -} */ - .flexBox { margin: 2rem auto; max-width: calc(806rem / 16); diff --git a/pages/about/index.tsx b/pages/about/index.tsx index c5514bb3..b2fa4e9b 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -7,7 +7,7 @@ import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( -
    + <>

    About Us!

    @@ -38,7 +38,7 @@ export default function AboutUs() {
    -

    + ); } -- 2.39.2 From 2435648bdd7a1aacf4447a1668b959d9bf5ecde8 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Wed, 7 Jul 2021 21:35:09 -0400 Subject: [PATCH 12/17] created DefaultLayout component --- components/Bubble.module.css | 5 ++++- components/Bubble.tsx | 13 +++++++------ components/DefaultLayout.module.css | 6 ++++++ components/DefaultLayout.tsx | 6 ++++++ content/about/index.mdx | 8 ++++---- pages/_app.module.css | 7 ------- pages/_app.tsx | 5 +---- pages/about/index.module.css | 6 +----- 8 files changed, 29 insertions(+), 27 deletions(-) create mode 100644 components/DefaultLayout.module.css create mode 100644 components/DefaultLayout.tsx diff --git a/components/Bubble.module.css b/components/Bubble.module.css index 4bea90a8..f6d094b6 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,11 +1,14 @@ .bubble { padding: calc(36rem / 16) 0; margin: calc(64rem / 16) 0; +} + +.bubble:nth-child(odd) { background-color: var(--blue-1-20); - max-width: 5000px !important; } .bubble > * { margin: 2rem auto; max-width: calc(800rem / 16); + padding: 0 calc(24rem / 16); } diff --git a/components/Bubble.tsx b/components/Bubble.tsx index 5327859c..39d7094b 100644 --- a/components/Bubble.tsx +++ b/components/Bubble.tsx @@ -1,10 +1,11 @@ -import React, { ReactNode } from "react"; +import React from "react"; +import { DefaultLayout } from "./DefaultLayout"; import styles from "./Bubble.module.css"; export default function Bubble(props: { children: React.ReactNode }) { - return {props.children} ; -} - -function DefaultLayout(props: { children: React.ReactNode }) { - return
    {props.children}
    ; + return ( +
    + {props.children} +
    + ); } diff --git a/components/DefaultLayout.module.css b/components/DefaultLayout.module.css new file mode 100644 index 00000000..31cadd0b --- /dev/null +++ b/components/DefaultLayout.module.css @@ -0,0 +1,6 @@ +.defaultLayout { + margin: 0 auto; + max-width: calc(800rem / 16); + padding: 0 calc(20rem / 16); + padding-bottom: calc(20rem / 16); +} diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx new file mode 100644 index 00000000..1cc4fb4f --- /dev/null +++ b/components/DefaultLayout.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import styles from "./DefaultLayout.module.css"; + +export function DefaultLayout(props: { children: React.ReactNode }) { + return
    {props.children}
    ; +} diff --git a/content/about/index.mdx b/content/about/index.mdx index 3851b8c4..a1e16f39 100644 --- a/content/about/index.mdx +++ b/content/about/index.mdx @@ -6,7 +6,7 @@ CS Club is working towards bridging the gap between each and every CS student, t -
    + ## Our Vision @@ -16,7 +16,7 @@ CS Club is working towards bridging the gap between each and every CS student, t 3. Community: Encouraging interpersonal relationships through community building and social events for all computing students. -
    + @@ -28,13 +28,13 @@ By recreating what CS Club means for our community, we're passionate about helpi -
    + ## Our Mission The CS Club team is devoted to providing you with all the resources you could need as a student. We want to create a community that members can call home, to make it a place where you can reach out for career advice, for academic help, or even just to socialize. To fulfil this mission, we'll be running events and initiatives throughout the term, so please check out our Events page to stay updated! -
    + diff --git a/pages/_app.module.css b/pages/_app.module.css index c545d6e9..a9bb4d65 100644 --- a/pages/_app.module.css +++ b/pages/_app.module.css @@ -10,10 +10,3 @@ .contentContainer { flex-grow: 1; } - -.defaultLayout { - margin: 0 auto; - max-width: calc(800rem / 16); - padding: 0 calc(20rem / 16); - padding-bottom: calc(20rem / 16); -} diff --git a/pages/_app.tsx b/pages/_app.tsx index f897db09..4d14cc39 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from "../components/theme"; import { Navbar } from "../components/Navbar"; import { Footer } from "../components/Footer"; import { Link } from "../components/Link"; +import { DefaultLayout } from "../components/DefaultLayout"; import styles from "./_app.module.css"; import "./_app.css"; @@ -32,10 +33,6 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { ); } -function DefaultLayout(props: { children: React.ReactNode }) { - return
    {props.children}
    ; -} - type PageComponent = NextComponentType< NextPageContext, unknown, diff --git a/pages/about/index.module.css b/pages/about/index.module.css index 2ba35dfb..9155b935 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -20,11 +20,6 @@ color: black; } -.text > * { - margin: 2rem auto; - max-width: calc(806rem / 16); -} - .flexBox { margin: 2rem auto; max-width: calc(806rem / 16); @@ -74,6 +69,7 @@ color: var(--blue-2); font-size: 24px; } +/*for temp mailing list components*/ @media only screen and (max-width: calc(768rem / 16)) { .bubble:nth-child(odd) { -- 2.39.2 From 7e2c4114c98b8682fb6c11497082886efed406f9 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Wed, 7 Jul 2021 22:17:59 -0400 Subject: [PATCH 13/17] cleaned up flexbox styling for About Us title and Codey --- components/Bubble.module.css | 7 ----- pages/about/index.module.css | 52 +++++++++++++----------------------- pages/about/index.tsx | 4 +-- 3 files changed, 19 insertions(+), 44 deletions(-) diff --git a/components/Bubble.module.css b/components/Bubble.module.css index f6d094b6..3e0fc144 100644 --- a/components/Bubble.module.css +++ b/components/Bubble.module.css @@ -1,14 +1,7 @@ .bubble { padding: calc(36rem / 16) 0; - margin: calc(64rem / 16) 0; } .bubble:nth-child(odd) { background-color: var(--blue-1-20); } - -.bubble > * { - margin: 2rem auto; - max-width: calc(800rem / 16); - padding: 0 calc(24rem / 16); -} diff --git a/pages/about/index.module.css b/pages/about/index.module.css index 9155b935..ee2deffb 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,8 +1,8 @@ .title { color: var(--purple-2); font-size: 48px; - margin: 2rem auto; - max-width: calc(806rem / 16); + height: 80px; + margin-top: auto; } .headings h2 { @@ -20,27 +20,21 @@ color: black; } -.flexBox { - margin: 2rem auto; - max-width: calc(806rem / 16); - position: relative; +.titleContainer { display: flex; flex-direction: row; - justify-content: flex-end; - margin-bottom: -240px; -} - -.flexBoxTitle { - position: relative; - display: flex; - flex-direction: row; - right: 280px; - bottom: -200px; + justify-content: space-between; + align-items: flex-start; + max-width: calc(800rem / 16); + margin: 0 auto; + overflow-y: clip; + height: 200px; } .codey { transform: rotate(1.91deg); z-index: -1; + height: 400px; } /*for temp mailing list components*/ @@ -71,24 +65,14 @@ } /*for temp mailing list components*/ -@media only screen and (max-width: calc(768rem / 16)) { - .bubble:nth-child(odd) { - background-color: #e1eefa; - } - - .flexBoxTitle { - position: relative; +@media only screen and (max-width: calc(836rem / 16)) { + .titleContainer { display: flex; - flex-direction: row; - justify-content: center; - right: 0px; - bottom: 0px; - } - - .flexBox { - position: relative; - display: flex; - flex-direction: row; - justify-content: center; + flex-direction: column; + align-items: center; + max-width: calc(800rem / 16); + margin: 0 auto; + overflow-y: clip; + height: 300px; } } diff --git a/pages/about/index.tsx b/pages/about/index.tsx index b2fa4e9b..f3fca358 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -8,10 +8,8 @@ import { SocialLinks } from "../../components/SocialLinks"; export default function AboutUs() { return ( <> -
    +

    About Us!

    -
    -
    -- 2.39.2 From be069bd450cebb29efced4489c21391809c75260 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Tue, 13 Jul 2021 00:40:01 -0400 Subject: [PATCH 14/17] fixed styling discrepencies --- content/about/index.mdx | 71 +++++++++++++++++++++++++++++------------ 1 file changed, 50 insertions(+), 21 deletions(-) diff --git a/content/about/index.mdx b/content/about/index.mdx index a1e16f39..2c592309 100644 --- a/content/about/index.mdx +++ b/content/about/index.mdx @@ -2,58 +2,87 @@ import Bubble from "./../../components/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. -## Our Vision +## Our Vision -1. Academic: Promoting the knowledge and interest of Computer Science, as well as supporting students throughout their academic experiences. +1. Academic: Promoting the knowledge and interest of Computer Science, as well +as supporting students throughout their academic experiences. -2. Career: Providing career guidance and resources to help students gain experience and knowledge for their own job search. +2. Career: Providing career guidance and resources to help students gain +experience and knowledge for their own job search. -3. Community: Encouraging interpersonal relationships through community building and social events for all computing students. +3. Community: Encouraging interpersonal relationships through community building +and social events for all computing students. -## Our Story +## Our Story -We are students ourselves, coming from all computing backgrounds — Computer Science, Software Engineering, CFM, Mechatronics Engineering, and more. CS Club was born from an unfulfilled need; we felt that although there are so many students at UW that are interested in CS, there wasn't a proper support network in place. We lacked the cohorts provided to engineers, and we felt disconnected from one another. +We are students ourselves, coming from all computing backgrounds — +Computer Science, Software Engineering, CFM, Mechatronics Engineering, and more. +CS Club was born from an unfulfilled need; we felt that although there are so +many students at UW that are interested in CS, there wasn't a proper support +network in place. We lacked the cohorts provided to engineers, and we felt +disconnected from one another. -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. -## Our Mission +## Our Mission -The CS Club team is devoted to providing you with all the resources you could need as a student. We want to create a community that members can call home, to make it a place where you can reach out for career advice, for academic help, or even just to socialize. To fulfil this mission, we'll be running events and initiatives throughout the term, so please check out our Events page to stay updated! +The CS Club team is devoted to providing you with all the resources you could +need as a student. We want to create a community that members can call home, to +make it a place where you can reach out for career advice, for academic help, or +even just to socialize. To fulfil this mission, we'll be running events and +initiatives throughout the term, so please check out our [Events](/events/current) +page to stay updated! -## Our Office +## Our Office -The CS Club office is located at room MC 3036/3037, in the Math and Computer Building of the University of Waterloo. -- An office favorite is our $0.50 pop for members. We have a fridge in the office which is stocked with many different kinds of pop. -- We have lots of informative books, 5 computer terminals, and an array of knowledgeable people to talk to. +The CS Club office is located at room **MC 3036/3037**, in the Math & Computer +Building of the University of Waterloo. -Come visit us on campus in our office! Meet new members and find out what’s new in the club +- An office favorite is our $0.50 pop for members. We have a fridge in the +office which is stocked with many different kinds of pop. +- We have lots of informative books, 5 computer terminals, and an array of +knowledgeable people to talk to. -Computer Science Club -Math & Computer 3036/3037 -University of Waterloo -200 University Avenue West -Waterloo, ON N2L 3G1 +Come visit us on campus in our office! Meet new members and find out what's new +in the club. + +
    + +Computer Science Club
    +Math & Computer 3036/3037
    +University of Waterloo
    +200 University Avenue West
    +Waterloo, ON N2L 3G1
    Canada -Our office phone number is (519) 888-4567 x33870. +Our office phone number is [(519) 888-4567 x33870](tel:+15198884567,33870) + +
     -- 2.39.2 From 036a12d3c5264119eba079e137f6d5e8064cdc9b Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Tue, 13 Jul 2021 00:41:06 -0400 Subject: [PATCH 15/17] fixed styling discrepencies --- pages/about/index.module.css | 46 ++++++++++++++++++++++++++++++++---- pages/about/index.tsx | 2 +- 2 files changed, 42 insertions(+), 6 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index ee2deffb..b44a9667 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -3,11 +3,16 @@ font-size: 48px; height: 80px; margin-top: auto; + padding-left: 20px; +} + +.title::after { + content: " Us!"; } .headings h2 { - color: var(--blue-2); - font-size: 24px; + color: var(--purple-2); + font-weight: 600; } .text { @@ -20,6 +25,10 @@ color: black; } +.text span { + color: var(--blue-2); +} + .titleContainer { display: flex; flex-direction: row; @@ -28,6 +37,7 @@ max-width: calc(800rem / 16); margin: 0 auto; overflow-y: clip; + overflow-x: clip; height: 200px; } @@ -61,11 +71,10 @@ .mailingList h2 { color: var(--blue-2); - font-size: 24px; } /*for temp mailing list components*/ -@media only screen and (max-width: calc(836rem / 16)) { +@media only screen and (max-width: calc(768rem / 16)) { .titleContainer { display: flex; flex-direction: column; @@ -73,6 +82,33 @@ max-width: calc(800rem / 16); margin: 0 auto; overflow-y: clip; - height: 300px; + height: 130px; + } + + .headings h2 { + font-size: 24px; + } + + .title { + font-size: 24px; + font-weight: 600; + } + + .title::after { + content: ""; + } + + .codey { + width: 140.21px; + height: 124.65px; + padding-left: 48px; + } + + .text ul { + padding-left: 20px; + } + + .text ol { + padding-left: 16px; } } diff --git a/pages/about/index.tsx b/pages/about/index.tsx index f3fca358..80e140bb 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -9,7 +9,7 @@ export default function AboutUs() { return ( <>
    -

    About Us!

    +

    About

    -- 2.39.2 From fe4ecba4cacb68105559aa763a5152e3a171ad51 Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Tue, 13 Jul 2021 00:47:29 -0400 Subject: [PATCH 16/17] mobile title is About Us! and title and Codey are properly centered in mobile styling --- pages/about/index.module.css | 11 ++--------- pages/about/index.tsx | 2 +- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index b44a9667..fe483a9a 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -6,10 +6,6 @@ padding-left: 20px; } -.title::after { - content: " Us!"; -} - .headings h2 { color: var(--purple-2); font-weight: 600; @@ -92,16 +88,13 @@ .title { font-size: 24px; font-weight: 600; - } - - .title::after { - content: ""; + padding-left: 0px; } .codey { width: 140.21px; height: 124.65px; - padding-left: 48px; + padding-left: 30px; } .text ul { diff --git a/pages/about/index.tsx b/pages/about/index.tsx index 80e140bb..f3fca358 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -9,7 +9,7 @@ export default function AboutUs() { return ( <>
    -

    About

    +

    About Us!

    -- 2.39.2 From c5168090947124d8d7a8429ce9d538c05a06adca Mon Sep 17 00:00:00 2001 From: Linna Luo Date: Tue, 13 Jul 2021 10:13:25 -0400 Subject: [PATCH 17/17] addressed PR comments --- pages/about/index.module.css | 71 +++++++++++++++++------------------- pages/about/index.tsx | 6 +-- 2 files changed, 35 insertions(+), 42 deletions(-) diff --git a/pages/about/index.module.css b/pages/about/index.module.css index fe483a9a..cedde708 100644 --- a/pages/about/index.module.css +++ b/pages/about/index.module.css @@ -1,27 +1,22 @@ .title { color: var(--purple-2); - font-size: 48px; - height: 80px; + font-size: calc(48rem / 16); + height: calc(80rem / 16); margin-top: auto; - padding-left: 20px; + padding-left: calc(20rem / 16); } -.headings h2 { +.content { + color: black; + background-color: white; +} + +.content h2 { color: var(--purple-2); font-weight: 600; } -.text { - background-color: white; -} - -.text, -.text li { - font-size: 16px; - color: black; -} - -.text span { +.content span { color: var(--blue-2); } @@ -34,27 +29,27 @@ margin: 0 auto; overflow-y: clip; overflow-x: clip; - height: 200px; + height: calc(200rem / 16); } .codey { transform: rotate(1.91deg); z-index: -1; - height: 400px; + height: calc(400rem / 16); } /*for temp mailing list components*/ .mailingList { - margin: 4rem auto; + margin: calc(4rem / 16) auto; max-width: calc(806rem / 16); } .mailingList form > * { - margin: 0.5rem auto; + margin: calc(0.5rem / 16) auto; } .mailingList form input { - border-radius: 16px; + border-radius: calc(16rem / 16); padding: calc(8rem / 16) 0; } @@ -78,30 +73,30 @@ max-width: calc(800rem / 16); margin: 0 auto; overflow-y: clip; - height: 130px; - } - - .headings h2 { - font-size: 24px; + height: calc(130rem / 16); } .title { - font-size: 24px; + font-size: calc(24rem / 16); font-weight: 600; - padding-left: 0px; + padding-left: calc(0rem / 16); + } + + .content h2 { + font-size: calc(24rem / 16); + } + + .content ul { + padding-left: calc(20rem / 16); + } + + .content ol { + padding-left: calc(16rem / 16); } .codey { - width: 140.21px; - height: 124.65px; - padding-left: 30px; - } - - .text ul { - padding-left: 20px; - } - - .text ol { - padding-left: 16px; + width: calc(140.21rem / 16); + height: calc(124.65rem / 16); + padding-left: calc(30rem / 16); } } diff --git a/pages/about/index.tsx b/pages/about/index.tsx index f3fca358..2cb13ffd 100644 --- a/pages/about/index.tsx +++ b/pages/about/index.tsx @@ -12,10 +12,8 @@ export default function AboutUs() {

    About Us!

    -
    -
    - -
    +
    +

    Connect with us!

    -- 2.39.2