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

fix: safari rendering inconsistencies with polaroid border compared to other browsers

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-06 23:19:58 +01:00
parent 9fab037276
commit 829444a37f
2 changed files with 8 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/Figure.vue
View file

@ -26,7 +26,7 @@
</template> </template>
<figcaption class="figure__meta"> <figcaption class="figure__meta">
<template v-if="!nsfw"> <template v-if="!nsfw || $root.nsfw">
<div class="caption"> <div class="caption">
<slot name="caption"></slot> <slot name="caption"></slot>
</div> </div>
@ -72,6 +72,10 @@ export default {
text-align: center; text-align: center;
&__border { &__border {
display: flex;
flex-flow: column nowrap;
justify-content: center;
margin: auto; margin: auto;
&--polaroid { &--polaroid {
@ -146,12 +150,11 @@ export default {
} }
img { img {
width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
@include mq-desktop { @include mq-desktop {
max-width: 70em; max-height: 60vh;
max-height: 80vh;
} }
} }

13
src/components/Gallery.vue
View file

@ -146,19 +146,8 @@ export default {
max-height: 80%; max-height: 80%;
} }
img {
object-fit: contain;
width: 100%;
max-height: 50vh;
@include mq-desktop {
max-height: 80vh;
}
}
figcaption { figcaption {
flex: 1 0 auto; flex: 0 0 100%;
text-align: center; text-align: center;
p { p {