Tweak styling and semantic html
This commit is contained in:
parent
914d11311c
commit
bfdae0f8d9
|
@ -56,10 +56,15 @@
|
|||
}
|
||||
|
||||
.cardsHeading {
|
||||
margin: 1rem 0;
|
||||
margin: 1rem 0 calc(8rem / 16);
|
||||
font-size: calc(24rem / 16);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.cardsDescription {
|
||||
margin: calc(8rem / 16) 0 1rem;
|
||||
}
|
||||
|
||||
.eventCards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -75,16 +80,3 @@
|
|||
padding: calc(20rem / 16);
|
||||
padding-bottom: calc(20rem / 16);
|
||||
}
|
||||
|
||||
.connectHeading {
|
||||
font-weight: 600;
|
||||
color: var(--blue-2);
|
||||
}
|
||||
|
||||
.socials {
|
||||
margin-bottom: calc(64rem / 16);
|
||||
}
|
||||
|
||||
.socials div {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
@ -24,7 +24,7 @@ export default function Home() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.intro}>
|
||||
<main className={styles.intro}>
|
||||
<div className={styles.clubTitleWrapper}>
|
||||
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
||||
<h1 className={styles.clubTitle}>Computer Science Club</h1>
|
||||
|
@ -38,13 +38,13 @@ export default function Home() {
|
|||
src="/images/home/codey_sitting.svg"
|
||||
alt="CSC mascot Codey, a blue shiba with circular glasses"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
<div className={styles.cardsBackground}>
|
||||
<div className={styles.cards}>
|
||||
{/* TODO: add links to past events and past news */}
|
||||
<div className={styles.events}>
|
||||
<h3 className={styles.cardsHeading}>Upcoming Events</h3>
|
||||
<p>See past events here</p>
|
||||
<section className={styles.events}>
|
||||
<h2 className={styles.cardsHeading}>Upcoming Events</h2>
|
||||
<p className={styles.cardsDescription}>See past events here</p>
|
||||
<div className={styles.eventCards}>
|
||||
{events.map(({ metadata }) => (
|
||||
<EventDescriptionCard
|
||||
|
@ -53,27 +53,20 @@ export default function Home() {
|
|||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.news}>
|
||||
<h3 className={styles.cardsHeading}>News</h3>
|
||||
<p>Updates from our execs! See past news here</p>
|
||||
</section>
|
||||
<section className={styles.news}>
|
||||
<h2 className={styles.cardsHeading}>News</h2>
|
||||
<p className={styles.cardsDescription}>
|
||||
Updates from our execs! See past news here
|
||||
</p>
|
||||
<NewsCard {...unavailableMetadata}>
|
||||
<UnavailableContent />
|
||||
</NewsCard>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
|
||||
<div className={styles.contact}>
|
||||
<h2 className={styles.connectHeading}>Connect with us!</h2>
|
||||
<p>
|
||||
Drop by any of our social media outlets to learn more about us, keep
|
||||
up-to-date with our upcoming events, or to chat with our members!
|
||||
</p>
|
||||
<div className={styles.socials}>
|
||||
<SocialLinks color="gradient" size="small" />
|
||||
</div>
|
||||
<p>Send feedback through our Feedback Form</p>
|
||||
{/* TODO: use <ConnectWithUs> and <EmailSighup> components */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue