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"> <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="title" @text="title"></p>
<p class="text" webc:type="11ty" @11ty:type="md" webc:keep> <p class="text" webc:type="11ty" @11ty:type="md" webc:keep>
<slot></slot> <slot></slot>
@ -8,16 +8,15 @@
<style webc:scoped="job"> <style webc:scoped="job">
:host { :host {
--timeline-circle-size: 3rem; --icon-size: 3rem;
--timeline-circle-background: var(--clr-box-background); --stroke-color: var(--clr-timeline-stroke);
--timeline-stroke-color: var(--clr-timeline-stroke); --line-width: 0.25rem;
--timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
margin: 0; margin: 0;
padding: 0; padding: 0;
@media (min-width: 32em) { @media (min-width: 32em) {
--timeline-circle-size: 4rem; --icon-size: 3.5rem;
} }
} }
@ -36,15 +35,20 @@
grid-column: line; grid-column: line;
justify-self: center; justify-self: center;
width: var(--timeline-stroke-thickness); width: var(--line-width);
height: 100%; 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 { :host:first-of-type::before {
align-self: end; align-self: end;
height: calc(100% - var(--timeline-circle-size)); height: calc(100% - var(--icon-size));
} }
:host:last-of-type::before { :host:last-of-type::before {
@ -53,18 +57,45 @@
height: 50%; height: 50%;
} }
:host > .icon { :host .icon-box {
--border-radius: 0.75em;
position: relative;
grid-area: icon; grid-area: icon;
align-self: center;
width: var(--timeline-circle-size); width: var(--icon-size);
height: var(--timeline-circle-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: var(--border-radius);
border-radius: 100%; padding: calc(var(--icon-size) / 4);
padding: calc(var(--timeline-circle-size) * 0.2);
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 { :host .title {
@ -72,10 +103,10 @@
align-self: center; align-self: center;
font-family: var(--font-family-headings); font-family: var(--font-family-headings);
font-size: calc(var(--timeline-circle-size) / 2); font-size: calc(var(--icon-size) / 2);
font-weight: bold; font-weight: bold;
text-align: start; text-align: start;
margin-block: calc(var(--timeline-circle-size) / 4); margin-block: 0;
} }
:host .text { :host .text {
@ -85,5 +116,7 @@
margin-block: 0; margin-block: 0;
line-height: 1.5; line-height: 1.5;
text-align: justify; text-align: justify;
margin-block: calc(var(--icon-size) / 4);
} }
</style> </style>