diff --git a/components/ConnectWithUs.tsx b/components/ConnectWithUs.tsx
index 21097db5..4431f42d 100644
--- a/components/ConnectWithUs.tsx
+++ b/components/ConnectWithUs.tsx
@@ -5,17 +5,17 @@ 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
-
- >
+ Send feedback through our
Feedback Form
+
+
);
}
diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css
index d97883d7..a5b30a6f 100644
--- a/components/EmailSignup.module.css
+++ b/components/EmailSignup.module.css
@@ -12,50 +12,7 @@
margin: 0 0 calc(21rem / 16) 0;
}
-.form input {
- display: block;
- width: 100%;
- margin: calc(21rem / 16) 0;
-
- box-sizing: border-box;
- border: 0;
- border-radius: calc(20rem / 16);
-
- background-color: var(--grey-24);
-}
-
-.form input::placeholder {
- color: var(--grey);
- font-weight: 700;
-}
-
-.form input[type="text"],
-.form input[type="email"] {
- padding: calc(10rem / 16) calc(31rem / 16);
- font-family: Poppins;
-
- font-size: calc(18rem / 16);
- line-height: calc(30rem / 16);
- color: var(--dark-grey);
-}
-
-.form 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);
-}
-
.button {
margin-top: calc(34rem / 16);
+ display: block;
}
-
-/* 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/EmailSignup.tsx b/components/EmailSignup.tsx
index b16d3280..66630791 100644
--- a/components/EmailSignup.tsx
+++ b/components/EmailSignup.tsx
@@ -1,18 +1,16 @@
import React from "react";
import styles from "./EmailSignup.module.css";
import { Button } from "./Button";
+import { Input } from "./Input";
export function EmailSignup() {
return (
);
diff --git a/components/Input.module.css b/components/Input.module.css
new file mode 100644
index 00000000..9ace06a8
--- /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(31rem / 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/pages/_app.css b/pages/_app.css
index 5d3df978..3d6a41ce 100644
--- a/pages/_app.css
+++ b/pages/_app.css
@@ -13,9 +13,10 @@ body {
--purple-1: #525284;
--purple-2: #2a2a62;
--black: #000000;
- --grey: #bbbbbb;
- --grey-24: rgba(196, 196, 196, 0.24);
- --dark-grey: #6b6b6b;
+ --grey-1: #c4c4c4;
+ --grey-1-24: #c4c4c440;
+ --grey-2: #bbbbbb;
+ --grey-3: #6b6b6b;
--red: #9f616a;
--gradient-blue-green: linear-gradient(
99.94deg,
@@ -81,3 +82,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 e6a13c06..a135a488 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.module.css b/pages/get-involved.module.css
index c2d80824..37703dba 100644
--- a/pages/get-involved.module.css
+++ b/pages/get-involved.module.css
@@ -6,12 +6,12 @@
.headerText h1 {
color: var(--purple-2);
- margin: 0 0 0.5rem 0;
+ margin: 0 0 calc(8rem / 16) 0;
}
.headerText p {
color: var(--black);
- margin: 0 0 1.375rem 0;
+ margin: 0 0 calc(22rem / 16) 0;
}
.codey {
@@ -21,7 +21,7 @@
.content {
margin-top: calc(32rem / 16);
- margin-bottom: calc(52.77rem / 16);
+ margin-bottom: calc(52rem / 16);
}
.content h2 {
@@ -34,11 +34,7 @@
font-weight: 600;
color: var(--purple-2);
margin-top: calc(30rem / 16);
- margin-bottom: calc(15rem / 16);
-}
-
-.content p {
- margin: 0;
+ margin-bottom: 1rem;
}
.connectWithUs {
@@ -46,12 +42,13 @@
}
.emailSignup {
- margin-bottom: calc(57.81rem / 16);
+ margin-bottom: calc(58rem / 16);
}
.pageContainer {
- margin-top: calc(172rem / 16);
+ margin-top: calc(50rem / 16);
}
+/* @todo aaaaaa */
@media only screen and (max-width: calc(768rem / 16)) {
}
diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx
index 12c842b9..26c0e2eb 100644
--- a/pages/get-involved.tsx
+++ b/pages/get-involved.tsx
@@ -21,11 +21,11 @@ export default function GetInvolved() {
Programme Committee!
-
+
-
+
-
+
diff --git a/public/images/get-involved-codey.svg b/public/images/get-involved/codey.svg
similarity index 100%
rename from public/images/get-involved-codey.svg
rename to public/images/get-involved/codey.svg
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