diff --git a/src/App.vue b/src/App.vue index e42c7c9..48bbdd8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -209,85 +209,82 @@ - +
+ +
+ By Grisser +
+
+
+ +
+ By Valentina Paz +
+
+
+ +
+ By + + Marsel-Defender + +
+
+
+ +
+ By + + SirBoburto + +
+
+
+ +
+ By SexMuffin +
+
+
+ +
+ By Knuxlight +
+
+
+ +
+ By + ShoNuff44 +
+
+
+ +
+ By j-cock +
+
+
+ +
+ By j-cock +
+
+
+ +
+ By j-cock +
+
+
+ +
+ By + + Marsel-Defender + +
+

Penis

@@ -348,128 +345,91 @@

Casual Wear

- +
+ Tank Top +
Loose Tank Top
+
+
+ Shorts +
+ Short shorts (knee-long) with dangling bands +
+
+
+ Hoodie +
Sweater/Hoodie tied around waist
+
+
+ Sneakers +
Sneakers (Air Jordan style)
+
-
- -
-

Cold Weather

- +
+ Coat +
Coat
+
+
+ Scarf +
Checkered scarf with short cords
+
+
+ Hoodie +
Hoodie
+
+
+ Jeans +
Loose fit Jeans
+
+
+ Boots +
Boots
+
-
- -
-

Workout

- +
+ Hoodie +
+ Either Sleeveless Hoodie (unzipped, hood on) +
+
+
+ Tank Top +
Or Tank Top
+
+
+ Gloves +
Fingerless Gloves
+
+
+ Watch +
Apple Watch (for fitness tracking)
+
+
+ Shorts +
Short Shorts
+
+
+ Sneakers +
Sneakers (Air Jordan style)
+
-
- -
-

"Doesn't need to leave the house today" Style

- +
+ Tank Top +
Tracksuit pants (optional)
+
+
+ Shorts +
Topless w/ jockstrap/boxer briefs
+
- -
- -
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue index 5328132..758a187 100644 --- a/src/components/Gallery.vue +++ b/src/components/Gallery.vue @@ -1,14 +1,35 @@ @@ -17,27 +38,33 @@ export default { name: "gallery", data() { return { - bigImage: "", + activeImage: 0, images: [] }; }, + computed: { + offset() { + return `margin-left: -${this.activeImage * 100}vw`; + } + }, methods: { - setBigImage(index) { - this.bigImage = this.images[index]; + setActive(index) { + this.activeImage = index; + }, + prev() { + if (this.activeImage > 0) { + this.activeImage -= 1; + } + }, + next() { + if (this.activeImage < this.images.length - 1) { + this.activeImage += 1; + } } }, mounted() { - const images = Array.from(this.$el.querySelectorAll("li img")); - - images.forEach((img, idx) => { - img.addEventListener("click", e => { - e.preventDefault(); - this.setBigImage(idx); - }); - }); - - this.images = images.map(img => img.src); - this.bigImage = images[0].src; + const images = Array.from(this.$el.querySelectorAll("img")); + this.images = images; } }; @@ -47,86 +74,115 @@ export default { @import "@scss/_mixins.scss"; .gallery { - margin: auto; + &__prev, + &__next { + position: absolute; + top: 50%; + transform: translateY(-50%); - @include mq-desktop { - max-width: 70em; + width: 1em; + height: 1em; + + border: { + top: 0.125em solid #fff; + right: 0.125em solid #fff; + } + + @include mq-desktop { + width: 1.5em; + height: 1.5em; + } } - &__bigimage { - width: 100%; - height: 40vh; + &__prev { + left: 1em; + transform: rotate(-135deg); + } + + &__next { + right: 1em; + transform: rotate(45deg); + } + + &__images { + position: relative; + overflow: hidden; + height: 50vh; @include mq-desktop { height: 80vh; } - - display: flex; - justify-content: center; - align-content: center; - align-items: center; - - background-color: $copy-color-darkgrey; - - overflow: hidden; } - &__imagecontainer { - position: relative; - margin: 0; + &__viewport { + display: flex; + flex-flow: row nowrap; + width: 100%; height: 100%; - flex: 1; - display: flex; - justify-content: center; - align-content: center; - align-items: center; - box-shadow: inset 0 0 15em #000; + + transition: 0.3s all ease-in-out; + + figure { + flex: 0 0 100%; + + display: flex; + flex-flow: row wrap; + justify-content: center; + + width: 100vw; + margin: 0; + padding: 0 2em; + + @include mq-desktop { + padding: 0 2.5em; + } + } img { - align-self: center; max-width: 100%; - max-height: 100%; + max-height: 90%; + object-fit: contain; } figcaption { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(#000, 0.5); - color: $copy-color; + flex: 0 0 100%; text-align: center; } } - ul { + &__navigation { display: flex; - list-style: none; - height: 6.5em; - margin: 0; - padding: 0.5em; - overflow-x: scroll; - background-color: $copy-color-darkgrey; - } + flex-flow: row wrap; + justify-content: center; - li { - flex: 1 0 auto; - text-align: center; - height: 100%; - max-width: 100%; - max-height: 100%; + ul { + flex: 0 1 auto; - & + li { - margin-left: 0.5em; + display: flex; + flex-flow: row wrap; + justify-content: center; + + list-style: none; + margin: 1em 0; + padding: 0; } - img { - cursor: pointer; - border: 0.25em solid #fff; - align-self: center; - max-width: 100%; - max-height: 100%; + li { + flex: 0 1 auto; + padding: 0.375em; + + a { + display: block; + width: 0.5em; + height: 0.5em; + border-radius: 1em; + background: rgba(#fff, 0.5); + + &.active { + background: #fff; + } + } } } }