Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: static/poland/css/index.css

Issue 29800606: Fixes #91 - Homepage duplicate in Polish for SEM (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Updated content Created June 14, 2018, 2:28 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « static/poland/css/fonts.css ('k') | static/poland/css/main.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /******************************************************************************
2 * Temparary styles
3 *****************************************************************************/
4
5 .avoid-wrap {display: inline-block;}
6 .small {font-size: smaller;}
7
8 /******************************************************************************
9 * Browser-based styles
10 *****************************************************************************/
11
12 .show-on-msie { display: none; }
13 .msie .show-on-msie { display: inherit; }
14 .msie .hide-on-msie { display: none; }
15
16 .show-on-maxthon { display: none; }
17 .maxthon .show-on-maxthon { display: inherit; }
18 .maxthon .hide-on-maxthon { display: none; }
19
20 /******************************************************************************
21 * #hero-download
22 *****************************************************************************/
23
24 #hero-download
25 {
26 padding: 3em 1em;
27 }
28
29 @media (min-width: 576px) and (max-width: 1023px)
30 {
31 /* add spacing left/right on tablets */
32 #hero-download
33 {
34 padding-left: 3em;
35 padding-right: 3em;
36 }
37 }
38
39 @media (max-width: 575px)
40 {
41 /* disable avoid-wrap inside h1 on mobile */
42 #hero-download h1 .avoid-wrap
43 {
44 display: inline;
45 }
46 }
47
48 @media (max-width: 1023px)
49 {
50 /* force hero unit columns to break on large tablets */
51 #hero-download .column
52 {
53 width: 100%;
54 }
55 }
56
57 @media (min-width: 1024px)
58 {
59 #hero-download
60 {
61 padding-top: 6em;
62 padding-bottom: 6em;
63 }
64 }
65
66 #hero-download h1
67 {
68 /* Spacing is provided by the hero-download section */
69 margin-top: 0;
70 }
71
72 @media (min-width: 576px)
73 {
74 /* force break without <br> on large screens */
75 #hero-download h1 .avoid-wrap:first-of-type
76 {
77 display: block;
78 }
79 }
80
81 #hero-download-tos
82 {
83 margin-bottom: 0.5em;
84 }
85
86 #hero-download-alternate
87 {
88 font-size: smaller;
89 }
90
91 #hero-download-button
92 {
93 display: inline-block;
94 min-width: 250px;
95 /* stretch full-width <= small tablets */
96 width: 100%;
97 /* 0.2em taller than normal buttons */
98 padding-top: 0.8em;
99 padding-bottom: 0.8em;
100 color: #fff;
101 background-color: #3D9C4F;
102 }
103
104 #hero-download-button:hover,
105 #hero-download-button:focus
106 {
107 background-color: #258333;
108 }
109
110 @media (min-width: 576px)
111 {
112 #hero-download-button
113 {
114 /* force auto-width >= small tablets */
115 width: auto;
116 }
117 }
118
119 #hero-download-video
120 {
121 /* add space above on phones & tablets */
122 margin-top: 2em;
123 /* prevent default full-width on small tablets */
124 max-width: 550px;
125 }
126
127 #hero-download-video
128 {
129 /* provide a little space between thumbnail and border + shadow */
130 padding: 1em 1em 0 1em;
131 }
132
133 @media (min-width: 1024px)
134 {
135 #hero-download-video
136 {
137 /* keep aligned-top despite padding below */
138 margin-top: -1em;
139 }
140 }
141
142 #hero-download-video.has-iframe
143 {
144 /* remove space around thumbnail when thumbnail is replaced by video */
145 padding: 0;
146 }
147
148 /** Hide the video border + shadow only when the thumbnail alone is showing */
149 #hero-download-video.hide-disclaimer:not(.has-iframe)
150 {
151 border-color: transparent;
152 /* there is no box-shadow-color property :( */
153 box-shadow: 1px 1px 0 0 transparent;
154 }
155
156 /* The thumbnail is taller than the video. But it's hard to see because of the
157 * reflection and whitespace at the bottom. As a result, I am cutting out the
158 * whitespace and reflection when I show the disclaimer so that the section
159 * doesn't visibly resize when the thumbnail is replaced by the a iframe.
160 */
161
162
163 /******************************************************************************
164 * #media
165 *****************************************************************************/
166
167 #media-section
168 {
169 clear: both;
170 text-align: center;
171 }
172
173 #media-header
174 {
175 margin-bottom: 1em;
176 }
177
178 #media-header h2
179 {
180 font-size: 1em;
181 font-weight: normal;
182 text-transform: uppercase;
183 }
184
185 #media-header h2,
186 #media-list
187 {
188 margin: 0;
189 }
190
191 #media-list li
192 {
193 display: inline-block;
194 }
195
196 #media-list img
197 {
198 max-width: 10em;
199 max-height: 3em;
200 margin: 0 1em 1em;
201 }
202
203 #media-list a
204 {
205 position: relative;
206 display: block;
207 }
208
209 #media-list a:hover img
210 {
211 opacity: 0.3;
212 }
213
214 #media-list a:hover:after
215 {
216 content: "";
217 position: absolute;
218 top: 50%;
219 left: 50%;
220 height: 1em;
221 width: 1em;
222 padding: 1em;
223 margin-left: -1em;
224 margin-top: -1em;
225 border-radius: 50%;
226 background-color: #000;
227 background-image: url(../img/external-icon.png);
228 background-image: linear-gradient(transparent, transparent),
229 url(../img/external-icon.svg);
230 background-repeat: no-repeat;
231 background-position: center;
232 background-size: 1em;
233 }
234
235 @media (min-width: 1024px)
236 {
237 #media
238 {
239 display: table;
240 width: 100%;
241 }
242
243 #media-header,
244 #media-list
245 {
246 display: table-cell;
247 vertical-align: middle;
248 width: auto;
249 }
250
251 #media-header
252 {
253 margin-bottom: 0;
254 }
255
256 #media-header small
257 {
258 display: none;
259 }
260
261 #media-list { direction: rtl; }
262 [dir="rtl"] #media-list { direction: ltr; }
263
264 @supports (display: flex)
265 {
266 #media-list
267 {
268 display: flex;
269 justify-content: space-between;
270 align-items: center;
271 }
272 }
273
274 #media-list
275 {
276 display: table;
277 width: 100%;
278 }
279
280 #media-list li
281 {
282 display: table-cell;
283 vertical-align: middle;
284 }
285
286 #media-list img
287 {
288 margin: 0 2em;
289 }
290 }
291
292 /******************************************************************************
293 * #abb-cross-promotion
294 *****************************************************************************/
295
296 #abb-cross-promotion
297 {
298 padding: 3em 0;
299 }
300
301 #abb-cross-promotion h2
302 {
303 margin-top: 0;
304 margin-bottom: 1.5em;
305 }
306
307 #abb-cross-promotion h2,
308 #abb-cross-promotion h3
309 {
310 text-transform: uppercase;
311 }
312
313 #abb-logo
314 {
315 max-width: 10em;
316 }
317
318 #abb-app-store-badges
319 {
320 margin-top: 2em;
321 }
322
323 #abb-app-store-badges img
324 {
325 height: 60px;
326 }
327
328 @media (max-width: 575px)
329 {
330 #abb-app-store-badges a:first-of-type
331 {
332 margin-bottom: 0.5em;
333 }
334 }
335
336 @media (min-width: 576px)
337 {
338 #abb-app-store-badges .one-half
339 {
340 width: 50%;
341 }
342
343 #abb-cross-promotion figure,
344 #abb-app-store-badges
345 {
346 padding-left: 2em;
347 padding-right: 2em;
348 }
349 }
350
351 /******************************************************************************
352 * #footnote
353 *****************************************************************************/
354
355 #footnote
356 {
357 padding-top: 3em;
358 padding-bottom: 2em;
359 font-size: 13px;
360 color: #7d7d7d;
361 }
OLDNEW
« no previous file with comments | « static/poland/css/fonts.css ('k') | static/poland/css/main.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld