angestoepselt/homepage
5
0
Fork 0
mirror of https://codeberg.org/angestoepselt/homepage.git synced 2025-05-24 14:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix gallery preview rendering bug in Chrome

Browse source 
Since 1fr technically resolves to minmax(auto, 1fr), we were getting
images that are larger that we expect.
This commit is contained in:
Yannik Rödel 2022-12-18 12:46:22 +01:00
parent 3122f7c5fa
commit b32c583171
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
styles/components/_timeline.scss
View file

@ -146,8 +146,8 @@
.gallery-preview { .gallery-preview {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: var(--x1, 50%) 1fr; grid-template-columns: var(--x1, 50%) minmax(0, 1fr);
grid-template-rows: var(--y1, 50%) 1fr; grid-template-rows: var(--y1, 50%) minmax(0, 1fr);
gap: layout.$tiny-gap; gap: layout.$tiny-gap;
padding: layout.$tiny-gap; padding: layout.$tiny-gap;
height: 27rem; height: 27rem;
@ -191,8 +191,8 @@
} }
&:hover { &:hover {
grid-template-columns: var(--x2, var(--x1, 50%)) 1fr; grid-template-columns: var(--x2, var(--x1, 50%)) minmax(0, 1fr);
grid-template-rows: var(--y2, var(--x2, 50%)) 1fr; grid-template-rows: var(--y2, var(--x2, 50%)) minmax(0, 1fr);
&::after { &::after {
opacity: 1; opacity: 1;
@ -200,24 +200,26 @@
} }
&.horizontal { &.horizontal {
grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) 1fr; grid-template-columns: var(--a1, 33.3%) var(--b1, 33.3%) minmax(0, 1fr);
grid-template-rows: auto; grid-template-rows: auto;
> img:nth-of-type(1), > img:nth-of-type(1),
> img:nth-of-type(3) { > div:nth-of-type(1) > img,
> img:nth-of-type(3),
> div:nth-of-type(3) > img {
grid-column: unset; grid-column: unset;
grid-row: unset; grid-row: unset;
} }
&:hover { &:hover {
grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) 1fr; grid-template-columns: var(--a2, 33.3%) var(--b2, 33.3%) minmax(0, 1fr);
} }
&.two { &.two {
grid-template-columns: var(--a1, 50%) 1fr; grid-template-columns: var(--a1, 50%) minmax(0, 1fr);
&:hover { &:hover {
grid-template-columns: var(--a2, 50%) 1fr; grid-template-columns: var(--a2, 50%) minmax(0, 1fr);
} }
} }
} }