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