Merge branch 'main' into feat/mobile-mini-event-card
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
merge feat/mobile-mini-event-card with main branch
This commit is contained in:
commit
97cc93daeb
|
@ -2,7 +2,6 @@
|
|||
color: var(--blue-2);
|
||||
font-weight: 600;
|
||||
font-size: calc(36rem / 16);
|
||||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
.socialLinks {
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
color: var(--blue-2);
|
||||
font-weight: 600;
|
||||
font-size: calc(36rem / 16);
|
||||
margin-bottom: calc(12rem / 16);
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue