Updated styling

This commit is contained in:
Sebin Nyshkim 2019-11-06 16:19:49 +01:00
parent e5b53b0a6d
commit 4182f7a93b

View file

@ -1,5 +1,5 @@
<template> <template>
<figure :class="[{ float: imgPos }, imgPos]" :style="'width: ' + imgW"> <figure :class="[{ float: imgPos }, imgPos]">
<img :src="imgSrc" :alt="caption" /> <img :src="imgSrc" :alt="caption" />
<figcaption>{{ caption }}</figcaption> <figcaption>{{ caption }}</figcaption>
</figure> </figure>
@ -20,9 +20,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
figure { figure {
position: relative; position: relative;
overflow: hidden;
margin: 0; margin: 0;
line-height: 1; line-height: 1;
figcaption { figcaption {
@ -32,7 +31,6 @@ figure {
right: 0; right: 0;
line-height: 1.5; line-height: 1.5;
background: rgba(#000, 0.5); background: rgba(#000, 0.5);
color: #fff; color: #fff;
text-align: center; text-align: center;
@ -44,6 +42,11 @@ figure {
} }
.float { .float {
width: 100%;
@media (min-width: 35em) {
width: 20em;
&.left { &.left {
float: left; float: left;
margin: 0 0.75em 0.375em 0; margin: 0 0.75em 0.375em 0;
@ -54,4 +57,5 @@ figure {
margin: 0 0 1em 1em; margin: 0 0 1em 1em;
} }
} }
}
</style> </style>