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

refactor: ♻️ migrate profile sidebar to css grid

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-09 18:57:21 +02:00
parent faedd93767
commit 4d66d688ff
1 changed files with 42 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/profile.webc
View file

@ -1,32 +1,31 @@
<aside class="profile">
<div class="main">
<div class="avatar">
<slot name="avatar"></slot>
</div>
<div class="text">
<p class="name"><slot name="name"></slot></p>
<p class="species"><slot name="species"></slot></p>
</div>
</div>
<div class="data">
<slot></slot>
<div class="avatar">
<slot name="avatar"></slot>
</div>
<p class="name">
<slot name="name"></slot>
</p>
<p class="species">
<slot name="species"></slot>
</p>
<slot></slot>
</aside>
<style>
.profile {
--sidebar-position: static;
--sidebar-padding: 1rem;
--sidebar-top-flex: 1 1 auto;
--sidebar-top-flow: row nowrap;
--sidebar-top-text-align: left;
--sidebar-grid-columns: auto 1fr;
--sidebar-grid-areas: 'avatar name' 'avatar species' 'traits traits';
--sidebar-top-text-align: start;
--sidebar-avatar-size: 5em;
position: var(--sidebar-position);
top: var(--page-spacing);
display: flex;
flex-flow: column nowrap;
display: grid;
grid-template-columns: var(--sidebar-grid-columns);
grid-template-areas: var(--sidebar-grid-areas);
gap: 0.75em;
width: 100%;
@ -41,62 +40,50 @@
@media (min-width: 64em) {
--sidebar-position: sticky;
--sidebar-padding: 1.5rem;
--sidebar-top-flex: 0 0 auto;
--sidebar-top-flow: column nowrap;
--sidebar-grid-columns: 1fr;
--sidebar-grid-areas: 'avatar' 'name' 'species' 'traits';
--sidebar-top-text-align: center;
--sidebar-avatar-size: 10em;
}
& .main {
flex: var(--sidebar-top-flex);
display: flex;
flex-flow: var(--sidebar-top-flow);
align-items: center;
gap: 1em;
& .avatar {
grid-area: avatar;
justify-self: center;
& p {
margin-block: 0;
& + p {
margin-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;
}
}
& .avatar {
flex: 0 1 var(--sidebar-avatar-size);
}
& .data {
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
}
& picture {
display: block;
width: var(--sidebar-avatar-size);
height: var(--sidebar-avatar-size);
}
& img {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 1em;
& .name,
& .species {
font-family: var(--font-family-headings);
text-align: var(--sidebar-top-text-align);
}
& .name {
font-family: var(--font-family-headings);
grid-area: name;
align-self: end;
font-size: 1.375em;
font-weight: bold;
text-align: var(--sidebar-top-text-align);
margin: 0;
}
& .species {
font-family: var(--font-family-headings);
grid-area: species;
align-self: start;
font-size: 0.75em;
text-align: var(--sidebar-top-text-align);
background-color: var(--clr-tag-background);
margin: 0;
}
& > :last-child {
grid-area: traits;
border-block-start: var(--border-thin) solid var(--clr-box-border);
padding-block: 0.75em 0;
}
}
</style>