diff --git a/src/components/Figure.vue b/src/components/Figure.vue index 1fbf6ca..ca184be 100644 --- a/src/components/Figure.vue +++ b/src/components/Figure.vue @@ -5,7 +5,7 @@ :class="{ 'figure__border--polaroid': polaroidBorder }" > - + @@ -15,25 +15,22 @@ - 🔥 Here be spicy dragons 🌶 + + 🔥 Here be spicy dragons 🌶 - + + - - - - - - - + + © @@ -66,6 +63,7 @@ export default { .figure { display: flex; flex-flow: row nowrap; + justify-content: center; margin: 1em auto; padding: 0 1em; @@ -81,10 +79,12 @@ export default { &--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; + background-color: #fff; + .figure__meta { margin: 0.5em 0; font-family: "Permanent Marker", fantasy; @@ -97,14 +97,40 @@ export default { } } + &__image { + flex: 1 0 auto; + + img { + max-width: 100%; + max-height: 35em; + } + } + + &__meta { + flex: 0 0 auto; + } + &__cencor { + flex: 1 0 auto; + + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + + padding: 0; + width: 50vw; + height: 35vh; + max-width: 35em; + max-height: 70em; position: relative; - padding: 6em 0; + background-color: $bg-color-light; overflow: hidden; @include mq-desktop { - padding: 9em 7em; + width: 20em; + height: 20em; } .figure__border & .nsfw-switch { @@ -128,12 +154,12 @@ export default { ); &:nth-child(1) { - top: 5%; + top: 10%; transform: rotate(5deg); } &:nth-child(2) { - top: 10%; + top: 15%; transform: rotate(-10deg); } @@ -144,23 +170,9 @@ export default { &:nth-child(4) { top: 85%; - transform: translate(-3em, -2em) rotate(40deg); + transform: translate(-5em, -2em) rotate(40deg); } } } - - img { - max-width: 100%; - object-fit: contain; - - @include mq-desktop { - max-height: 60vh; - } - } - - a:before { - display: inline; - content: "©"; - } } diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index a938e85..5151448 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -99,13 +99,21 @@ export default { } &__prev { - left: 1em; + left: 1.5em; transform: rotate(-135deg); + + @include mq-desktop { + left: 2em; + } } &__next { - right: 1em; + right: 1.5em; transform: rotate(45deg); + + @include mq-desktop { + right: 2em; + } } &__images { @@ -122,32 +130,18 @@ export default { height: 100%; transition: 0.3s all ease-in-out; + } - figure { - flex: 0 0 100%; + .figure { + margin: 0; + padding: 0 3em; + flex: 1 0 100%; - display: flex; - flex-flow: column nowrap; - justify-content: center; - - width: 100vw; - height: 100%; - margin: 0; - padding: 0 2em; - - @include mq-desktop { - padding: 0 2.5em; - } + @include mq-desktop { + padding: 0 3.5em; } - picture { - flex: 0 1 auto; - text-align: center; - max-height: 80%; - } - - figcaption { - flex: 0 0 100%; + &__meta { text-align: center; p {
🔥 Here be spicy dragons 🌶