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

Delta Between Two Patch Sets: static/css/index.css

Issue 29727563: Fixes #35 - Progressively enhance install button with appropriate links and text (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Left Patch Set: Created March 19, 2018, 10:25 a.m.
Right Patch Set: Addressed comments #21 Created April 16, 2018, 4 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « includes/index.tmpl ('k') | static/js/index.js » ('j') | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 /****************************************************************************** 1 /******************************************************************************
2 * Temparary styles 2 * Temparary styles
3 *****************************************************************************/ 3 *****************************************************************************/
4 4
5 .avoid-wrap {display: inline-block;} 5 .avoid-wrap {display: inline-block;}
6 .small {font-size: smaller;} 6 .small {font-size: smaller;}
7 7
8 #content,
9 #blog
10 {
11 padding-top: 5em;
12 }
13
14 /****************************************************************************** 8 /******************************************************************************
15 * Browser-based styles 9 * Browser-based styles
16 *****************************************************************************/ 10 *****************************************************************************/
17 11
12 .show-on-msie { display: none; }
13 .msie .show-on-msie { display: inherit; }
14 .msie .hide-on-msie { display: none; }
15
18 .show-on-maxthon { display: none; } 16 .show-on-maxthon { display: none; }
19 .maxthon .show-on-maxthon { display: block; } 17 .maxthon .show-on-maxthon { display: inherit; }
20 .maxthon .hide-on-maxthon { display: none; } 18 .maxthon .hide-on-maxthon { display: none; }
21 19
22 /****************************************************************************** 20 /******************************************************************************
23 * #hero-download 21 * #hero-download
24 *****************************************************************************/ 22 *****************************************************************************/
25 23
26 #hero-download 24 #hero-download
27 { 25 {
28 padding-top: 2em; 26 padding: 3em 1em;
29 padding-bottom: 2em; 27 }
30 } 28
31 29 @media (min-width: 576px) and (max-width: 1023px)
32 @media(min-width: 768px) 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)
33 { 58 {
34 #hero-download 59 #hero-download
35 { 60 {
36 padding-top: 6em; 61 padding-top: 6em;
37 padding-bottom: 6em; 62 padding-bottom: 6em;
38 } 63 }
39 } 64 }
40 65
41 #hero-download h1 66 #hero-download h1
42 { 67 {
43 line-height: 1.1; 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 }
44 } 79 }
45 80
46 #hero-download-tos 81 #hero-download-tos
47 { 82 {
48 font-size: 10px; 83 margin-bottom: 0.5em;
49 } 84 }
50 85
51 #hero-download-button 86 #hero-download-button
52 { 87 {
53 display: block; 88 display: inline-block;
54 } 89 min-width: 250px;
55 90 /* stretch full-width <= small tablets */
56 @media(min-width: 768px) 91 width: 100%;
92 /* 0.2em taller than normal buttons */
93 padding-top: 0.8em;
94 padding-bottom: 0.8em;
95 }
96
97 @media (min-width: 576px)
57 { 98 {
58 #hero-download-button 99 #hero-download-button
59 { 100 {
60 display: inline-block; 101 /* force auto-width >= small tablets */
61 min-width: 350px; 102 width: auto;
62 } 103 }
63 } 104 }
64 105
65 #hero-download-video 106 #hero-download-video
66 { 107 {
67 display: none; 108 /* add space above on phones & tablets */
68 } 109 margin-top: 2em;
69 110 /* prevent default full-width on small tablets */
70 @media(min-width: 768px) 111 max-width: 550px;
112 }
113
114 #hero-download-video
115 {
116 /* provide a little space between thumbnail and border + shadow */
117 padding: 1em 1em 0 1em;
118 }
119
120 @media (min-width: 1024px)
71 { 121 {
72 #hero-download-video 122 #hero-download-video
73 { 123 {
74 display: block; 124 /* keep aligned-top despite padding below */
75 } 125 margin-top: -1em;
76 } 126 }
127 }
128
129 #hero-download-video.has-iframe
130 {
131 /* remove space around thumbnail when thumbnail is replaced by video */
132 padding: 0;
133 }
134
135 /** Hide the video border + shadow only when the thumbnail alone is showing */
136 #hero-download-video.hide-disclaimer:not(.has-iframe)
137 {
138 border-color: transparent;
139 /* there is no box-shadow-color property :( */
140 box-shadow: 1px 1px 0 0 transparent;
141 }
142
143 /* The thumbnail is taller than the video. But it's hard to see because of the
144 * reflection and whitespace at the bottom. As a result, I am cutting out the
145 * whitespace and reflection when I show the disclaimer so that the section
146 * doesn't visibly resize when the thumbnail is replaced by the a iframe.
147 */
148
77 149
78 /****************************************************************************** 150 /******************************************************************************
79 * #media 151 * #media
80 *****************************************************************************/ 152 *****************************************************************************/
81 153
82 #media-section 154 #media-section
83 { 155 {
84 clear: both; 156 clear: both;
85 text-align: center; 157 text-align: center;
86 } 158 }
(...skipping 111 matching lines...) Expand 10 before | Expand all | Expand 10 after
198 vertical-align: middle; 270 vertical-align: middle;
199 } 271 }
200 272
201 #media-list img 273 #media-list img
202 { 274 {
203 margin: 0 2em; 275 margin: 0 2em;
204 } 276 }
205 } 277 }
206 278
207 /****************************************************************************** 279 /******************************************************************************
208 * #features 280 * #abb-cross-promotion
209 *****************************************************************************/ 281 *****************************************************************************/
210 282
211 #features 283 #abb-cross-promotion
212 {
213 text-align: center;
214 padding-top: 3em;
215 padding-bottom: 3em;
216 }
217
218 #features h2
219 {
220 text-transform: uppercase;
221 }
222
223 @media (max-width: 575px)
224 {
225 #features .column
226 {
227 margin-bottom: 3em;
228 }
229
230 #features .column:last-of-type
231 {
232 margin-bottom: 0;
233 }
234 }
235
236 @media (min-width: 576px) and (max-width: 1023px)
237 {
238 #features
239 {
240 text-align: left;
241 }
242
243 [dir="rtl"] #features
244 {
245 text-align: right;
246 }
247
248 #features .column
249 {
250 position: relative;
251 width: auto;
252 padding: 0 3em 2em 10.5em;
253 }
254
255 [dir="rtl"] #features .column
256 {
257 padding: 0 10.5em 2em 3em;
258 }
259
260 #features .column:last-of-type
261 {
262 padding-bottom: 0;
263 }
264
265 #features img
266 {
267 position: absolute;
268 left: 3em;
269 top: 0.5em;
270 }
271
272 [dir="rtl"] #features img
273 {
274 left: auto;
275 right: 3em;
276 }
277
278 #features h2
279 {
280 margin: 0;
281 }
282 }
283
284 /******************************************************************************
285 * #abb-notification
286 *****************************************************************************/
287
288 #abb-notification
289 { 284 {
290 padding: 3em 0; 285 padding: 3em 0;
291 } 286 }
292 287
293 #abb-notification h2 288 #abb-cross-promotion h2
294 { 289 {
295 margin-top: 0; 290 margin-top: 0;
296 margin-bottom: 1.5em; 291 margin-bottom: 1.5em;
297 } 292 }
298 293
299 #abb-notification h2, 294 #abb-cross-promotion h2,
300 #abb-notification h3 295 #abb-cross-promotion h3
301 { 296 {
302 text-transform: uppercase; 297 text-transform: uppercase;
303 } 298 }
304 299
305 #abb-logo 300 #abb-logo
306 { 301 {
307 max-width: 10em; 302 max-width: 10em;
308 } 303 }
309 304
310 #abb-app-store-badges 305 #abb-app-store-badges
(...skipping 14 matching lines...) Expand all
325 } 320 }
326 } 321 }
327 322
328 @media (min-width: 576px) 323 @media (min-width: 576px)
329 { 324 {
330 #abb-app-store-badges .one-half 325 #abb-app-store-badges .one-half
331 { 326 {
332 width: 50%; 327 width: 50%;
333 } 328 }
334 329
335 #abb-notification figure, 330 #abb-cross-promotion figure,
336 #abb-app-store-badges 331 #abb-app-store-badges
337 { 332 {
338 padding-left: 2em; 333 padding-left: 2em;
339 padding-right: 2em; 334 padding-right: 2em;
340 } 335 }
341 } 336 }
342 337
343 /****************************************************************************** 338 /******************************************************************************
344 * #footnote 339 * #footnote
345 *****************************************************************************/ 340 *****************************************************************************/
346 341
347 #footnote 342 #footnote
348 { 343 {
349 padding-top: 3em; 344 padding-top: 3em;
350 padding-bottom: 2em; 345 padding-bottom: 2em;
351 font-size: 13px; 346 font-size: 13px;
352 color: #7d7d7d; 347 color: #7d7d7d;
353 } 348 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld