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