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 | /* Tiles */\r |
8 | \r |
9 | .tiles {\r |
10 | @include vendor('display', 'flex');\r |
11 | @include vendor('flex-wrap', 'wrap');\r |
12 | border-top: 0 !important;\r |
13 | \r |
14 | & + * {\r |
15 | border-top: 0 !important;\r |
16 | }\r |
17 | \r |
18 | article {\r |
19 | @include vendor('align-items', 'center');\r |
20 | @include vendor('display', 'flex');\r |
21 | @include vendor('transition', (\r |
22 | 'transform 0.25s ease',\r |
23 | 'opacity 0.25s ease',\r |
24 | 'filter 1s ease',\r |
25 | '-webkit-filter 1s ease'\r |
26 | ));\r |
27 | @include padding(4em, 4em);\r |
28 | background-position: center;\r |
29 | background-repeat: no-repeat;\r |
30 | background-size: cover;\r |
31 | cursor: default;\r |
32 | height: 40vh;\r |
33 | max-height: 40em;\r |
34 | min-height: 23em;\r |
35 | overflow: hidden;\r |
36 | position: relative;\r |
37 | width: 40%;\r |
38 | \r |
39 | .image {\r |
40 | display: none;\r |
41 | }\r |
42 | \r |
43 | header {\r |
44 | position: relative;\r |
45 | z-index: 3;\r |
46 | }\r |
47 | \r |
48 | h3 {\r |
49 | font-size: 1.75em;\r |
50 | \r |
51 | a {\r |
52 | &:hover {\r |
53 | color: inherit !important;\r |
54 | }\r |
55 | }\r |
56 | }\r |
57 | \r |
58 | .link.primary {\r |
59 | border: 0;\r |
60 | height: 100%;\r |
61 | left: 0;\r |
62 | position: absolute;\r |
63 | top: 0;\r |
64 | width: 100%;\r |
65 | z-index: 4;\r |
66 | }\r |
67 | \r |
68 | &:before {\r |
69 | @include vendor('transition', 'opacity 0.5s ease');\r |
70 | bottom: 0;\r |
71 | content: '';\r |
72 | display: block;\r |
73 | height: 100%;\r |
74 | left: 0;\r |
75 | opacity: 0.85;\r |
76 | position: absolute;\r |
77 | width: 100%;\r |
78 | z-index: 2;\r |
79 | }\r |
80 | \r |
81 | &:after {\r |
cb4379e1 |
82 | background-color: transparentize(_palette_light(bg), 0.75);\r |
748286b5 |
83 | content: '';\r |
84 | display: block;\r |
85 | height: 100%;\r |
86 | left: 0;\r |
87 | position: absolute;\r |
88 | top: 0;\r |
89 | width: 100%;\r |
90 | z-index: 1;\r |
cb4379e1 |
91 | @media screen and (prefers-color-scheme: dark) {\r |
92 | background-color: transparentize(_palette_dark(bg), 0.75);\r |
93 | }\r |
748286b5 |
94 | }\r |
95 | \r |
96 | &:hover {\r |
97 | &:before {\r |
98 | opacity: 0;\r |
99 | }\r |
100 | }\r |
101 | \r |
102 | &.is-transitioning {\r |
103 | @include vendor('transform', 'scale(0.95)');\r |
104 | @include vendor('filter', 'blur(0.5em)');\r |
105 | opacity: 0;\r |
106 | }\r |
107 | \r |
108 | &:nth-child(4n - 1),\r |
109 | &:nth-child(4n - 2) {\r |
110 | width: 60%;\r |
111 | }\r |
112 | \r |
113 | &:nth-child(6n - 5) {\r |
114 | &:before {\r |
cb4379e1 |
115 | background-color: _palette_light(accent1);\r |
116 | @media screen and (prefers-color-scheme: dark) {\r |
117 | background-color: _palette_dark(accent1);\r |
118 | }\r |
748286b5 |
119 | }\r |
120 | }\r |
121 | \r |
122 | &:nth-child(6n - 4) {\r |
123 | &:before {\r |
cb4379e1 |
124 | background-color: _palette_light(accent2);\r |
125 | @media screen and (prefers-color-scheme: dark) {\r |
126 | background-color: _palette_dark(accent2);\r |
127 | }\r |
748286b5 |
128 | }\r |
129 | }\r |
130 | \r |
131 | &:nth-child(6n - 3) {\r |
132 | &:before {\r |
cb4379e1 |
133 | background-color: _palette_light(accent3);\r |
134 | @media screen and (prefers-color-scheme: dark) {\r |
135 | background-color: _palette_dark(accent3);\r |
136 | }\r |
748286b5 |
137 | }\r |
138 | }\r |
139 | \r |
140 | &:nth-child(6n - 2) {\r |
141 | &:before {\r |
cb4379e1 |
142 | background-color: _palette_light(accent4);\r |
143 | @media screen and (prefers-color-scheme: dark) {\r |
144 | background-color: _palette_dark(accent4);\r |
145 | }\r |
748286b5 |
146 | }\r |
147 | }\r |
148 | \r |
149 | &:nth-child(6n - 1) {\r |
150 | &:before {\r |
cb4379e1 |
151 | background-color: _palette_light(accent5);\r |
152 | @media screen and (prefers-color-scheme: dark) {\r |
153 | background-color: _palette_dark(accent5);\r |
154 | }\r |
748286b5 |
155 | }\r |
156 | }\r |
157 | \r |
158 | &:nth-child(6n) {\r |
159 | &:before {\r |
cb4379e1 |
160 | background-color: _palette_light(accent6);\r |
161 | @media screen and (prefers-color-scheme: dark) {\r |
162 | background-color: _palette_dark(accent6);\r |
163 | }\r |
748286b5 |
164 | }\r |
165 | }\r |
166 | }\r |
167 | \r |
168 | @include breakpoint('<=large') {\r |
169 | article {\r |
170 | @include padding(4em, 3em);\r |
171 | height: 30vh;\r |
172 | max-height: 30em;\r |
173 | min-height: 20em;\r |
174 | }\r |
175 | }\r |
176 | \r |
177 | @include breakpoint('<=medium') {\r |
178 | article {\r |
179 | width: 50% !important;\r |
180 | }\r |
181 | }\r |
182 | \r |
183 | @include breakpoint('<=small') {\r |
184 | article {\r |
185 | @include padding(3em, 1.5em);\r |
186 | height: 16em;\r |
187 | max-height: none;\r |
188 | min-height: 0;\r |
189 | \r |
190 | h3 {\r |
191 | font-size: 1.5em;\r |
192 | }\r |
193 | }\r |
194 | }\r |
195 | \r |
196 | @include breakpoint('<=xsmall') {\r |
197 | display: block;\r |
198 | \r |
199 | article {\r |
200 | height: 20em;\r |
201 | width: 100% !important;\r |
202 | }\r |
203 | }\r |
204 | } |