748286b5 |
1 | ///\r |
2 | /// Forty by HTML5 UP\r |
3 | /// html5up.net | @ajlkn\r |
4 | /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r |
5 | ///\r |
6 | \r |
7 | /* Spotlights */\r |
8 | \r |
9 | .spotlights {\r |
10 | border-top: 0 !important;\r |
11 | \r |
12 | & + * {\r |
13 | border-top: 0 !important;\r |
14 | }\r |
15 | \r |
16 | > section {\r |
17 | @include vendor('display', 'flex');\r |
18 | @include vendor('flex-direction', 'row');\r |
19 | background-color: desaturate(lighten(_palette(bg-alt), 2), 1);\r |
20 | \r |
21 | > .image {\r |
22 | background-position: center center;\r |
23 | background-size: cover;\r |
24 | border-radius: 0;\r |
25 | display: block;\r |
26 | position: relative;\r |
27 | width: 30%;\r |
28 | \r |
29 | img {\r |
30 | border-radius: 0;\r |
31 | display: block;\r |
32 | width: 100%;\r |
33 | }\r |
34 | \r |
35 | &:before {\r |
36 | background: transparentize(_palette(bg), 0.1);\r |
37 | content: '';\r |
38 | display: block;\r |
39 | height: 100%;\r |
40 | left: 0;\r |
41 | opacity: 0;\r |
42 | position: absolute;\r |
43 | top: 0;\r |
44 | width: 100%;\r |
45 | }\r |
46 | }\r |
47 | \r |
48 | > .content {\r |
49 | @include vendor('display', 'flex');\r |
50 | @include vendor('flex-direction', 'column');\r |
51 | @include vendor('justify-content', 'center');\r |
52 | @include vendor('align-items', 'center');\r |
53 | @include padding(2em, 3em);\r |
54 | width: 70%;\r |
55 | \r |
56 | > .inner {\r |
57 | margin: 0 auto;\r |
58 | max-width: 100%;\r |
59 | width: _size(inner);\r |
60 | }\r |
61 | }\r |
62 | \r |
63 | &:nth-child(2n) {\r |
64 | @include vendor('flex-direction', 'row-reverse');\r |
65 | background-color: desaturate(lighten(_palette(bg-alt), 4), 2);\r |
66 | \r |
67 | > .content {\r |
68 | @include vendor('align-items', 'flex-end');\r |
69 | }\r |
70 | }\r |
71 | }\r |
72 | \r |
73 | @include breakpoint('<=xlarge') {\r |
74 | > section {\r |
75 | > .image {\r |
76 | width: 40%;\r |
77 | }\r |
78 | \r |
79 | > .content {\r |
80 | width: 60%;\r |
81 | }\r |
82 | }\r |
83 | }\r |
84 | \r |
85 | @include breakpoint('<=large') {\r |
86 | > section {\r |
87 | > .image {\r |
88 | width: 45%;\r |
89 | }\r |
90 | \r |
91 | > .content {\r |
92 | width: 55%;\r |
93 | }\r |
94 | }\r |
95 | }\r |
96 | \r |
97 | @include breakpoint('<=medium') {\r |
98 | > section {\r |
99 | display: block;\r |
100 | \r |
101 | > .image {\r |
102 | width: 100%;\r |
103 | }\r |
104 | \r |
105 | > .content {\r |
106 | @include padding(4em, 3em);\r |
107 | width: 100%;\r |
108 | }\r |
109 | }\r |
110 | }\r |
111 | \r |
112 | @include breakpoint('<=small') {\r |
113 | > section {\r |
114 | > .content {\r |
115 | @include padding(3em, 1.5em);\r |
116 | }\r |
117 | }\r |
118 | }\r |
119 | } |