www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

mobile styles and images
continuous-integration/drone/push Build is passing Details

This commit is contained in:
dora 2021-07-04 00:55:56 -04:00
parent 7af10730be
commit f589b05fb8
6 changed files with 134 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/ConnectWithUs.module.css
View File

@ -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);
}
}

14
components/EmailSignup.module.css
View File

@ -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);
}
}

64
pages/get-involved.module.css
View File

@ -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);
}
}

9
pages/get-involved.tsx
View File

@ -13,6 +13,10 @@ export default function GetInvolved() {
return (
<div className={styles.pageContainer}>
<div className={styles.headerContainer}>
<Image
src="images/get-involved/codey-mobile.svg"
className={styles.codeyMobile}
/>
<div className={styles.headerText}>
<h1>Get Involved!</h1>
<p>
@ -21,7 +25,10 @@ export default function GetInvolved() {
<Link href="/about/team">Programme Committee</Link>!
</p>
</div>
<Image src="images/get-involved/codey.svg" className={styles.codey} />
<Image
src="images/get-involved/codey-desktop.svg"
className={styles.codeyDesktop}
/>
</div>
<main className={styles.content}>
<Content />

0
public/images/get-involved/codey.svg → public/images/get-involved/codey-desktop.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

38
public/images/get-involved/codey-mobile.svg Normal file
View File

@ -0,0 +1,38 @@
<svg width="75" height="65" viewBox="0 0 75 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.5115 0.593268C29.5115 0.593268 32.1757 2.65044 33.3146 4.42447C34.9361 6.95002 35.3497 11.8353 35.3497 11.8353L23.8913 11.9458C23.8913 11.9458 24.409 7.07334 25.9867 4.49518C27.0585 2.7436 29.5115 0.593268 29.5115 0.593268Z" fill="#5CAFF9"/>
<path d="M29.5149 3.54792C29.5149 3.54792 31.4284 4.8684 32.2458 6.00799C33.4094 7.63034 33.7032 10.7705 33.7032 10.7705L25.4667 10.85C25.4667 10.85 25.8425 7.71733 26.9783 6.05882C27.7501 4.93204 29.5149 3.54792 29.5149 3.54792Z" fill="white"/>
<path d="M48.5651 5.03C48.5651 5.03 45.2663 5.69867 43.4608 6.78709C40.8905 8.33658 38.3613 12.5366 38.3613 12.5366L48.5922 17.6975C48.5922 17.6975 50.2802 13.0975 50.0037 10.0877C49.8159 8.04277 48.5651 5.03 48.5651 5.03Z" fill="#5CAFF9"/>
<path d="M47.0998 7.70755C47.0998 7.70755 44.6134 8.14234 43.2647 8.90946C41.3445 10.0016 39.4997 13.0357 39.4997 13.0357L47.3315 16.9864C47.3315 16.9864 48.5327 13.6452 48.2733 11.436C48.097 9.93511 47.0998 7.70755 47.0998 7.70755Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4958 62.5815C35.7284 63.5236 32.7746 63.712 29.745 63.0065C18.4668 60.3804 7.89892 51.3569 13.881 31.4461C14.4906 29.9652 15.0649 28.5401 15.6152 27.1746C21.3651 12.9074 24.4945 5.14225 37.7828 8.23643C48.7747 10.7959 50.2482 19.7465 51.7585 28.9213C52.2274 31.7697 52.6998 34.6398 53.4618 37.3468C60.6341 41.9542 63.3666 48.7701 61.749 55.7172C59.6563 64.7041 51.5756 65.3027 38.4958 62.5815Z" fill="#5CAFF9"/>
<path d="M23.0689 38.4148L25.9081 47.7643C25.9081 47.7643 3.05116 53.9672 2.54998 53.6793C2.04881 53.3913 0.416519 48.561 0.775483 47.8358C0.974049 47.4347 8.5493 44.2614 14.6547 42.0263C20.368 39.411 23.0689 38.4148 23.0689 38.4148Z" fill="#5CAFF9"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="7" y="4" width="64" height="66">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.4024 62.5602C35.6352 63.5021 32.6816 63.6905 29.6521 62.985C18.374 60.3589 7.80611 51.3354 13.7882 31.4246C14.3978 29.9438 14.9721 28.5186 15.5224 27.1531C21.2723 12.8859 24.4017 5.12079 37.69 8.21497C48.6819 10.7745 50.1554 19.7251 51.6657 28.8999C52.1346 31.7486 52.6072 34.619 53.3693 37.3264C60.5404 41.9337 63.2724 48.7491 61.6548 55.6957C59.5623 64.6825 51.4818 65.2813 38.4024 62.5602Z" fill="#5CAFF9"/>
</mask>
<g mask="url(#mask0)">
<path d="M27.5032 44.3563C25.554 56.4746 29.3738 69.0857 19.7833 62.1838C17.1343 61.3484 14.7159 53.951 16.6651 41.8327C18.6143 29.7144 23.5384 19.6099 31.3863 20.8721C35.6519 21.5582 39.76 25.1862 36.8912 32.0916C35.4738 35.5035 28.1608 40.2673 27.5032 44.3563Z" fill="white"/>
</g>
<ellipse cx="63.5432" cy="37.6078" rx="10.4836" ry="11.5014" transform="rotate(-21.9209 63.5432 37.6078)" fill="#5CAFF9"/>
<circle cx="23.9786" cy="16.4129" r="7.13366" transform="rotate(13.1078 23.9786 16.4129)" stroke="#2A2A62"/>
<circle cx="40.7246" cy="19.894" r="7.13366" transform="rotate(13.1078 40.7246 19.894)" stroke="#2A2A62"/>
<path d="M30.0057 19.6976C30.0057 19.6976 31.2747 19.6795 32.0576 19.8618C32.8405 20.0441 33.9709 20.6209 33.9709 20.6209L33.6939 21.8104C33.6939 21.8104 32.5356 21.3317 31.7575 21.1505C30.9794 20.9693 29.7287 20.8871 29.7287 20.8871L30.0057 19.6976Z" fill="#2A2A62"/>
<path d="M47.4333 60.7426L45.5693 48.5863C45.5693 48.5863 49.5478 45.7435 54.2036 45.984C58.8594 46.2246 62.1907 49.2759 62.1907 49.2759C62.1907 49.2759 73.95 58.8197 73.9931 59.3202C74.0362 59.8207 71.7318 64.3674 71.1159 64.7069C70.7752 64.8947 65.6409 63.7954 61.5087 62.0016C51.8317 67.4738 47.4333 60.7426 47.4333 60.7426Z" fill="#5CAFF9"/>
<path d="M30.8951 49.9059L34.1011 60.4631C34.1011 60.4631 16.1866 65.0698 15.7528 64.7045C15.3189 64.3393 13.5285 58.869 13.749 58.1063C13.871 57.6843 19.6999 54.9286 24.4291 53.0623C28.8038 50.7398 30.8951 49.9059 30.8951 49.9059Z" fill="#5CAFF9"/>
<g clip-path="url(#clip0)">
<path d="M35.1143 26.9862C34.6814 30.1657 30.7262 29.9827 28.3547 28.8975C25.9877 27.7928 25.8008 24.633 26.6154 22.8955C27.4346 21.1386 29.9979 20.6078 32.3649 21.7125C33.39 22.5048 33.4532 23.1141 33.9708 23.9727C34.5825 24.9557 34.6994 25.5979 35.1143 26.9862Z" fill="white"/>
<path d="M30.1899 23.482C31.2103 23.7195 32.1591 23.3897 32.3091 22.7453C32.4592 22.1009 31.7537 21.3859 30.7333 21.1483C29.713 20.9107 28.7642 21.2405 28.6141 21.8849C28.4641 22.5293 29.1696 23.2444 30.1899 23.482Z" fill="#2A2A62"/>
<path d="M34.697 28.4264C34.1021 28.7799 33.3549 28.9954 32.6692 29.1228C31.7664 29.3021 30.9115 29.4516 29.9079 29.0949C27.3595 28.1529 26.1503 25.8622 26.8714 23.7339C27.3788 22.1709 28.9282 21.2401 30.6958 21.2211C28.4489 20.6569 26.7869 21.8075 26.0897 23.9209C25.3324 26.2048 26.77 28.8357 29.3184 29.7777C31.3942 30.5481 33.564 29.9462 34.697 28.4264Z" fill="#2A2A62"/>
<path d="M29.6687 16.5776C29.9444 16.1002 29.5486 15.3554 28.7847 14.9142C28.0207 14.473 27.1779 14.5024 26.9021 14.9799C26.6264 15.4573 27.0221 16.2021 27.7861 16.6433C28.55 17.0845 29.3929 17.0551 29.6687 16.5776Z" fill="white"/>
<path d="M38.0903 19.2714C38.9708 19.2144 39.6556 18.7222 39.62 18.1719C39.5844 17.6217 38.8418 17.2218 37.9614 17.2787C37.081 17.3357 36.3962 17.8279 36.4318 18.3782C36.4674 18.9285 37.2099 19.3283 38.0903 19.2714Z" fill="white"/>
<path opacity="0.5" d="M29.9861 24.3569L31.0182 26.1758L29.0503 27.5833L28.1184 25.0701L29.9861 24.3569Z" fill="#5CAFF9"/>
<path d="M30.1901 23.4816C30.1901 23.4816 29.4271 26.3177 32.5667 25.7776" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M30.285 23.0734C30.285 23.0734 29.5288 26.3211 27.4945 24.2278" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M31.1181 25.748C31.1181 25.748 28.5695 30.1775 28.0803 24.7947" stroke="#2A2A62" stroke-width="2.01439" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M35.1052 20.7169C34.7576 21.263 35.1912 21.925 35.665 21.5733C36.0166 21.3252 36.4467 21.1613 36.9113 21.2695C37.3527 21.3723 37.6661 21.7092 37.872 22.0872C38.1489 22.5807 38.7912 22.1362 38.7133 21.5241C38.6628 21.2153 38.573 20.8644 38.399 20.5599C37.5841 19.1161 36.0153 19.5428 35.2869 20.4622C35.2186 20.5453 35.1502 20.6284 35.1052 20.7169Z" fill="#2A2A62"/>
<path d="M25.3813 18.4527C25.0337 18.9987 25.4673 19.6607 25.9411 19.309C26.2928 19.0609 26.7228 18.897 27.1874 19.0052C27.6288 19.108 27.9422 19.445 28.1481 19.8229C28.425 20.3164 29.0673 19.872 28.9894 19.2598C28.9389 18.9511 28.8492 18.6002 28.6752 18.2956C27.8603 16.8519 26.2914 17.2786 25.563 18.198C25.4947 18.2811 25.4264 18.3642 25.3813 18.4527Z" fill="#2A2A62"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="13.8775" height="14.4965" fill="white" transform="translate(26.3153 14.2354) rotate(13.1078)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB