diff --git a/src/components/Figure.vue b/src/components/Figure.vue index 4d87614..e23158a 100644 --- a/src/components/Figure.vue +++ b/src/components/Figure.vue @@ -4,18 +4,57 @@ class="figure__border" :class="{ 'figure__border--polaroid': polaroidBorder }" > - + + + + + + + + + + + + 🔥 Here be spicy dragons 🌶 + + + + + - + + + + + + + + + + + + 😳 2 hot 4 u 🍆 + @@ -25,15 +64,22 @@ export default { @import "@/scss/_mixins.scss"; .figure { + display: flex; + flex-flow: row nowrap; + margin: 1em auto; + padding: 0 1em; text-align: center; &__border { + margin: auto; + &--polaroid { margin: 1em auto; padding: 1em; - background-color: #eee; + 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; @@ -47,6 +93,58 @@ export default { } } + &__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 { width: 100%; object-fit: contain;
🔥 Here be spicy dragons 🌶
😳 2 hot 4 u 🍆