Fix more spacing shenanigans
This commit is contained in:
parent
77f04a98a6
commit
db4504c51d
|
@ -2,5 +2,4 @@
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
max-width: calc(800rem / 16);
|
max-width: calc(800rem / 16);
|
||||||
padding: 0 calc(20rem / 16);
|
padding: 0 calc(20rem / 16);
|
||||||
padding-bottom: calc(20rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,7 @@
|
||||||
|
.page {
|
||||||
|
padding-bottom: calc(60rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -5,11 +9,9 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 65vh;
|
height: 65vh;
|
||||||
min-height: calc(420rem / 16);
|
min-height: calc(420rem / 16);
|
||||||
max-height: calc(580rem / 16);
|
max-height: calc(580rem / 16);
|
||||||
max-width: calc(800rem / 16);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.introTop {
|
.introTop {
|
||||||
|
@ -108,12 +110,6 @@
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: calc(800rem / 16);
|
|
||||||
padding: calc(30rem / 16) calc(40rem / 16) calc(80rem / 16);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* On a smaller desktop screen, make the events/new flow vertically */
|
/* On a smaller desktop screen, make the events/new flow vertically */
|
||||||
@media only screen and (max-width: calc(1100rem / 16)) {
|
@media only screen and (max-width: calc(1100rem / 16)) {
|
||||||
.cards {
|
.cards {
|
||||||
|
@ -128,16 +124,25 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: calc(768rem / 16)) {
|
@media only screen and (max-width: calc(768rem / 16)) {
|
||||||
|
.page {
|
||||||
|
padding-bottom: calc(30rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
.intro {
|
.intro {
|
||||||
height: calc(330rem / 16);
|
height: calc(330rem / 16);
|
||||||
|
min-height: unset;
|
||||||
|
max-height: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
.introContent {
|
.introContent {
|
||||||
margin-bottom: calc(100rem / 16);
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
max-width: calc(260rem / 16);
|
max-width: calc(260rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.introBottom {
|
||||||
|
min-height: calc(100rem / 16);
|
||||||
|
}
|
||||||
|
|
||||||
.clubTitleWrapper img {
|
.clubTitleWrapper img {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -169,7 +174,7 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: calc(8rem / 16);
|
gap: calc(8rem / 16);
|
||||||
|
|
||||||
padding: calc(36rem / 16) calc(30rem / 16) calc(20rem / 16);
|
padding: calc(36rem / 16) calc(20rem / 16) calc(20rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardsHeading {
|
.cardsHeading {
|
||||||
|
@ -189,9 +194,4 @@
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--purple-2);
|
background-color: var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact {
|
|
||||||
padding: calc(30rem / 16);
|
|
||||||
padding-bottom: calc(80rem / 16);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,7 @@ import { EventDescriptionCard } from "../components/EventDescriptionCard";
|
||||||
import { NewsCard } from "../components/NewsCard";
|
import { NewsCard } from "../components/NewsCard";
|
||||||
import { ConnectWithUs } from "../components/ConnectWithUs";
|
import { ConnectWithUs } from "../components/ConnectWithUs";
|
||||||
import { EmailSignup } from "../components/EmailSignup";
|
import { EmailSignup } from "../components/EmailSignup";
|
||||||
|
import { DefaultLayout } from "../components/DefaultLayout";
|
||||||
import styles from "./index.module.css";
|
import styles from "./index.module.css";
|
||||||
|
|
||||||
// temporary event and news imports
|
// temporary event and news imports
|
||||||
|
@ -26,26 +27,28 @@ export default function Home() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<header className={styles.intro}>
|
<DefaultLayout>
|
||||||
<div className={styles.introTop} />
|
<header className={styles.intro}>
|
||||||
<div className={styles.introContent}>
|
<div className={styles.introTop} />
|
||||||
<div className={styles.clubTitleWrapper}>
|
<div className={styles.introContent}>
|
||||||
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
<div className={styles.clubTitleWrapper}>
|
||||||
<h1 className={styles.clubTitle}>Computer Science Club</h1>
|
<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's <br />
|
||||||
|
student computing community
|
||||||
|
</p>
|
||||||
|
<SocialLinks color="gradient" size="big" />
|
||||||
</div>
|
</div>
|
||||||
<p className={styles.clubDescription}>
|
<div className={styles.introBottom} />
|
||||||
University of Waterloo's <br />
|
<Image
|
||||||
student computing community
|
className={styles.codey}
|
||||||
</p>
|
src="/images/home/codey_sitting.svg"
|
||||||
<SocialLinks color="gradient" size="big" />
|
alt="CSC mascot Codey, a blue shiba with circular glasses"
|
||||||
</div>
|
/>
|
||||||
<div className={styles.introBottom} />
|
</header>
|
||||||
<Image
|
</DefaultLayout>
|
||||||
className={styles.codey}
|
|
||||||
src="/images/home/codey_sitting.svg"
|
|
||||||
alt="CSC mascot Codey, a blue shiba with circular glasses"
|
|
||||||
/>
|
|
||||||
</header>
|
|
||||||
<div className={styles.cardsBackground}>
|
<div className={styles.cardsBackground}>
|
||||||
<div className={styles.cards}>
|
<div className={styles.cards}>
|
||||||
{/* TODO: add links to past events and past news */}
|
{/* TODO: add links to past events and past news */}
|
||||||
|
@ -75,14 +78,14 @@ export default function Home() {
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.contact}>
|
<DefaultLayout>
|
||||||
<ConnectWithUs />
|
<ConnectWithUs />
|
||||||
<EmailSignup />
|
<EmailSignup />
|
||||||
</div>
|
</DefaultLayout>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
||||||
return <div>{props.children}</div>;
|
return <div className={styles.page}>{props.children}</div>;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue