Merge branch 'main' into feat/mobile-mini-event-card
continuous-integration/drone/push Build is passing Details

merge feat/mobile-mini-event-card with main branch
This commit is contained in:
Linna Luo 2021-07-25 15:08:58 -04:00
commit 97cc93daeb
7 changed files with 56 additions and 74 deletions

View File

@ -2,7 +2,6 @@
color: var(--blue-2);
font-weight: 600;
font-size: calc(36rem / 16);
margin-bottom: calc(12rem / 16);
}
.socialLinks {

View File

@ -6,7 +6,6 @@
color: var(--blue-2);
font-weight: 600;
font-size: calc(36rem / 16);
margin-bottom: calc(12rem / 16);
}
.button {

View File

@ -35,6 +35,10 @@ body {
margin: 0;
}
input {
font-family: "Poppins", "sans-serif";
}
/* FIXME: Dark theme is the same as light theme right now */
.dark {
--white: #ffffff;
@ -67,6 +71,12 @@ h6 {
color: var(--purple-2);
}
h1,
h2 {
margin-top: calc(32rem / 16);
margin-bottom: calc(16rem / 16);
}
h1 {
font-size: calc(48rem / 16);
font-weight: 700;
@ -74,19 +84,45 @@ h1 {
h2 {
font-size: calc(36rem / 16);
font-weight: 700;
font-weight: 600;
}
h3 {
margin-top: calc(24rem / 16);
margin-bottom: calc(16rem / 16);
font-size: calc(24rem / 16);
font-weight: 600;
}
h4 {
margin-top: calc(24rem / 16);
margin-bottom: calc(8rem / 16);
font-size: calc(18rem / 16);
font-weight: 600;
}
input {
font-family: "Poppins", "sans-serif";
p {
margin: 1rem 0;
}
/*
* A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
* We need to make sure that the next item has an 8px margin-top.
*/
h4 + * {
margin-top: calc(8rem / 16);
}
@media only screen and (max-width: calc(768rem / 16)) {
/* h1, h2 = h3 on mobile */
h1,
h2 {
margin-top: calc(24rem / 16);
margin-bottom: calc(16rem / 16);
font-size: calc(24rem / 16);
font-weight: 600;
}
}

View File

@ -1,6 +1,4 @@
.title {
color: var(--purple-2);
font-size: calc(48rem / 16);
height: calc(80rem / 16);
margin-top: auto;
padding-left: calc(20rem / 16);
@ -11,11 +9,6 @@
background-color: white;
}
.content h2 {
color: var(--purple-2);
font-weight: 600;
}
.content span {
color: var(--blue-2);
}
@ -77,13 +70,7 @@
}
.title {
font-size: calc(24rem / 16);
font-weight: 600;
padding-left: calc(0rem / 16);
}
.content h2 {
font-size: calc(24rem / 16);
padding-left: 0;
}
.content ul {
@ -95,8 +82,8 @@
}
.codey {
width: calc(140.21rem / 16);
height: calc(124.65rem / 16);
width: calc(140rem / 16);
height: calc(124rem / 16);
padding-left: calc(30rem / 16);
}
}

View File

@ -8,16 +8,13 @@
.header {
color: var(--purple-2);
font-size: calc(48rem / 16);
margin: 0 1rem 0 0;
text-align: center;
}
.content h2 {
font-weight: 600;
font-size: calc(24rem / 16);
color: var(--blue-2);
margin-top: calc(35rem / 16);
}
@media only screen and (max-width: calc(768rem / 16)) {
@ -27,10 +24,6 @@
border: none;
}
.header {
font-size: calc(24rem / 16);
}
.codey {
width: calc(100rem / 16);
}

View File

@ -1,15 +1,19 @@
.headerContainer {
.page {
margin: calc(50rem / 16) 0;
}
.page > header {
display: flex;
flex-direction: row;
border-bottom: calc(1rem / 16) solid var(--purple-2);
}
.headerText h1 {
.headerText > h1 {
color: var(--purple-2);
margin: 0 0 calc(8rem / 16) 0;
}
.headerText p {
.headerText > p {
color: var(--black);
margin: 0 0 calc(22rem / 16) 0;
}
@ -23,29 +27,13 @@
}
.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;
}
@ -58,20 +46,8 @@
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 {
.page > header {
display: flex;
flex-direction: column-reverse;
align-content: center;
@ -83,13 +59,13 @@
text-align: center;
}
.headerText h1 {
.headerText > h1 {
color: var(--purple-2);
font-size: calc(24rem / 16);
margin-bottom: (12rem / 16);
}
.headerText p {
.headerText > p {
margin: 0;
}
@ -101,12 +77,4 @@
.content h2 {
font-size: calc(24rem / 16);
}
.connectWithUs {
margin-bottom: calc(46rem / 16);
}
.emailSignup {
margin-bottom: calc(104rem / 16);
}
}

View File

@ -7,8 +7,8 @@ import styles from "./get-involved.module.css";
export default function GetInvolved() {
return (
<div className={styles.pageContainer}>
<div className={styles.headerContainer}>
<div className={styles.page}>
<header>
<div className={styles.headerText}>
<h1>Get Involved!</h1>
<p>
@ -17,7 +17,7 @@ export default function GetInvolved() {
</p>
</div>
<Image src="images/get-involved/codey.svg" className={styles.codey} />
</div>
</header>
<main className={styles.content}>
<Content />
</main>