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

feat: add new RefFigure style

Browse source
This commit is contained in:
Sebin Nyshkim 2023-07-21 15:14:56 +02:00
parent 120a1a03e3
commit c143956e9f
1 changed files with 46 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/components/RefFigure.vue
View file

@ -4,6 +4,7 @@ import { nsfwKey, showModalKey } from '@/keys'
import RefToggle from '@/components/RefToggle.vue'
interface Props {
cornerText?: boolean
polaroidBorder?: boolean
dropshadow?: boolean
nsfw?: boolean
@ -18,7 +19,13 @@ defineProps<Props>()
<template>
<figure class="figure">
<div class="figure__border" :class="{ 'figure__border--polaroid': polaroidBorder }">
<div
class="figure__border"
:class="{
'figure__border--polaroid': polaroidBorder,
'figure__border--cornertext': cornerText
}"
>
<template v-if="!nsfw || isNsfw">
<div class="figure__image" :class="{ 'figure__image--dropshadow': dropshadow }">
<slot name="img"></slot>
@ -48,18 +55,14 @@ defineProps<Props>()
</div>
</template>
<figcaption class="figure__meta">
<template v-if="!nsfw || isNsfw">
<template v-if="!nsfw || isNsfw">
<figcaption class="figure__meta">
<div class="caption">
<slot name="caption"></slot>
</div>
<div class="copyright">© <slot name="copyright"></slot></div>
</template>
<template v-else>
<p>😳 2 hot 4 u 🍆</p>
</template>
</figcaption>
</figcaption>
</template>
</div>
</figure>
</template>
@ -93,6 +96,40 @@ defineProps<Props>()
}
}
&__border--cornertext {
position: relative;
}
&__border--cornertext img,
&__border--cornertext &__cencor {
margin: 1rem 0;
border-radius: 1rem;
filter: drop-shadow(0 0 0.625rem black);
}
&__border--cornertext &__meta {
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.7);
font-size: 0.75rem;
margin: 0 0 1.35rem 0;
border-radius: 1em 0 1rem 0;
padding: 0.25rem 0.75rem;
.caption,
.copyright {
display: inline;
}
.caption {
margin: 0 0.125rem 0 0;
}
}
&__border--polaroid &__meta {
font-family: 'Permanent Marker', fantasy;
color: var(--color-figure-polaroid-text);