Align title elements
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
bc7de92f2d
commit
11c4c2d187
|
@ -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,42 +6,48 @@
|
|||
|
||||
.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 > * {
|
||||
|
|
|
@ -15,13 +15,14 @@ export default function Home() {
|
|||
return (
|
||||
<div className={styles.main}>
|
||||
<div className={styles.title}>
|
||||
<div className={styles.titleImage}>
|
||||
<Image
|
||||
src="/images/frontPageTitle.png"
|
||||
alt="A picture of the University of Waterloo campus"
|
||||
width={720}
|
||||
height={480}
|
||||
className={styles.titleImage}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.bubble}>
|
||||
<h1>Computer Science 2022</h1>
|
||||
<h1>Class Profile</h1>
|
||||
|
|
Loading…
Reference in New Issue