166 lines
3.1 KiB
Vue
166 lines
3.1 KiB
Vue
<template>
|
|
<figure class="figure">
|
|
<div
|
|
class="figure__border"
|
|
:class="{ 'figure__border--polaroid': polaroidBorder }"
|
|
>
|
|
<template v-if="!nsfw || $root.nsfw">
|
|
<slot name="img"></slot>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div class="figure__cencor">
|
|
<div class="hazard-tape"></div>
|
|
<div class="hazard-tape"></div>
|
|
<div class="hazard-tape"></div>
|
|
<div class="hazard-tape"></div>
|
|
|
|
<p>🔥 Here be spicy dragons 🌶</p>
|
|
|
|
<nsfw-switch
|
|
:id="id"
|
|
v-model="$root.nsfw"
|
|
@change="$root.showWarning()"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<figcaption class="figure__meta">
|
|
<template v-if="!nsfw || $root.nsfw">
|
|
<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>
|
|
</div>
|
|
</figure>
|
|
</template>
|
|
|
|
<script>
|
|
import NsfwSwitch from "@/components/NsfwSwitch.vue";
|
|
|
|
export default {
|
|
props: {
|
|
polaroidBorder: Boolean,
|
|
nsfw: Boolean,
|
|
id: String,
|
|
},
|
|
components: {
|
|
NsfwSwitch,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "@/scss/_variables.scss";
|
|
@import "@/scss/_mixins.scss";
|
|
|
|
.figure {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
|
|
margin: 1em auto;
|
|
padding: 0 1em;
|
|
text-align: center;
|
|
|
|
&__border {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
justify-content: center;
|
|
|
|
margin: auto;
|
|
|
|
&--polaroid {
|
|
margin: 1em auto;
|
|
padding: 1em;
|
|
background-color: #fff;
|
|
box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
|
|
border-radius: 0.325em;
|
|
|
|
.figure__meta {
|
|
margin: 0.5em 0;
|
|
font-family: "Permanent Marker", fantasy;
|
|
color: $copy-color-darkgrey;
|
|
|
|
* {
|
|
color: inherit;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__cencor {
|
|
position: relative;
|
|
padding: 6em 0;
|
|
background-color: $bg-color-light;
|
|
overflow: hidden;
|
|
|
|
@include mq-desktop {
|
|
padding: 9em 7em;
|
|
}
|
|
|
|
.figure__border & .nsfw-switch {
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.hazard-tape {
|
|
position: absolute;
|
|
left: -1em;
|
|
right: -1em;
|
|
top: 0;
|
|
transform: rotate(0deg);
|
|
height: 1em;
|
|
background-image: repeating-linear-gradient(
|
|
-55deg,
|
|
#000,
|
|
#000 0.75em,
|
|
#ffb101 0.75em,
|
|
#ffb101 1.5em
|
|
);
|
|
|
|
&:nth-child(1) {
|
|
top: 5%;
|
|
transform: rotate(5deg);
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
top: 10%;
|
|
transform: rotate(-10deg);
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
top: 75%;
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
top: 85%;
|
|
transform: translate(-3em, -2em) rotate(40deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
object-fit: contain;
|
|
|
|
@include mq-desktop {
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
a:before {
|
|
display: inline;
|
|
content: "©";
|
|
}
|
|
}
|
|
</style>
|