Position fronpage items
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
This commit is contained in:
parent
8710faaa63
commit
e8ce17fd82
|
@ -32,7 +32,7 @@ export function Timeline({
|
|||
lineWidth = 5,
|
||||
outerCircleWidth = 30,
|
||||
innerCircleWidth = 15,
|
||||
timeWidth = 300,
|
||||
timeWidth = 1000,
|
||||
textWidth = 500,
|
||||
gap = 50,
|
||||
className,
|
||||
|
|
|
@ -4,12 +4,47 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
width: 1300px;
|
||||
height: 900px;
|
||||
border: 1px solid orange;
|
||||
}
|
||||
|
||||
.titleImage {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 200px;
|
||||
background-color: var(--pink);
|
||||
opacity: 50%;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.decoratorSolid {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 40px;
|
||||
background-color: var(--primary-accent-light);
|
||||
width: 250px;
|
||||
height: 180px;
|
||||
opacity: 50%;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.decoratorDots {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
background-color: var(--link);
|
||||
width: 180px;
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.main > * {
|
||||
margin-top: 65px;
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
|
||||
.left {
|
||||
align-self: flex-start;
|
||||
margin-left: 100px;
|
||||
}
|
|
@ -20,6 +20,7 @@ export default function Home() {
|
|||
alt="A picture of the University of Waterloo campus"
|
||||
width={720}
|
||||
height={480}
|
||||
className={styles.titleImage}
|
||||
/>
|
||||
<div className={styles.bubble}>
|
||||
<h1>Computer Science 2022</h1>
|
||||
|
@ -58,8 +59,8 @@ export default function Home() {
|
|||
you see!
|
||||
</p>
|
||||
</CenterWrapper>
|
||||
<Sections data={sectionsData} className={styles.left} />
|
||||
<Timeline data={mockTimelineData} className={styles.left} />
|
||||
<Sections data={sectionsData} />
|
||||
<Timeline data={mockTimelineData} />
|
||||
<p>
|
||||
Click <Link href="/playground">here</Link> to visit the playground
|
||||
<br />
|
||||
|
|
Loading…
Reference in New Issue