www
/
cs-2022-class-profile
16
0
Fork 0
Code Issues 11 Pull Requests 1 Projects Releases Wiki Activity

Align title elements
continuous-integration/drone/push Build is failing Details

This commit is contained in:
Jared He 2022-10-02 14:54:06 -04:00
parent bc7de92f2d
commit 11c4c2d187
3 changed files with 28 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Timeline.tsx
View File

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

30
pages/frontpage.module.css
View File

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

15
pages/index.tsx
View File

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