Skip to content

Commit c8856c8

Browse files
Leonardo-Olivoopenscript
Leonardo-Olivo
authored and
openscript
committed
feat: timeline fine tuning, added en formation
1 parent 11e7c06 commit c8856c8

File tree

8 files changed

+87
-24
lines changed

8 files changed

+87
-24
lines changed

‎src/components/Timeline.astro‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,12 @@ type Props = {
44
text: string;
55
title: string;
66
}[];
7+
shortSpine?: boolean;
78
};
89
9-
const { elements } = Astro.props;
10+
const { elements, shortSpine = false } = Astro.props;
11+
12+
const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider) + (2 * var(--size-gutter-massive)))";
1013
---
1114

1215
<div class="timeline">
@@ -22,7 +25,7 @@ const { elements } = Astro.props;
2225
</ol>
2326
</div>
2427

25-
<style>
28+
<style define:vars={{ spineHeight }}>
2629
.timeline {
2730
position: relative;
2831
}
@@ -49,7 +52,7 @@ const { elements } = Astro.props;
4952
.timeline::before {
5053
content: "";
5154
width: 4px;
52-
height: 200%; /* TODO: find better solution to span spine over the sections */
55+
height: var(--spineHeight);
5356
position: absolute;
5457
left: 50%;
5558
transform: translateX(-50%);
@@ -62,9 +65,10 @@ const { elements } = Astro.props;
6265
flex-direction: column;
6366
box-sizing: border-box;
6467
padding: 1rem;
65-
background: #fcfaf3;
68+
/* background: #fcfaf3; */
69+
background: var(--color-overlay);
6670
width: 45%;
67-
box-shadow: 0px 15px 30px -25px rgba(0, 0, 0, 0.5);
71+
box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
6872
}
6973

7074
li::after {

‎src/content/formation/evolution.yaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
items:
2+
de:
3+
- title: Lorem
4+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5+
- title: Lorem
6+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
7+
- title: Lorem
8+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
9+
en:
10+
- title: Lorem
11+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
12+
- title: Lorem
13+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
14+
- title: Lorem
15+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

‎src/content/formation/founding.yaml‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
items:
22
de:
3-
- title: Lorem
4-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5-
- title: Lorem
6-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
3+
- title: Lorem
4+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5+
- title: Lorem
6+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
77
en:
8-
- title: Lorem
9-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
10-
- title: Lorem
11-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
8+
- title: Lorem
9+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
10+
- title: Lorem
11+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

‎src/content/formation/office.yaml‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
items:
22
de:
3-
- title: Lorem
4-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5-
- title: Lorem
6-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
3+
- title: Lorem
4+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
5+
- title: Lorem
6+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
7+
- title: Lorem
8+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
79
en:
8-
- title: Lorem
9-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
10-
- title: Lorem
11-
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
10+
- title: Lorem
11+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
12+
- title: Lorem
13+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
14+
- title: Lorem
15+
text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

‎src/content/pages/de/past/formation.mdx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,13 @@ import Divider from "../../../../components/Divider.astro";
2020
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
2121
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2222
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
23-
</FormationSection>
23+
</FormationSection>
24+
25+
<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
26+
27+
<FormationSection class="dark-background" key="evolution" last>
28+
<h2 name="title">Entwicklung</h2>
29+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
30+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
31+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
32+
</FormationSection>

‎src/content/pages/en/past/formation.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,32 @@
22
path: formation
33
title: Formation
44
---
5+
6+
7+
import FormationSection from "../../../../layouts/sections/FormationSection.astro";
8+
import Divider from "../../../../components/Divider.astro";
9+
10+
<FormationSection class="spotlight" key="founding">
11+
<h2 name="title">Founding</h2>
12+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
13+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
14+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
15+
</FormationSection>
16+
17+
<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
18+
19+
<FormationSection class="white-background" key="office">
20+
<h2 name="title">First Office</h2>
21+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
22+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
23+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
24+
</FormationSection>
25+
26+
<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
27+
28+
<FormationSection class="dark-background" key="evolution" last>
29+
<h2 name="title">Evolution</h2>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
31+
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
32+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
33+
</FormationSection>

‎src/layouts/Shell.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
--color-background: #ede9df;
2929
--color-black: #231f20;
3030
--color-white: #fbfffb;
31+
--color-overlay: #f7f9f3;
3132

3233
--size-gutter: 1rem;
3334
--size-gutter-big: 2rem;

‎src/layouts/sections/FormationSection.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import { getCollection } from "astro:content";
66
type Props = {
77
key: string;
88
class?: string;
9+
last?: boolean;
910
};
1011
11-
const { key, class: className } = Astro.props;
12+
const { key, class: className, last } = Astro.props;
1213
1314
const locale = currentLocale.get();
1415
@@ -29,7 +30,7 @@ const formationData = timelineCollection
2930
<slot name="title" />
3031
<slot />
3132
</div>
32-
<Timeline elements={formationData} />
33+
<Timeline elements={formationData} shortSpine={last} />
3334
</section>
3435

3536
<style>

0 commit comments

Comments
 (0)