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

fix: 🐛 prevent layout shift from lazy loaded images

Browse source
This commit is contained in:
Sebin Nyshkim 2025-04-09 19:12:44 +02:00
parent 2c06226078
commit 6e954e4099
1 changed files with 4 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/ref-gallery.webc
View file

@ -65,15 +65,10 @@
position: relative; position: relative;
grid-row: track; grid-row: track;
display: grid;
place-content: center;
font-size: 1.25em; font-size: 1.25em;
color: var(--clr-text); color: var(--clr-text);
width: 0;
height: 0;
cursor: pointer; cursor: pointer;
background-color: var(--clr-box-background); background-color: var(--clr-box-background);
@ -91,6 +86,7 @@
&::after { &::after {
position: absolute; position: absolute;
inset: 0; inset: 0;
align-content: center;
} }
&:disabled { &:disabled {
@ -101,7 +97,7 @@
& .prev { & .prev {
grid-column: prev; grid-column: prev;
margin-inline: 0.75em 0; left: 0.5em;
&::after { &::after {
content: '«' / 'Previous'; content: '«' / 'Previous';
@ -110,7 +106,7 @@
& .next { & .next {
grid-column: next; grid-column: next;
margin-inline: 0 0.75em; right: 0.5em;
&::after { &::after {
content: '»' / 'Next'; content: '»' / 'Next';
@ -142,7 +138,7 @@
& .ref-image img { & .ref-image img {
width: 100%; width: 100%;
height: 100%; height: 35em;
object-fit: cover; object-fit: cover;
} }