Updated styling
This commit is contained in:
parent
e5b53b0a6d
commit
4182f7a93b
1 changed files with 15 additions and 11 deletions
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue