Skip to content

Commit 1c7f72b

Browse files
Leonardo-OlivoLeonardo-Olivo
committed
feat: add dot at beginning of spine. Add TimelineEntry.
1 parent 4729b1b commit 1c7f72b

5 files changed

Lines changed: 120 additions & 72 deletions

File tree

‎src/components/Timeline.astro‎

Lines changed: 29 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,24 @@
11
---
22
type Props = {
3-
elements: {
4-
text: string;
5-
title: string;
6-
}[];
73
shortSpine?: boolean;
84
};
95
10-
const { elements, shortSpine = false } = Astro.props;
6+
const { shortSpine = false } = Astro.props;
117
12-
const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider) + (2 * var(--size-gutter-massive)))";
138
const displayTriangle = shortSpine ? "none" : "absolute";
149
---
1510

16-
<div class="timeline">
11+
<div class="dot"></div>
12+
<div class="timeline" data-short-spine={shortSpine}>
1713
<ol>
18-
{
19-
elements.map((element) => (
20-
<li>
21-
<h6>{element.title}</h6>
22-
<p>{element.text}</p>
23-
</li>
24-
))
25-
}
14+
<slot />
2615
</ol>
2716
</div>
2817

29-
<style define:vars={{ spineHeight, displayTriangle }}>
18+
<style define:vars={{ displayTriangle }}>
3019
.timeline {
3120
position: relative;
32-
}
33-
34-
h6 {
35-
margin-top: 0;
36-
}
37-
38-
p {
39-
font-size: 15px;
21+
margin-top: 10px;
4022
}
4123

4224
ol {
@@ -49,55 +31,44 @@ const displayTriangle = shortSpine ? "none" : "absolute";
4931
gap: var(--timeline-gap);
5032
}
5133

52-
/* spine of the timeline */
53-
.timeline::before {
34+
.dot {
35+
position: relative;
36+
}
37+
38+
.dot::before {
5439
content: "";
5540
width: 4px;
56-
height: var(--spineHeight);
57-
position: absolute;
41+
height: 8px;
42+
background-color: var(--color-primary);
5843
left: 50%;
44+
top: 0;
45+
position: absolute;
46+
z-index: 3;
5947
transform: translateX(-50%);
60-
background-color: var(--color-primary);
61-
z-index: 3; /* above potential dividers */
6248
}
6349

64-
li {
65-
display: flex;
66-
flex-direction: column;
67-
box-sizing: border-box;
68-
padding: 1rem;
69-
background: var(--color-overlay);
70-
width: 45%;
71-
box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
72-
}
73-
74-
li::after {
50+
/* spine of the timeline */
51+
.timeline::before {
7552
content: "";
76-
width: 20px;
77-
height: 20px;
78-
border-radius: 50%;
79-
border-width: 4px;
80-
border-style: solid;
81-
border-color: var(--color-primary);
82-
background: var(--color-white);
53+
width: 4px;
54+
height: calc(100% + var(--size-height-divider) + (3 * var(--size-gutter-massive)));
8355
position: absolute;
8456
left: 50%;
8557
transform: translateX(-50%);
86-
z-index: 5; /* above spine */
58+
background-color: var(--color-primary);
59+
z-index: 3; /* above potential dividers */
8760
}
8861

89-
@media screen and (min-width: 1025px) {
90-
ol li:nth-child(even) {
91-
align-self: flex-end;
92-
}
62+
.timeline[data-short-spine="true"]::before {
63+
height: 100%;
9364
}
9465

9566
@media screen and (max-width: 1025px) {
96-
li::after {
67+
.timeline::before {
9768
left: 90%;
9869
}
9970

100-
.timeline::before {
71+
.dot::before {
10172
left: 90%;
10273
}
10374

@@ -108,17 +79,13 @@ const displayTriangle = shortSpine ? "none" : "absolute";
10879
clip-path: polygon(0 0, 50% 100%, 100% 0);
10980
background-color: var(--color-primary);
11081
left: calc(90% - 10px);
111-
bottom: calc(-1 * (5px + var(--size-height-divider) + (2 * var(--size-gutter-massive))));
82+
bottom: -5px;
11283
position: var(--displayTriangle);
11384
z-index: 3; /* above potential dividers */
11485
}
11586

116-
li {
117-
width: 85%;
118-
}
119-
120-
li:not(:last-child) {
121-
margin-bottom: 4rem;
87+
.timeline::before {
88+
height: 100%;
12289
}
12390
}
12491
</style>

‎src/components/TimelineEntry.astro‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
3+
---
4+
5+
<li>
6+
<slot />
7+
</li>
8+
9+
<style>
10+
li {
11+
display: flex;
12+
flex-direction: column;
13+
box-sizing: border-box;
14+
padding: 1rem;
15+
background: var(--color-overlay);
16+
width: 45%;
17+
box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
18+
}
19+
20+
li::after {
21+
content: "";
22+
width: 20px;
23+
height: 20px;
24+
border-radius: 50%;
25+
border-width: 4px;
26+
border-style: solid;
27+
border-color: var(--color-primary);
28+
background: var(--color-white);
29+
position: absolute;
30+
left: 50%;
31+
transform: translateX(-50%);
32+
z-index: 5; /* above spine */
33+
}
34+
35+
@media screen and (min-width: 1025px) {
36+
li:nth-child(even) {
37+
align-self: flex-end;
38+
}
39+
}
40+
41+
@media screen and (max-width: 1025px) {
42+
li::after {
43+
left: 90%;
44+
}
45+
46+
li {
47+
width: 85%;
48+
}
49+
50+
li:not(:last-child) {
51+
margin-bottom: 4rem;
52+
}
53+
54+
li::after {
55+
width: 17px;
56+
height: 17px;
57+
}
58+
}
59+
</style>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import FormationSection from "../../../../layouts/sections/FormationSection.astr
77
import Divider from "../../../../components/Divider.astro";
88

99
<FormationSection class="spotlight" key="founding">
10-
<h2 name="title">Gründung</h2>
10+
<h2>Gründung</h2>
1111

1212
Obwohl die Idee und der Name schon einige Zeit zuvor existierten, wurde die Firma offiziell im Januar 2020 von Robin gegründet. Bald nach der Gründung ist Diego als zweiten Mitgründer dazugestossen. Fortan arbeiteten die beiden daran, die ersten Softwareprojekte umzusetzen.
1313

@@ -16,7 +16,7 @@ import Divider from "../../../../components/Divider.astro";
1616
<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
1717

1818
<FormationSection class="white-background" key="office">
19-
<h2 name="title">Büro und Mitarbeiter</h2>
19+
<h2>Büro und Mitarbeiter</h2>
2020

2121
Zuerst dachten wir, dass wir einfach von zu Hause aus arbeiten. Doch als wir davon erfuhren, dass in Oerlikon das ehemalige Swissôtel in eine WG für Studenten und Startups umgewandelt wird, haben wir uns sofort beworben und Glück gehabt. Die Geschichte kann [hier](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg) nachgelesen werden. Somit hatten wir von Februar 2021 bis Ende Jahr unser erstes Büro mitten in Oerlikon.
2222

@@ -29,7 +29,7 @@ import Divider from "../../../../components/Divider.astro";
2929
<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
3030

3131
<FormationSection class="dark-background" key="evolution" last>
32-
<h2 name="title">Entwicklung</h2>
32+
<h2>Entwicklung</h2>
3333

3434
Seither haben wir uns stetig weiterentwickelt und neue Projekte realisiert, die unsere Vision und Mission unterstützen. Wir freuen uns auf die kommenden Herausforderungen und Chancen, die vor uns liegen.
3535

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ path: formation
33
title: Formation
44
---
55

6-
76
import FormationSection from "../../../../layouts/sections/FormationSection.astro";
87
import Divider from "../../../../components/Divider.astro";
98

109
<FormationSection class="spotlight" key="founding">
11-
<h2 name="title">Founding</h2>
10+
<h2>Founding</h2>
1211

1312
Although the idea and name had existed for some time before, the company was officially founded by Robin in January 2020. Shortly after the founding, Diego joined as the second co-founder. From then on, the two worked together to implement the first software projects.
1413

@@ -17,7 +16,7 @@ import Divider from "../../../../components/Divider.astro";
1716
<Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
1817

1918
<FormationSection class="white-background" key="office">
20-
<h2 name="title">Office and employees</h2>
19+
<h2>Office and employees</h2>
2120

2221
At first, we thought we would simply work from home. But when we learned that the former Swissôtel in Oerlikon was being converted into shared accommodation for students and startups, we applied immediately and were lucky. The story can be read [here](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg). Thus, we had our first office in the heart of Oerlikon from February 2021 until the end of the year.
2322

@@ -30,7 +29,7 @@ import Divider from "../../../../components/Divider.astro";
3029
<Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
3130

3231
<FormationSection class="dark-background" key="evolution" last>
33-
<h2 name="title">Evolution</h2>
32+
<h2>Evolution</h2>
3433

3534
Since then, we have continuously evolved and realized new projects that support our vision and mission. We look forward to the upcoming challenges and opportunities that lie ahead.
3635

‎src/layouts/sections/FormationSection.astro‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
import { currentLocale } from "astro-nanostores-i18n:runtime";
33
import Timeline from "../../components/Timeline.astro";
44
import { getCollection } from "astro:content";
5+
import TimelineEntry from "../../components/TimelineEntry.astro";
56
67
type Props = {
78
key: string;
89
class?: string;
910
last?: boolean;
11+
start?: boolean;
1012
};
1113
1214
const { key, class: className, last } = Astro.props;
@@ -27,17 +29,27 @@ const formationData = timelineCollection
2729

2830
<section class:list={[className]}>
2931
<div>
30-
<slot name="title" />
3132
<slot />
3233
</div>
33-
<Timeline elements={formationData} shortSpine={last} />
34+
<div class="timeline">
35+
<Timeline shortSpine={last}>
36+
{
37+
formationData.map((element) => (
38+
<TimelineEntry>
39+
<div class="title">{element.title}</div>
40+
<p>{element.text}</p>
41+
</TimelineEntry>
42+
))
43+
}
44+
</Timeline>
45+
</div>
3446
</section>
3547

3648
<style>
3749
section {
3850
display: grid;
3951
column-gap: 1.5rem;
40-
grid-template-columns: 60% 40%;
52+
grid-template-columns: 55% 45%;
4153
}
4254

4355
@media screen and (max-width: 1025px) {
@@ -46,4 +58,15 @@ const formationData = timelineCollection
4658
row-gap: 1rem;
4759
}
4860
}
61+
62+
.title {
63+
font-size: 1.5rem;
64+
font-weight: 700;
65+
}
66+
67+
@media screen and (min-width: 1025px) {
68+
.timeline {
69+
margin-top: 2.2em;
70+
}
71+
}
4972
</style>

0 commit comments

Comments
 (0)