Align title elements

j285he-front-page
Jared He 2 months ago
parent bc7de92f2d
commit 11c4c2d187
  1. 4
      components/Timeline.tsx
  2. 30
      pages/frontpage.module.css
  3. 15
      pages/index.tsx

@ -100,7 +100,7 @@ function TimelineSection({
width: outerCircleWidth,
height: outerCircleWidth,
borderRadius: outerCircleWidth,
flex: `0 0 ${outerCircleWidth}px`,
flex: `0 0 calc(${outerCircleWidth}rem / 16)`,
}}
>
<div
@ -116,7 +116,7 @@ function TimelineSection({
className={styles.text}
style={{
width: textWidth,
flex: `0 0 ${textWidth}px`,
flex: `0 0 calc(${textWidth}rem / 16)`,
}}
>
{datum.text}

@ -6,45 +6,51 @@
.title {
position: relative;
width: 1300px;
height: 900px;
width: 80vw;
height: 100vh;
border: 1px solid orange;
}
.titleImage {
position: absolute;
top: 20px;
top: 80px;
left: 150px;
}
.bubble {
position: absolute;
bottom: 10px;
left: 200px;
right: 100px;
width: 750px;
height: 350px;
background-color: var(--pink);
opacity: 50%;
opacity: 80%;
border-radius: 50px;
}
.decoratorSolid {
position: absolute;
top: 40px;
right: 40px;
background-color: var(--primary-accent-light);
top: 20px;
right: 250px;
width: 250px;
height: 180px;
background-color: var(--primary-accent-light);
opacity: 50%;
border-radius: 50px;
}
.decoratorDots {
position: absolute;
top: 300px;
right: 10px;
background-color: var(--link);
width: 180px;
height: 280px;
width: 175px;
height: 275px;
background-image: radial-gradient(var(--link) 35%, transparent 35%);
background-position: 0 0;
background-size: 25px 25px;
}
.main > * {
margin-top: 65px;
margin-bottom: 65px;
}
}

@ -15,13 +15,14 @@ export default function Home() {
return (
<div className={styles.main}>
<div className={styles.title}>
<Image
src="/images/frontPageTitle.png"
alt="A picture of the University of Waterloo campus"
width={720}
height={480}
className={styles.titleImage}
/>
<div className={styles.titleImage}>
<Image
src="/images/frontPageTitle.png"
alt="A picture of the University of Waterloo campus"
width={720}
height={480}
/>
</div>
<div className={styles.bubble}>
<h1>Computer Science 2022</h1>
<h1>Class Profile</h1>

Loading…
Cancel
Save