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

refactor: ♻️ use more of the webc feature set proper

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-25 00:15:50 +02:00
parent c0b42b82d0
commit aa410f916a
21 changed files with 678 additions and 723 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/components/timeline.webc
View file

@ -1,4 +1,4 @@
<ul class="timeline">
<ul webc:root="override">
<li class="job" webc:for="job of jobs">
<icon class="icon" :icon="job.icon"></icon>
<p class="title" @text="job.title"></p>
@ -6,8 +6,8 @@
</li>
</ul>
<style>
.timeline {
<style webc:scoped="timeline">
:host {
--timeline-circle-size: 3rem;
--timeline-circle-background: var(--clr-box-background);
--timeline-stroke-color: var(--clr-timeline-stroke);
@ -20,70 +20,72 @@
--timeline-circle-size: 4rem;
}
& .job {
display: grid;
grid-template-areas:
'icon title'
'line text';
column-gap: 1em;
}
&::before {
content: '';
:host .job {
display: grid;
grid-template-areas:
'icon title'
'line text';
column-gap: 1em;
grid-row: icon / line;
grid-column: line;
justify-self: center;
}
width: var(--timeline-stroke-thickness);
height: 100%;
:host .job::before {
content: '';
background-color: var(--timeline-stroke-color);
}
grid-row: icon / line;
grid-column: line;
justify-self: center;
&:first-child::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
}
width: var(--timeline-stroke-thickness);
height: 100%;
&:last-child::before {
grid-row: icon;
align-self: start;
height: 50%;
}
}
background-color: var(--timeline-stroke-color);
}
& .icon {
grid-area: icon;
align-self: center;
:host .job:first-child::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
}
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
:host .job:last-child::before {
grid-row: icon;
align-self: start;
height: 50%;
}
background-color: var(--timeline-circle-background);
:host .icon {
grid-area: icon;
align-self: center;
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2);
}
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
& .title {
grid-area: title;
align-self: center;
background-color: var(--timeline-circle-background);
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);
}
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2);
}
& .text {
grid-area: text;
:host .title {
grid-area: title;
align-self: center;
margin-inline: 0;
margin-block: 0;
line-height: 1.5;
text-align: justify;
}
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>