diff --git a/components/ConnectWithUs.module.css b/components/ConnectWithUs.module.css index 7733d666..37dbae7a 100644 --- a/components/ConnectWithUs.module.css +++ b/components/ConnectWithUs.module.css @@ -15,3 +15,14 @@ .socialLinks > * { justify-content: left; } + +@media only screen and (max-width: calc(768rem / 16)) { + .header { + font-size: calc(24rem / 16); + line-height: calc(36rem / 16); + margin: 0 0 calc(30rem / 16) 0; + } + .socialLinks { + margin: calc(48rem / 16) calc(-10rem / 16); + } +} diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css index a5b30a6f..f735af35 100644 --- a/components/EmailSignup.module.css +++ b/components/EmailSignup.module.css @@ -16,3 +16,17 @@ margin-top: calc(34rem / 16); display: block; } + +@media only screen and (max-width: calc(768rem / 16)) { + .container > * { + margin: 0 0 calc(15rem / 16) 0; + } + .header { + font-size: calc(24rem / 16); + line-height: calc(36rem / 16); + margin: 0 0 calc(30rem / 16) 0; + } + .button { + margin-top: calc(20rem / 16); + } +} diff --git a/pages/get-involved.module.css b/pages/get-involved.module.css index 37703dba..d43c6d5d 100644 --- a/pages/get-involved.module.css +++ b/pages/get-involved.module.css @@ -14,7 +14,11 @@ margin: 0 0 calc(22rem / 16) 0; } -.codey { +.codeyMobile { + display: none; +} + +.codeyDesktop { align-self: flex-end; justify-self: end; } @@ -51,4 +55,62 @@ /* @todo aaaaaa */ @media only screen and (max-width: calc(768rem / 16)) { + .headerContainer { + display: flex; + flex-direction: column; + align-content: center; + border-bottom: none; + } + + .headerText { + margin-top: calc(8rem / 16); + text-align: center; + } + + .headerText h1 { + color: var(--purple-2); + font-size: calc(24rem / 16); + line-height: calc(36rem / 16); + margin-bottom: (12rem / 16); + } + + .headerText p { + margin: 0; + } + + .codeyMobile { + display: unset; + width: calc(75rem / 16); + align-self: center; + justify-self: flex-start; + } + + .codeyDesktop { + display: none; + } + + .content { + margin: calc(64rem / 16) 0 calc(42rem / 16) 0; + } + + .content h2 { + font-size: calc(24rem / 16); + line-height: calc(36rem / 16); + margin: 0 0 calc(30rem / 16) 0; + } + + .content h3:not(:first-of-type) { + margin: calc(48rem / 16) 0 calc(8rem / 16); + } + + .content p { + margin: 0; + } + + .connectWithUs { + margin-bottom: calc(46rem / 16); + } + .emailSignup { + margin-bottom: calc(104rem / 16); + } } diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx index 26c0e2eb..d628ce09 100644 --- a/pages/get-involved.tsx +++ b/pages/get-involved.tsx @@ -13,6 +13,10 @@ export default function GetInvolved() { return (
+

Get Involved!

@@ -21,7 +25,10 @@ export default function GetInvolved() { Programme Committee!

- +
diff --git a/public/images/get-involved/codey.svg b/public/images/get-involved/codey-desktop.svg similarity index 100% rename from public/images/get-involved/codey.svg rename to public/images/get-involved/codey-desktop.svg diff --git a/public/images/get-involved/codey-mobile.svg b/public/images/get-involved/codey-mobile.svg new file mode 100644 index 00000000..14c1b811 --- /dev/null +++ b/public/images/get-involved/codey-mobile.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +