splitted up stylesheet and added lots of scaffolding to it. Style needs working.

[theme-danix.xyz.git] / assets / sass / components / _spotlights.scss

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