89 lines
1.9 KiB
Text
89 lines
1.9 KiB
Text
<ul webc:root="override">
|
|
<li class="job" webc:for="job of jobs">
|
|
<div class="icon"><icon :@icon="job.icon"></icon></div>
|
|
<p class="title" @text="job.title"></p>
|
|
<p class="text" @text="job.desc"></p>
|
|
</li>
|
|
</ul>
|
|
|
|
<style webc:scoped="timeline">
|
|
:host {
|
|
--timeline-circle-size: 3rem;
|
|
--timeline-circle-background: var(--clr-box-background);
|
|
--timeline-stroke-color: var(--clr-timeline-stroke);
|
|
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
|
|
|
|
margin-block: 1em;
|
|
padding: 0;
|
|
|
|
@media (min-width: 32em) {
|
|
--timeline-circle-size: 4rem;
|
|
}
|
|
}
|
|
|
|
:host .job {
|
|
display: grid;
|
|
grid-template-areas:
|
|
'icon title'
|
|
'line text';
|
|
column-gap: 1em;
|
|
}
|
|
|
|
:host .job::before {
|
|
content: '';
|
|
|
|
grid-row: icon / line;
|
|
grid-column: line;
|
|
justify-self: center;
|
|
|
|
width: var(--timeline-stroke-thickness);
|
|
height: 100%;
|
|
|
|
background-color: var(--timeline-stroke-color);
|
|
}
|
|
|
|
:host .job:first-child::before {
|
|
align-self: end;
|
|
height: calc(100% - var(--timeline-circle-size));
|
|
}
|
|
|
|
:host .job:last-child::before {
|
|
grid-row: icon;
|
|
align-self: start;
|
|
height: 50%;
|
|
}
|
|
|
|
:host .job > .icon {
|
|
grid-area: icon;
|
|
align-self: center;
|
|
|
|
width: var(--timeline-circle-size);
|
|
height: var(--timeline-circle-size);
|
|
|
|
background-color: var(--timeline-circle-background);
|
|
|
|
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
|
|
border-radius: 100%;
|
|
padding: calc(var(--timeline-circle-size) * 0.2);
|
|
}
|
|
|
|
:host .title {
|
|
grid-area: title;
|
|
align-self: center;
|
|
|
|
font-family: var(--font-family-headings);
|
|
font-size: calc(var(--timeline-circle-size) / 2);
|
|
font-weight: bold;
|
|
text-align: start;
|
|
margin-block: calc(var(--timeline-circle-size) / 4);
|
|
}
|
|
|
|
:host .text {
|
|
grid-area: text;
|
|
|
|
margin-inline: 0;
|
|
margin-block: 0;
|
|
line-height: 1.5;
|
|
text-align: justify;
|
|
}
|
|
</style>
|