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 |
abdd02ed |
17 | overflow: hidden;\r |
748286b5 |
18 | @include vendor('display', 'flex');\r |
19 | @include vendor('flex-direction', 'row');\r |
cb4379e1 |
20 | background-color: desaturate(lighten(_palette_light(bg-alt), 2), 1);\r |
21 | @media screen and (prefers-color-scheme: dark) {\r |
22 | background-color: desaturate(lighten(_palette_dark(bg-alt), 2), 1);\r |
23 | }\r |
748286b5 |
24 | \r |
25 | > .image {\r |
26 | background-position: center center;\r |
27 | background-size: cover;\r |
28 | border-radius: 0;\r |
29 | display: block;\r |
30 | position: relative;\r |
31 | width: 30%;\r |
32 | \r |
33 | img {\r |
34 | border-radius: 0;\r |
35 | display: block;\r |
36 | width: 100%;\r |
37 | }\r |
38 | \r |
39 | &:before {\r |
cb4379e1 |
40 | background: transparentize(_palette_light(bg), 0.1);\r |
748286b5 |
41 | content: '';\r |
42 | display: block;\r |
43 | height: 100%;\r |
44 | left: 0;\r |
45 | opacity: 0;\r |
46 | position: absolute;\r |
47 | top: 0;\r |
48 | width: 100%;\r |
cb4379e1 |
49 | @media screen and (prefers-color-scheme: dark) {\r |
50 | background: transparentize(_palette_dark(bg), 0.1);\r |
51 | }\r |
748286b5 |
52 | }\r |
53 | }\r |
54 | \r |
55 | > .content {\r |
56 | @include vendor('display', 'flex');\r |
57 | @include vendor('flex-direction', 'column');\r |
58 | @include vendor('justify-content', 'center');\r |
59 | @include vendor('align-items', 'center');\r |
60 | @include padding(2em, 3em);\r |
61 | width: 70%;\r |
62 | \r |
63 | > .inner {\r |
64 | margin: 0 auto;\r |
65 | max-width: 100%;\r |
66 | width: _size(inner);\r |
67 | }\r |
68 | }\r |
69 | \r |
70 | &:nth-child(2n) {\r |
71 | @include vendor('flex-direction', 'row-reverse');\r |
cb4379e1 |
72 | background-color: desaturate(lighten(_palette_light(bg-alt), 4), 2);\r |
73 | @media screen and (prefers-color-scheme: dark) {\r |
74 | background-color: desaturate(lighten(_palette_dark(bg-alt), 4), 2);\r |
75 | }\r |
748286b5 |
76 | \r |
77 | > .content {\r |
78 | @include vendor('align-items', 'flex-end');\r |
79 | }\r |
80 | }\r |
81 | }\r |
82 | \r |
83 | @include breakpoint('<=xlarge') {\r |
84 | > section {\r |
85 | > .image {\r |
86 | width: 40%;\r |
87 | }\r |
88 | \r |
89 | > .content {\r |
90 | width: 60%;\r |
91 | }\r |
92 | }\r |
93 | }\r |
94 | \r |
95 | @include breakpoint('<=large') {\r |
96 | > section {\r |
97 | > .image {\r |
98 | width: 45%;\r |
99 | }\r |
100 | \r |
101 | > .content {\r |
102 | width: 55%;\r |
103 | }\r |
104 | }\r |
105 | }\r |
106 | \r |
107 | @include breakpoint('<=medium') {\r |
108 | > section {\r |
109 | display: block;\r |
110 | \r |
111 | > .image {\r |
112 | width: 100%;\r |
113 | }\r |
114 | \r |
115 | > .content {\r |
116 | @include padding(4em, 3em);\r |
117 | width: 100%;\r |
118 | }\r |
119 | }\r |
120 | }\r |
121 | \r |
122 | @include breakpoint('<=small') {\r |
123 | > section {\r |
124 | > .content {\r |
125 | @include padding(3em, 1.5em);\r |
126 | }\r |
127 | }\r |
128 | }\r |
129 | } |