X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fcomponents%2F_spotlights.scss;fp=assets%2Fsass%2Fcomponents%2F_spotlights.scss;h=337bc1a4768660fd47a06a8d8bbb615add7f2cf2;hb=748286b530a4b000cac6b88bbcebb258056a9e77;hp=0000000000000000000000000000000000000000;hpb=2882a244f06ed28dbd9148e7b36241242c836629;p=theme-danix.xyz.git

diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss
new file mode 100644
index 0000000..337bc1a
--- /dev/null
+++ b/assets/sass/components/_spotlights.scss
@@ -0,0 +1,119 @@
+///
+/// Forty by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Spotlights */
+
+	.spotlights {
+		border-top: 0 !important;
+
+		& + * {
+			border-top: 0 !important;
+		}
+
+		> section {
+			@include vendor('display', 'flex');
+			@include vendor('flex-direction', 'row');
+			background-color: desaturate(lighten(_palette(bg-alt), 2), 1);
+
+			> .image {
+				background-position: center center;
+				background-size: cover;
+				border-radius: 0;
+				display: block;
+				position: relative;
+				width: 30%;
+
+				img {
+					border-radius: 0;
+					display: block;
+					width: 100%;
+				}
+
+				&:before {
+					background: transparentize(_palette(bg), 0.1);
+					content: '';
+					display: block;
+					height: 100%;
+					left: 0;
+					opacity: 0;
+					position: absolute;
+					top: 0;
+					width: 100%;
+				}
+			}
+
+			> .content {
+				@include vendor('display', 'flex');
+				@include vendor('flex-direction', 'column');
+				@include vendor('justify-content', 'center');
+				@include vendor('align-items', 'center');
+				@include padding(2em, 3em);
+				width: 70%;
+
+				> .inner {
+					margin: 0 auto;
+					max-width: 100%;
+					width: _size(inner);
+				}
+			}
+
+			&:nth-child(2n) {
+				@include vendor('flex-direction', 'row-reverse');
+				background-color: desaturate(lighten(_palette(bg-alt), 4), 2);
+
+				> .content {
+					@include vendor('align-items', 'flex-end');
+				}
+			}
+		}
+
+		@include breakpoint('<=xlarge') {
+			> section {
+				> .image {
+					width: 40%;
+				}
+
+				> .content {
+					width: 60%;
+				}
+			}
+		}
+
+		@include breakpoint('<=large') {
+			> section {
+				> .image {
+					width: 45%;
+				}
+
+				> .content {
+					width: 55%;
+				}
+			}
+		}
+
+		@include breakpoint('<=medium') {
+			> section {
+				display: block;
+
+				> .image {
+					width: 100%;
+				}
+
+				> .content {
+					@include padding(4em, 3em);
+					width: 100%;
+				}
+			}
+		}
+
+		@include breakpoint('<=small') {
+			> section {
+				> .content {
+					@include padding(3em, 1.5em);
+				}
+			}
+		}
+	}
\ No newline at end of file