SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: ♻️ migrate timeline component to css grid

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-07 03:42:25 +02:00
parent c57a815fed
commit bc27ccb1d2
1 changed files with 47 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/components/timeline.webc
View file

@ -1,73 +1,84 @@
<dl class="timeline"> <div class="timeline">
<div class="job" webc:for="job of jobs"> <div class="job" webc:for="job of jobs">
<icon class="icon" :icon="job.icon"></icon> <icon class="icon" :icon="job.icon"></icon>
<div class="content"> <p class="title" @text="job.title"></p>
<dt @text="job.title"></dt> <p class="text" @text="job.desc"></p>
<dd @text="job.desc"></dd>
</div>
</div> </div>
</dl> </div>
<style> <style>
.timeline { .timeline {
--timeline-circle-size: 4em; --timeline-circle-size: 3rem;
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16); --timeline-circle-background: var(--clr-box-background);
--timeline-stroke-color: var(--clr-timeline-stroke); --timeline-stroke-color: var(--clr-timeline-stroke);
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
position: relative; @media (min-width: 32em) {
margin: 0; --timeline-circle-size: 4rem;
padding: 0; }
& .job { & .job {
display: flex; display: grid;
flex-flow: row nowrap; grid-template-areas:
gap: 1em; 'icon title'
'line text';
column-gap: 1em;
margin: 1.5rem 0; &::before {
position: relative;
&:not(:last-child):before {
content: ''; content: '';
position: absolute;
inset: var(--timeline-circle-size) auto auto grid-row: icon / line;
calc(var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2); grid-column: line;
height: calc(100% - var(--timeline-circle-size) + 1.5rem); justify-self: center;
border-left: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
width: var(--timeline-stroke-thickness);
height: 100%;
background-color: var(--timeline-stroke-color);
}
&:first-child::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
}
&:last-child::before {
grid-row: icon;
align-self: start;
height: 50%;
} }
} }
& .icon { & .icon {
flex: 0 0 var(--timeline-circle-size); grid-area: icon;
display: flex; align-self: center;
align-items: center;
justify-content: center;
width: var(--timeline-circle-size); width: var(--timeline-circle-size);
height: var(--timeline-circle-size); height: var(--timeline-circle-size);
background-color: var(--timeline-circle-background); background-color: var(--timeline-circle-background);
margin: 0;
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color); border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%; border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2); padding: calc(var(--timeline-circle-size) * 0.2);
} }
& .content { & .title {
flex: 1 0 0; grid-area: title;
margin: 0; align-self: center;
}
& dt {
font-family: var(--font-family-headings); font-family: var(--font-family-headings);
font-size: calc(var(--timeline-circle-size) / 2); font-size: calc(var(--timeline-circle-size) / 2);
font-weight: bold; font-weight: bold;
line-height: calc(var(--timeline-circle-size) / 2); text-align: start;
margin-block: calc(var(--timeline-circle-size) / 4);
} }
& dd { & .text {
grid-area: text;
margin-inline: 0; margin-inline: 0;
margin-block: 0;
line-height: 1.5; line-height: 1.5;
text-align: justify; text-align: justify;
} }