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

79
src/components/profile.webc
View file

@ -1,4 +1,4 @@
<aside class="profile">
<aside webc:root="override">
<div class="avatar">
<slot name="avatar"></slot>
</div>
@ -11,8 +11,8 @@
<slot></slot>
</aside>
<style>
.profile {
<style webc:scoped="profile">
:host {
--sidebar-position: static;
--sidebar-padding: 1rem;
--sidebar-grid-columns: auto 1fr;
@ -45,45 +45,44 @@
--sidebar-top-text-align: center;
--sidebar-avatar-size: 10em;
}
}
& .avatar {
grid-area: avatar;
justify-self: center;
:host .avatar {
grid-area: avatar;
justify-self: center;
& img {
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
aspect-ratio: 1/1;
border-radius: 1em;
object-fit: cover;
}
}
& .name,
& .species {
font-family: var(--font-family-headings);
text-align: var(--sidebar-top-text-align);
}
& .name {
grid-area: name;
align-self: end;
font-size: 1.375em;
font-weight: bold;
margin: 0;
}
& .species {
grid-area: species;
align-self: start;
font-size: 0.75em;
margin: 0;
}
& > :last-child {
grid-area: traits;
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
& img {
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
aspect-ratio: 1/1;
border-radius: 1em;
object-fit: cover;
}
}
:host :where(.name, .species) {
font-family: var(--font-family-headings);
text-align: var(--sidebar-top-text-align);
}
:host .name {
grid-area: name;
align-self: end;
font-size: 1.375em;
font-weight: bold;
margin: 0;
}
:host .species {
grid-area: species;
align-self: start;
font-size: 0.75em;
margin: 0;
}
:host > :last-child {
grid-area: traits;
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
}
</style>