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

refactor: ♻️ use grid areas and fix no-image Safari alignment bug

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-14 14:34:40 +02:00
parent 86f1c62eed
commit 262ed4d526
1 changed files with 14 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/abilities.webc
View file

@ -8,7 +8,7 @@
sizes="(min-width: 64em) 500px, 250px" sizes="(min-width: 64em) 500px, 250px"
></eleventy-image ></eleventy-image
><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span> ><span class="no-image" webc:else>Here you would see an illustration… If I had one…</span>
<figcaption class="info"> <figcaption class="caption">
<p class="title" @text="ability.name"></p> <p class="title" @text="ability.name"></p>
<p class="description" @text="ability.description"></p> <p class="description" @text="ability.description"></p>
</figcaption> </figcaption>
@ -17,21 +17,26 @@
<style> <style>
.ability { .ability {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template:
justify-items: center; 'image' 15em
align-items: center; 'caption' 1fr / 1fr;
place-items: center;
gap: 1.5em; gap: 1.5em;
margin-block: 1.5em; margin-block: 1.5em;
margin-inline: 0; margin-inline: 0;
@media (min-width: 45em) { @media (min-width: 45em) {
grid-template-columns: auto 1fr; grid-template: 'image caption' 1fr / 15em 1fr;
} }
& .image, & .image,
& .no-image { & .no-image {
max-width: 15em; grid-area: image;
display: grid;
place-items: center;
width: 15em;
height: 15em;
} }
& .image { & .image {
@ -41,13 +46,14 @@
} }
& .no-image { & .no-image {
align-content: center;
text-align: center; text-align: center;
border: 0.125em dashed var(--clr-box-border); border: 0.125em dashed var(--clr-box-border);
padding: 1em; padding: 1em;
}
aspect-ratio: 1/1; & .caption {
grid-area: caption;
} }
& .title { & .title {