Import TemplateHEADmaster

1 files changed, 72 insertions, 0 deletions

diff --git a/assets/sass/components/_gallery.scss b/assets/sass/components/_gallery.scss
new file mode 100644
index 0000000..27d4e84
--- /dev/null
+++ b/assets/sass/components/_gallery.scss
@@ -0,0 +1,72 @@
+///
+/// Big Picture by Pixelarity
+/// pixelarity.com | hello@pixelarity.com
+/// License: pixelarity.com/license
+///
+
+/* Gallery */
+
+	.gallery {
+		@include vendor('display', 'flex');
+		@include vendor('flex-wrap', 'wrap');
+		width: 45em;
+		max-width: 100%;
+		margin: 0 auto _size(element-margin) auto;
+
+		article {
+			@include vendor('transition', (
+				'transform 1s ease',
+				'opacity 1s ease'
+			));
+			@include vendor('transform', 'translateX(0)');
+			width: 50%;
+			position: relative;
+			opacity: 1.0;
+
+			.image {
+				margin: 0;
+				display: block;
+			}
+
+			@for $i from 1 through 23 {
+				&:nth-last-child(#{$i}n) {
+					@include vendor('transition-delay', '#{(0.05s * $i)}');
+				}
+
+				&:nth-last-child(#{$i + 1}n) {
+					@include vendor('transition-delay', '#{(0.05s * $i)}');
+				}
+			}
+		}
+
+		&.inactive {
+			article {
+				opacity: 0;
+
+				&.from-left {
+					@include vendor('transform', 'translateX(-14em)');
+				}
+
+				&.from-right {
+					@include vendor('transform', 'translateX(14em)');
+				}
+
+				&.from-top {
+					@include vendor('transform', 'translateY(-7em)');
+				}
+
+				&.from-bottom {
+					@include vendor('transform', 'translateY(7em)');
+				}
+			}
+		}
+
+		@include breakpoint('<=xsmall') {
+			@include vendor('flex-wrap', 'nowrap');
+			@include vendor('flex-direction', 'column');
+
+			article {
+				width: 100%;
+			}
+		}
+	}
\ No newline at end of file