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