Home Page UI (#88)

Desktop and Mobile versions of the home page UI.

Closes #4 (we can create new issues for the remaining tasks)

Co-authored-by: Amy <minds10@hotmail.com>
Reviewed-on: www/www-new#88
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>
amy-random-shapes
Amy Wang 1 year ago committed by Aditya Thakral
parent 507f9806c3
commit 6a64013e5c
  1. 1
      components/EventDescriptionCard.module.css
  2. 5
      components/Navbar.module.css
  3. 5
      components/NewsCard.module.css
  4. 2
      pages/_app.css
  5. 11
      pages/font.css
  6. 1
      pages/index.mdx
  7. 201
      pages/index.module.css
  8. 91
      pages/index.tsx
  9. BIN
      public/fonts/futura-bold.woff
  10. BIN
      public/fonts/futura-bold.woff2
  11. 27
      public/images/home/codey_sitting.svg

@ -50,6 +50,7 @@
@media only screen and (max-width: calc(768rem / 16)) {
.card {
max-width: unset;
padding: 0;
background-color: transparent;
}

@ -2,6 +2,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
background-color: var(--white);
}
@ -154,13 +155,13 @@
/* On a smaller desktop screen, keep the same navbar layout but decrease the
* horizontal padding so it still fits
*/
@media screen and (max-width: calc(960rem / 16)) {
@media only screen and (max-width: calc(960rem / 16)) {
.navContent {
padding: calc(28rem / 16) calc(64rem / 16);
}
}
@media screen and (max-width: calc(768rem / 16)) {
@media only screen and (max-width: calc(768rem / 16)) {
.navContent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;

@ -22,9 +22,14 @@
@media only screen and (max-width: calc(768rem / 16)) {
.card {
padding: 0;
max-width: unset;
background-color: transparent;
}
.date {
font-weight: 600;
}
.content > *:first-child {
margin-top: 1rem;
}

@ -25,6 +25,8 @@ body {
);
/* used in mobile navbar background */
--navbar-gray: #787878b2;
/* used in home page */
--home-title-purple: #27153e;
color: var(--black);
font-family: "Poppins", "sans-serif";

@ -159,4 +159,13 @@
src: local(''),
url('../public/fonts/poppins-v15-latin-900italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../public/fonts/poppins-v15-latin-900italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
}
/* futura-bold */
@font-face {
font-family: 'Futura';
font-style: normal;
font-weight: 700;
src: local(''),
url('../public/fonts/futura-bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../public/fonts/futura-bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@ -1 +0,0 @@
Visit the [playground](/playground)

@ -0,0 +1,201 @@
.page {
padding-bottom: calc(60rem / 16);
}
.intro {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
position: relative;
height: 65vh;
min-height: calc(420rem / 16);
max-height: calc(580rem / 16);
}
.introTop {
flex-grow: 1;
}
.introContent {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.introBottom {
flex-grow: 1;
min-height: calc(132rem / 16);
}
.clubTitleWrapper {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1rem;
}
.clubTitleWrapper img {
height: calc(70rem / 16);
}
.clubTitle {
font-family: "Futura", "sans-serif";
font-size: calc(33rem / 16);
text-align: center;
color: var(--home-title-purple);
}
.clubDescription {
margin-bottom: calc(50rem / 16);
text-align: center;
color: var(--purple-2);
}
.clubDescription br {
display: none;
}
.codey {
position: absolute;
bottom: calc(-124rem / 16);
right: calc(20rem / 16);
z-index: -1;
}
.cardsBackground {
margin: 0;
width: 100%;
background-color: var(--off-white);
}
.cards {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
gap: calc(100rem / 16);
padding: calc(42rem / 16) calc(100rem / 16);
}
.cardsHeading {
margin: 1rem 0 calc(8rem / 16);
font-size: calc(24rem / 16);
font-weight: 700;
}
.cardsDescription {
margin: calc(8rem / 16) 0 1rem;
}
.cardsDescription br {
display: none;
}
.cardsDividingLine {
display: none;
}
.eventCards {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 1rem;
}
/* On a smaller desktop screen, make the events/new flow vertically */
@media only screen and (max-width: calc(1100rem / 16)) {
.cards {
flex-direction: column;
align-items: center;
gap: calc(32rem / 16);
}
.cards > section {
max-width: calc(540rem / 16);
}
}
@media only screen and (max-width: calc(768rem / 16)) {
.page {
padding-bottom: calc(30rem / 16);
}
.intro {
height: calc(330rem / 16);
min-height: unset;
max-height: unset;
}
.introContent {
padding: 1rem;
max-width: calc(260rem / 16);
}
.introBottom {
min-height: calc(100rem / 16);
}
.clubTitleWrapper img {
display: none;
}
.clubTitle {
margin: calc(8rem / 16) 0;
font-size: calc(20rem / 16);
}
.clubDescription {
margin: calc(8rem / 16) 0 calc(26rem / 16);
color: var(--purple-2);
}
.clubDescription br {
display: inline;
}
.codey {
bottom: calc(-46rem / 16);
right: auto;
z-index: -1;
height: calc(120rem / 16);
}
.cards {
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: calc(8rem / 16);
padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
}
.cards > section {
max-width: unset;
}
.cardsHeading {
margin: 0;
font-size: calc(18rem / 16);
font-weight: 600;
}
.cardsDescription br {
display: inline;
}
.cardsDividingLine {
display: block;
margin: 1rem 0 calc(34rem / 16);
height: calc(1rem / 16);
border: none;
background-color: var(--purple-2);
}
}

@ -0,0 +1,91 @@
import React from "react";
import { Image } from "../components/Image";
import { SocialLinks } from "../components/SocialLinks";
import { EventDescriptionCard } from "../components/EventDescriptionCard";
import { NewsCard } from "../components/NewsCard";
import { ConnectWithUs } from "../components/ConnectWithUs";
import { EmailSignup } from "../components/EmailSignup";
import { DefaultLayout } from "../components/DefaultLayout";
import styles from "./index.module.css";
// temporary event and news imports
import OOTBReact, {
metadata as OOTBReactEventMetadata,
} from "../content/playground/ootb-react.event.mdx";
import AltTab, {
metadata as altTabEventMetadata,
} from "../content/playground/alt-tab.event.mdx";
import UnavailableContent, {
metadata as unavailableMetadata,
} from "../content/playground/unavailable.news.mdx";
export default function Home() {
const events = [
{ Content: OOTBReact, metadata: OOTBReactEventMetadata },
{ Content: AltTab, metadata: altTabEventMetadata },
];
return (
<>
<DefaultLayout>
<header className={styles.intro}>
<div className={styles.introTop} />
<div className={styles.introContent}>
<div className={styles.clubTitleWrapper}>
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
<h1 className={styles.clubTitle}>Computer Science Club</h1>
</div>
<p className={styles.clubDescription}>
University of Waterloo&apos;s <br />
student computing community
</p>
<SocialLinks color="gradient" size="big" />
</div>
<div className={styles.introBottom} />
<Image
className={styles.codey}
src="/images/home/codey_sitting.svg"
alt="CSC mascot Codey, a blue shiba with circular glasses"
/>
</header>
</DefaultLayout>
<div className={styles.cardsBackground}>
<div className={styles.cards}>
{/* TODO: add links to past events and past news */}
<section className={styles.events}>
<h1 className={styles.cardsHeading}>Upcoming Events</h1>
<p className={styles.cardsDescription}>See past events here</p>
<hr className={styles.cardsDividingLine} />
<div className={styles.eventCards}>
{events.map(({ metadata }) => (
<EventDescriptionCard
{...metadata}
key={metadata.name + metadata.date.toString()}
/>
))}
</div>
</section>
<section className={styles.news}>
<h1 className={styles.cardsHeading}>News</h1>
<p className={styles.cardsDescription}>
Updates from our execs! <br />
See past news here
</p>
<hr className={styles.cardsDividingLine} />
<NewsCard {...unavailableMetadata}>
<UnavailableContent />
</NewsCard>
</section>
</div>
</div>
<DefaultLayout>
<ConnectWithUs />
<EmailSignup />
</DefaultLayout>
</>
);
}
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
return <div className={styles.page}>{props.children}</div>;
};

Binary file not shown.

Binary file not shown.

@ -0,0 +1,27 @@
<svg width="219" height="247" viewBox="0 0 219 247" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.7693 4.69947C32.7693 4.69947 43.4011 9.55954 48.6509 14.6632C56.1247 21.9288 61.3717 38.1275 61.3717 38.1275L22.7003 47.5264C22.7003 47.5264 20.6139 30.6373 23.9196 20.674C26.1654 13.9051 32.7693 4.69947 32.7693 4.69947Z" fill="#5CAFF9"/>
<path d="M35.1077 14.6897C35.1077 14.6897 42.6202 17.6492 46.2826 20.8601C51.4965 25.4312 54.9634 35.8215 54.9634 35.8215L27.166 42.5775C27.166 42.5775 25.9696 31.6854 28.5054 25.1808C30.2283 20.7616 35.1077 14.6897 35.1077 14.6897Z" fill="white"/>
<path d="M100.715 4.69947C100.715 4.69947 90.0832 9.55954 84.8335 14.6632C77.3597 21.9288 72.1127 38.1275 72.1127 38.1275L110.784 47.5264C110.784 47.5264 112.87 30.6373 109.565 20.674C107.319 13.9051 100.715 4.69947 100.715 4.69947Z" fill="#5CAFF9"/>
<path d="M97.8647 14.9092C97.8647 14.9092 89.7969 18.3382 85.8389 21.9953C80.2042 27.2017 76.3539 38.9178 76.3539 38.9178L105.956 46.1126C105.956 46.1126 107.388 33.8649 104.771 26.5966C102.992 21.6586 97.8647 14.9092 97.8647 14.9092Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.979 213.725C103.361 219.279 93.5191 222.346 82.7167 222.346C42.4999 222.346 -0.353528 199.369 4.19887 124.782C5.09433 119.101 5.91459 113.643 6.70056 108.413C14.9124 53.7751 19.3818 24.0375 66.7667 24.0375C105.963 24.0375 117.997 54.1733 130.332 85.0639C134.162 94.6551 138.021 104.319 142.731 113.176C170.619 123.46 185.229 145.095 185.229 170.736C185.229 203.907 158.366 212.59 111.979 213.725Z" fill="#5CAFF9"/>
<path d="M10.6035 144.931H44.5386C44.5386 144.931 42.0857 227.148 40.623 228.523C39.1603 229.898 21.4613 230.448 19.4136 228.523C18.2808 227.458 15.3802 199.082 14.114 176.537C11.1886 154.912 10.6035 144.931 10.6035 144.931Z" fill="#5CAFF9"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="24" width="182" height="199">
<path fill-rule="evenodd" clip-rule="evenodd" d="M111.649 213.725C103.031 219.279 93.189 222.346 82.3866 222.346C42.1698 222.346 -0.683606 199.369 3.86879 124.782C4.76425 119.101 5.58451 113.643 6.37048 108.413C14.5823 53.7751 19.0517 24.0375 66.4366 24.0375C105.633 24.0375 117.667 54.1733 130.002 85.0639C133.832 94.6552 137.691 104.319 142.401 113.177C170.288 123.461 184.899 145.096 184.899 170.736C184.899 203.907 158.036 212.59 111.649 213.725Z" fill="#5CAFF9"/>
</mask>
<g mask="url(#mask0)">
<path d="M60.4461 154.311C63.3977 196.837 86.2509 236.485 48.3749 220.693C38.7564 219.954 24.75 196.837 21.7984 154.311C18.8468 111.785 27.5443 73.7282 55.0841 71.8168C70.0531 70.7778 86.8062 79.8139 82.5415 105.431C80.4343 118.088 59.4501 139.962 60.4461 154.311Z" fill="white"/>
</g>
<ellipse cx="182.048" cy="132.559" rx="36.4095" ry="39.9444" fill="#5CAFF9"/>
<circle cx="26.5118" cy="62.5678" r="24.7443" stroke="#2A2A62" stroke-width="3.5349"/>
<circle cx="85.8985" cy="61.1539" r="24.7443" stroke="#2A2A62" stroke-width="3.5349"/>
<path d="M49.4883 68.9307C49.4883 68.9307 53.7663 67.8702 56.5581 67.8702C59.3499 67.8702 63.6279 68.9307 63.6279 68.9307V73.1726C63.6279 73.1726 59.3328 72.4656 56.5581 72.4656C53.7834 72.4656 49.4883 73.1726 49.4883 73.1726V68.9307Z" fill="#2A2A62"/>
<path d="M147.025 155.354L185.909 173.028C185.909 173.028 186.616 189.996 177.072 203.075C167.528 216.154 152.327 220.043 152.327 220.043C152.327 220.043 102.241 236.1 100.704 235.275C99.1665 234.449 90.3253 219.112 90.5084 216.676C90.6096 215.329 103.56 202.49 116.625 193.884C119.099 155.354 147.025 155.354 147.025 155.354Z" fill="#5CAFF9"/>
<path d="M61.1309 162.178L98.9762 168.182C98.9762 168.182 86.1842 231.137 84.3848 231.938C82.5853 232.739 62.7797 230.031 60.7314 228.185C59.5984 227.164 59.8343 204.773 61.1799 187.167C60.5625 169.976 61.1309 162.178 61.1309 162.178Z" fill="#5CAFF9"/>
<path d="M74.5877 90.8471C75.6482 94.7355 64.8019 100.978 55.7828 99.0862C46.7638 97.1941 40.5915 90.2305 41.9967 83.5327C43.4019 76.8348 51.8524 72.9391 60.8714 74.8312C65.0435 76.7075 65.7412 78.8045 68.2249 81.3029C71.1385 84.2339 72.0434 86.3606 74.5877 90.8471Z" fill="white"/>
<ellipse cx="41.0055" cy="69.9911" rx="5.65585" ry="6.36283" fill="#2A2A62"/>
<ellipse cx="81.3023" cy="69.9912" rx="5.65585" ry="6.36283" fill="#2A2A62"/>
<ellipse cx="54.7905" cy="78.475" rx="6.71632" ry="4.24189" fill="#2A2A62"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M74.3342 92.7414C72.533 94.1595 70.1952 95.2781 67.869 96.1495C64.8947 97.2637 62.0565 98.322 58.3248 97.917C48.8145 96.8847 42.8009 91.0658 43.5278 84.3689C44.0571 79.493 48.6003 75.7329 54.7025 74.447C46.529 74.3209 41.6968 78.8186 40.9797 85.4251C40.2002 92.6063 47.278 99.2646 56.7882 100.297C64.619 101.147 71.6573 97.9175 74.3342 92.7414Z" fill="#2A2A62"/>
<ellipse cx="40.8618" cy="57.558" rx="5.65585" ry="3.5349" transform="rotate(10.8273 40.8618 57.558)" fill="white"/>
<ellipse rx="5.65585" ry="3.5349" transform="matrix(-0.982198 0.18785 0.18785 0.982198 79.6011 57.8506)" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

Loading…
Cancel
Save