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

feat: add ability to display images as polaroid

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-06 09:09:48 +01:00
parent ae6c1f3eab
commit 3e803c1fde
1 changed files with 33 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

51
src/components/Figure.vue
View file

@ -1,15 +1,23 @@
<template>
<figure class="figure">
<slot name="img"></slot>
<figcaption class="figure__meta">
<slot name="caption"></slot>
<slot name="copyright"></slot>
</figcaption>
<div
class="figure__border"
:class="{ 'figure__border--polaroid': polaroidBorder }"
>
<slot name="img"></slot>
<figcaption class="figure__meta">
<slot name="caption"></slot> <slot name="copyright"></slot>
</figcaption>
</div>
</figure>
</template>
<script>
export default {};
export default {
props: {
polaroidBorder: Boolean,
},
};
</script>
<style lang="scss">
@ -20,6 +28,25 @@ export default {};
margin: 1em auto;
text-align: center;
&__border {
&--polaroid {
margin: 1em auto;
padding: 1em;
background-color: #eee;
box-shadow: inset 0 0 1em rgba(#000, 0.7), 0 0 1em rgba(#000, 0.7);
.figure__meta {
margin: 0.5em 0;
font-family: "Permanent Marker", fantasy;
color: $copy-color-darkgrey;
* {
color: inherit;
}
}
}
}
img {
width: 100%;
object-fit: contain;
@ -30,18 +57,6 @@ export default {};
}
}
label,
a {
font-size: 0.8em;
font-style: italic;
color: $copy-color;
}
label:after {
display: inline;
content: " ";
}
a:before {
display: inline;
content: "©";