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

feat: 💄 rework design of job component to be more in line with overall site design

Browse source
This commit is contained in:
Sebin Nyshkim 2025-07-19 23:39:22 +02:00
parent d210d0b7e7
commit 2e39002ea8
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
1 changed files with 52 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/job.webc
View file

@ -1,5 +1,5 @@
<section webc:root="override">
<div class="icon"><icon :@icon="icon"></icon></div>
<div class="icon-box"><icon :@icon="icon"></icon></div>
<p class="title" @text="title"></p>
<p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
<slot></slot>
@ -8,16 +8,15 @@
<style webc:scoped="job">
: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);
--icon-size: 3rem;
--stroke-color: var(--clr-timeline-stroke);
--line-width: 0.25rem;
margin: 0;
padding: 0;
@media (min-width: 32em) {
--timeline-circle-size: 4rem;
--icon-size: 3.5rem;
}
}
@ -36,15 +35,20 @@
grid-column: line;
justify-self: center;
width: var(--timeline-stroke-thickness);
width: var(--line-width);
height: 100%;
background-color: var(--timeline-stroke-color);
background-color: var(--stroke-color);
background: linear-gradient(
to top,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
}
:host:first-of-type::before {
align-self: end;
height: calc(100% - var(--timeline-circle-size));
height: calc(100% - var(--icon-size));
}
:host:last-of-type::before {
@ -53,18 +57,45 @@
height: 50%;
}
:host > .icon {
:host .icon-box {
--border-radius: 0.75em;
position: relative;
grid-area: icon;
align-self: center;
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
width: var(--icon-size);
height: var(--icon-size);
background-color: var(--timeline-circle-background);
background: linear-gradient(
to bottom right,
oklch(from var(--clr-heading-underline) calc(l + 0.1) c h),
oklch(from var(--clr-heading-underline) calc(l - 0.2) c h)
);
border: var(--timeline-stroke-thickness) solid var(--timeline-stroke-color);
border-radius: 100%;
padding: calc(var(--timeline-circle-size) * 0.2);
border-radius: var(--border-radius);
padding: calc(var(--icon-size) / 4);
overflow: hidden;
z-index: 1;
}
:host .icon-box::before {
--gradient-dir: ellipse at bottom right;
--gradient-start: var(--clr-quick-info-gradient-end);
--gradient-end: var(--clr-quick-info-gradient-start);
content: '';
position: absolute;
inset: var(--line-width);
background: radial-gradient(
var(--gradient-dir),
var(--gradient-start) 70%,
var(--gradient-end) 100%
);
border-radius: calc(var(--border-radius) - 1em * 0.125);
z-index: -1;
}
:host .title {
@ -72,10 +103,10 @@
align-self: center;
font-family: var(--font-family-headings);
font-size: calc(var(--timeline-circle-size) / 2);
font-size: calc(var(--icon-size) / 2);
font-weight: bold;
text-align: start;
margin-block: calc(var(--timeline-circle-size) / 4);
margin-block: 0;
}
:host .text {
@ -85,5 +116,7 @@
margin-block: 0;
line-height: 1.5;
text-align: justify;
margin-block: calc(var(--icon-size) / 4);
}
</style>