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

100
src/components/traits.webc
View file

@ -1,13 +1,13 @@
<ul class="trait-list">
<ul webc:root="override">
<li class="trait" webc:for="trait of traits">
<div class="icon-box"><icon :icon="trait.icon" webc:nokeep></icon></div>
<div class="icon-box"><icon :@icon="trait.icon"></icon></div>
<p class="type" @text="trait.type"></p>
<p class="text" @text="trait.text"></p>
</li>
</ul>
<style>
.trait-list {
<style webc:scoped="trait-list">
:host {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
gap: 0.75em;
@ -16,7 +16,7 @@
padding: 0;
}
.trait {
:host .trait {
display: grid;
grid-template-areas:
'icon type'
@ -25,57 +25,59 @@
column-gap: 0.75em;
justify-items: start;
& .icon-box {
position: relative;
grid-area: icon;
}
width: 2em;
height: 2em;
:host .icon-box {
position: relative;
grid-area: icon;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
width: 2em;
height: 2em;
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.5em;
overflow: hidden;
z-index: 1;
background: linear-gradient(
to bottom right,
var(--clr-box-gradient-start) 0%,
var(--clr-box-gradient-end) 50%
);
&::before {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
}
box-shadow: 0.125em 0.125em 0.5em var(--clr-box-shadow);
border-radius: 0.5em;
overflow: hidden;
z-index: 1;
& svg {
padding: 0.5em;
}
}
& p {
margin-block: 0;
}
:host .icon-box::before {
content: '';
position: absolute;
inset: var(--border-thin);
background-color: var(--clr-box-background);
border-radius: inherit;
z-index: -1;
}
& .type {
font-size: 0.625em;
color: var(--clr-heading-data);
text-align: left;
text-transform: uppercase;
grid-area: type;
}
:host svg {
padding: 0.5em;
}
& .text {
font-size: 0.75em;
text-align: left;
margin-block: 0;
margin-inline: 0;
color: var(--clr-text);
grid-area: data;
}
:host p {
margin-block: 0;
}
:host .type {
font-size: 0.625em;
color: var(--clr-heading-data);
text-align: left;
text-transform: uppercase;
grid-area: type;
}
:host .text {
font-size: 0.75em;
text-align: left;
margin-block: 0;
margin-inline: 0;
color: var(--clr-text);
grid-area: data;
}
</style>