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);
|
color: var(--blue-2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: calc(36rem / 16);
|
font-size: calc(36rem / 16);
|
||||||
margin-bottom: calc(12rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.socialLinks {
|
.socialLinks {
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: calc(36rem / 16);
|
font-size: calc(36rem / 16);
|
||||||
margin-bottom: calc(12rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
|
|
@ -35,6 +35,10 @@ body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
font-family: "Poppins", "sans-serif";
|
||||||
|
}
|
||||||
|
|
||||||
/* FIXME: Dark theme is the same as light theme right now */
|
/* FIXME: Dark theme is the same as light theme right now */
|
||||||
.dark {
|
.dark {
|
||||||
--white: #ffffff;
|
--white: #ffffff;
|
||||||
|
@ -67,6 +71,12 @@ h6 {
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2 {
|
||||||
|
margin-top: calc(32rem / 16);
|
||||||
|
margin-bottom: calc(16rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: calc(48rem / 16);
|
font-size: calc(48rem / 16);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
@ -74,19 +84,45 @@ h1 {
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: calc(36rem / 16);
|
font-size: calc(36rem / 16);
|
||||||
font-weight: 700;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
margin-top: calc(24rem / 16);
|
||||||
|
margin-bottom: calc(16rem / 16);
|
||||||
|
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
|
margin-top: calc(24rem / 16);
|
||||||
|
margin-bottom: calc(8rem / 16);
|
||||||
|
|
||||||
font-size: calc(18rem / 16);
|
font-size: calc(18rem / 16);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
p {
|
||||||
font-family: "Poppins", "sans-serif";
|
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 {
|
.title {
|
||||||
color: var(--purple-2);
|
|
||||||
font-size: calc(48rem / 16);
|
|
||||||
height: calc(80rem / 16);
|
height: calc(80rem / 16);
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-left: calc(20rem / 16);
|
padding-left: calc(20rem / 16);
|
||||||
|
@ -11,11 +9,6 @@
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h2 {
|
|
||||||
color: var(--purple-2);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content span {
|
.content span {
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
}
|
}
|
||||||
|
@ -77,13 +70,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: calc(24rem / 16);
|
padding-left: 0;
|
||||||
font-weight: 600;
|
|
||||||
padding-left: calc(0rem / 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.content h2 {
|
|
||||||
font-size: calc(24rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content ul {
|
.content ul {
|
||||||
|
@ -95,8 +82,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
width: calc(140.21rem / 16);
|
width: calc(140rem / 16);
|
||||||
height: calc(124.65rem / 16);
|
height: calc(124rem / 16);
|
||||||
padding-left: calc(30rem / 16);
|
padding-left: calc(30rem / 16);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,16 +8,13 @@
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-size: calc(48rem / 16);
|
|
||||||
margin: 0 1rem 0 0;
|
margin: 0 1rem 0 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h2 {
|
.content h2 {
|
||||||
font-weight: 600;
|
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
color: var(--blue-2);
|
color: var(--blue-2);
|
||||||
margin-top: calc(35rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
@ -27,10 +24,6 @@
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
font-size: calc(24rem / 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codey {
|
.codey {
|
||||||
width: calc(100rem / 16);
|
width: calc(100rem / 16);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,19 @@
|
||||||
.headerContainer {
|
.page {
|
||||||
|
margin: calc(50rem / 16) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page > header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
border-bottom: calc(1rem / 16) solid var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText h1 {
|
.headerText > h1 {
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
margin: 0 0 calc(8rem / 16) 0;
|
margin: 0 0 calc(8rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText p {
|
.headerText > p {
|
||||||
color: var(--black);
|
color: var(--black);
|
||||||
margin: 0 0 calc(22rem / 16) 0;
|
margin: 0 0 calc(22rem / 16) 0;
|
||||||
}
|
}
|
||||||
|
@ -23,29 +27,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.content h2 {
|
.content h2 {
|
||||||
font-weight: 600;
|
|
||||||
color: var(--blue-2);
|
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 {
|
.content strong {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content details > * {
|
.content details > * {
|
||||||
padding-left: 1rem;
|
padding-left: 1rem;
|
||||||
}
|
}
|
||||||
|
@ -58,20 +46,8 @@
|
||||||
padding-left: 2rem;
|
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)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
.headerContainer {
|
.page > header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
@ -83,13 +59,13 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText h1 {
|
.headerText > h1 {
|
||||||
color: var(--purple-2);
|
color: var(--purple-2);
|
||||||
font-size: calc(24rem / 16);
|
font-size: calc(24rem / 16);
|
||||||
margin-bottom: (12rem / 16);
|
margin-bottom: (12rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerText p {
|
.headerText > p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -101,12 +77,4 @@
|
||||||
.content h2 {
|
.content h2 {
|
||||||
font-size: calc(24rem / 16);
|
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() {
|
export default function GetInvolved() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.pageContainer}>
|
<div className={styles.page}>
|
||||||
<div className={styles.headerContainer}>
|
<header>
|
||||||
<div className={styles.headerText}>
|
<div className={styles.headerText}>
|
||||||
<h1>Get Involved!</h1>
|
<h1>Get Involved!</h1>
|
||||||
<p>
|
<p>
|
||||||
|
@ -17,7 +17,7 @@ export default function GetInvolved() {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Image src="images/get-involved/codey.svg" className={styles.codey} />
|
<Image src="images/get-involved/codey.svg" className={styles.codey} />
|
||||||
</div>
|
</header>
|
||||||
<main className={styles.content}>
|
<main className={styles.content}>
|
||||||
<Content />
|
<Content />
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in New Issue