Ticket #4514: issue29374562_29374563.diff.txt

File issue29374562_29374563.diff.txt, 11.0 KB (added by juliandoucette, on 02/16/2017 at 02:27:40 PM)

Patch from code review 29374562.

Line 
1Index: includes/index/style.html
2===================================================================
3--- a/includes/index/style.html
4+++ b/includes/index/style.html
5@@ -1,37 +1,37 @@
6 <style>
7 
8 .card-summary
9 {
10-  height: 36px;
11+  height: 60px;
12 }
13 
14 .item-summary
15 {
16   height: 120px;
17 }
18 
19 @media(min-width: 544px)
20 {
21   .item-summary
22   {
23-    height: 70px;
24+    height: 100px;
25   }
26 }
27 
28 @media(min-width: 768px)
29 {
30   .item-summary
31   {
32-    height: 120px;
33+    height: 160px;
34   }
35 }
36 
37 @media(min-width: 992px)
38 {
39   .item-summary
40   {
41-    height: 100px;
42+    height: 140px;
43   }
44 }
45 
46 </style>
47Index: includes/solutions/style.html
48===================================================================
49--- a/includes/solutions/style.html
50+++ b/includes/solutions/style.html
51@@ -1,36 +1,20 @@
52 <style>
53 
54 .card-summary
55 {
56-  height: 90px;
57-}
58-
59-@media(min-width: 544px)
60-{
61-  .card-summary
62-  {
63-    height: 140px;
64-  }
65-}
66-
67-@media(min-width: 768px)
68-{
69-  .card-summary
70-  {
71-    height: 110px;
72-  }
73+  height: 140px;
74 }
75 
76 @media(min-width: 992px)
77 {
78   .card-summary
79   {
80-    height: 160px;
81+    height: 230px;
82   }
83 }
84 
85 @media(min-width: 768px)
86 {
87   .card.list
88   {
89     display: block;
90Index: includes/users/style.html
91===================================================================
92new file mode 100644
93--- /dev/null
94+++ b/includes/users/style.html
95@@ -0,0 +1,19 @@
96+<style>
97+
98+  @media(min-width: 768px)
99+  {
100+    .card-summary {
101+      margin: 40px 0;
102+      height: 50px;
103+    }
104+  }
105+
106+  @media(min-width: 992px)
107+  {
108+    .card-summary {
109+       margin: 80px 0;
110+       height: 70px;
111+    }
112+  }
113+
114+<style>
115Index: pages/users.md
116===================================================================
117--- a/pages/users.md
118+++ b/pages/users.md
119@@ -1,12 +1,14 @@
120 title=Acceptable Ads and your ad blocker
121 description=Learn how to take control over your online ad experience with Acceptable Ads
122 custom=1
123 
124+<? include index/style ?>
125+
126 <div class="container section" markdown="1">
127   <div class="col-6 expand-on-tablet" markdown="1">
128 
129 # ![{{users-icon-alt[Users icon alt text] Users icon}}](/img/png/icon-users.png){: .card-icon } <br> {{users-heading[Page heading] Users }}
130 
131 ---
132 
133 {{users-p1[Users paragraph 1] From its start in 2006 <fix>Adblock Plus</fix> blocked all the ads. But by 2011 we were starting to think this was a bad idea, so we asked our users if they thought so too. ​[They did](https://adblockplus.org/blog/adblock-plus-user-survey-results-part-0). In fact, a large majority said that they would be fine with seeing certain ads if they were not so intrusive. So, with their input, we developed standards for better ads. These became the first <fix>Acceptable Ads</fix> criteria, and as these criteria evolve users continue to be an irreplaceable part of the process.}}
134Index: static/css/main.css
135===================================================================
136--- a/static/css/main.css
137+++ b/static/css/main.css
138@@ -409,17 +409,17 @@
139   padding: 0;
140   border: 0; }
141 
142 legend {
143   display: block;
144   width: 100%;
145   margin-bottom: 16px;
146   padding: 0;
147-  font-size: 18px;
148+  font-size: 20px;
149   line-height: inherit; }
150 
151 a, img {
152   border: none;
153   outline: none; }
154 
155 h2 + .row, .center blockquote + .row,
156 h1 + .row,
157@@ -430,30 +430,29 @@
158 .section {
159   margin: 96px 0; }
160 
161 .section .section {
162   margin: 64px 0; }
163 
164 h1, h2, .center blockquote, h3, .group.items .item::before, h4, h5, h6 .h1, .h2, .h3, .h4, .h5, .h6 {
165   text-transform: uppercase;
166-  font-weight: 700;
167-  line-height: 120%; }
168+  font-weight: 700; }
169 
170 h1,
171 .h1 {
172   margin: 96px 0 64px 0;
173   text-transform: none;
174-  font-size: 42px;
175+  font-size: 46px;
176   font-weight: 300; }
177 
178 h2, .center blockquote,
179 .h2 {
180   margin: 64px 0 32px 0;
181-  font-size: 28px;
182+  font-size: 30px;
183   font-weight: 700; }
184 
185 h3, .card h1, .card h2, .card .center blockquote, .center .card blockquote, .card h3, .card h4, .card h5, .card h6 .h1, h6 .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .group.items .item::before,
186 .h3,
187 .group.items .item h1,
188 .group.items .item h2,
189 .group.items .item .center blockquote,
190 .center .group.items .item blockquote,
191@@ -464,43 +463,43 @@
192 .group.items .item h6 .h1,
193 h6 .group.items .item .h1,
194 .group.items .item .h2,
195 .group.items .item .h3,
196 .group.items .item .h4,
197 .group.items .item .h5,
198 .group.items .item .h6 {
199   margin: 64px 0 32px 0;
200-  font-size: 22px;
201+  font-size: 24px;
202   font-weight: 700; }
203 
204 h4,
205 .h4 {
206   margin: 32px 0 16px 0;
207-  font-size: 20px;
208+  font-size: 22px;
209   font-weight: 700; }
210 
211 h5, .card.list h1, .card.list h2, .card.list .center blockquote, .center .card.list blockquote, .card.list h3, .card.list .group.items .item::before, .group.items .card.list .item::before, .card.list h4, .card.list h5, .card.list h6 .h1, h6 .card.list .h1, .card.list .h2, .card.list .h3, .card.list .h4, .card.list .h5, .card.list .h6, #footer h1, #footer h2, #footer .center blockquote, .center #footer blockquote, #footer h3, #footer .group.items .item::before, .group.items #footer .item::before, #footer h4, #footer h5, #footer h6 .h1, h6 #footer .h1, #footer .h2, #footer .h3, #footer .h4, #footer .h5, #footer .h6,
212 .h5 {
213   margin: 16px 0;
214-  font-size: 18px; }
215+  font-size: 20px; }
216 
217 h6,
218 .h6 {
219   margin: 16px 0;
220-  font-size: 18px;
221+  font-size: 20px;
222   font-weight: 400; }
223 
224 html,
225 body {
226   color: #161616;
227   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
228-  font-size: 18px;
229+  font-size: 20px;
230   font-weight: 300;
231-  line-height: 120%; }
232+  line-height: 1.5; }
233 
234 small,
235 .small {
236   margin-bottom: 8px;
237   font-size: 70%;
238   line-height: 80%; }
239 
240 blockquote,
241@@ -599,25 +598,25 @@
242 
243 dt {
244   margin: 16px 0; }
245 
246 dd {
247   margin: 16px 0 32px 0; }
248 
249 dt {
250-  font-size: 20px;
251+  font-size: 22px;
252   text-transform: uppercase;
253   font-weight: 700; }
254 
255 blockquote {
256   margin: 0;
257   padding: 0 32px;
258   text-transform: uppercase;
259-  font-size: 18px;
260+  font-size: 20px;
261   font-weight: 400;
262   font-style: italic; }
263 
264 html[dir="ltr"] blockquote {
265   border-left: 4px solid #E1E1E1; }
266 
267 html[dir="rtl"] blockquote {
268   border-right: 4px solid #E1E1E1; }
269@@ -629,17 +628,17 @@
270   margin: 0;
271   padding: 96px 0;
272   font-style: normal; }
273 
274 .center blockquote p:last-child {
275   margin-top: -8px; }
276 
277 cite {
278-  font-size: 14px;
279+  font-size: 16px;
280   font-style: normal; }
281 
282 cite::before {
283   content: "-- "; }
284 
285 .center cite::before {
286   content: none; }
287 
288@@ -715,17 +714,17 @@
289   padding: 0 16px;
290   cursor: pointer;
291   text-align: center;
292   white-space: nowrap;
293   text-decoration: none;
294   text-transform: uppercase;
295   border: 1px solid;
296   border-radius: 0px !important;
297-  font-size: 12px;
298+  font-size: 14px;
299   font-weight: 700;
300   line-height: 32px;
301   height: 34px; }
302 
303 @media (max-width: 544px) {
304   button, input[type="button"], input[type="reset"], input[type="submit"], .btn-outline-primary, .btn-outline-accent, .btn-primary, .btn-accent {
305     display: block;
306     float: none;
307@@ -795,30 +794,30 @@
308   height: 32px;
309   margin: 8px 0 16px 0;
310   padding: 4px 8px;
311   color: #161616;
312   border: 1px solid #E1E1E1;
313   border-radius: 5px;
314   background-color: #FFFFFF;
315   box-shadow: none;
316-  font-size: 16px;
317+  font-size: 18px;
318   line-height: 20px; }
319 
320 select {
321   vertical-align: middle;
322   background-color: #FFFFFF; }
323 
324 textarea {
325   height: auto;
326   min-height: 96px; }
327 
328 label {
329   display: block;
330-  font-size: 14px;
331+  font-size: 16px;
332   font-weight: 700;
333   line-height: 20px; }
334 
335 label em {
336   font-weight: 400;
337   font-style: normal; }
338 
339 /* Floating box grid (with push/pull support)
340@@ -969,17 +968,17 @@
341 
342 .card li::before {
343   width: 32px;
344   text-align: left; }
345 
346 .card h6 {
347   margin: 0;
348   padding: 0;
349-  font-size: 14px;
350+  font-size: 16px;
351   font-weight: 300; }
352 
353 .bg-secondary .card {
354   border-color: #292929; }
355 
356 .bg-accent .card {
357   border-color: #8CC63E; }
358 
359@@ -1239,17 +1238,17 @@
360     margin-left: 208px; }
361   html[dir="rtl"] .outer {
362     margin-right: 208px; } }
363 
364 #sidebar {
365   text-transform: uppercase;
366   color: #FFFFFF;
367   background-color: #161616;
368-  font-size: 16px;
369+  font-size: 18px;
370   font-weight: 400;
371   line-height: 100%; }
372   #sidebar ul,
373   #sidebar li {
374     margin: 0;
375     padding: 0;
376     text-align: inherit; }
377   #sidebar a,
378@@ -1355,17 +1354,17 @@
379   html[dir="rtl"] #sidebar-title {
380     float: right; } }
381 
382 #primary-navigation li {
383   position: relative; }
384 
385 #primary-navigation ul ul li {
386   color: #8CC63E;
387-  font-size: 14px; }
388+  font-size: 16px; }
389 
390 #primary-navigation .active > a {
391   font-weight: 700; }
392 
393 #primary-navigation a:hover, #primary-navigation a:active {
394   color: #8CC63E; }
395 
396 #primary-navigation ul ul a:hover, #primary-navigation ul ul a:active {
397@@ -1496,17 +1495,17 @@
398   position: absolute;
399   z-index: 1;
400   top: 64px;
401   left: 0;
402   width: 100%;
403   text-transform: uppercase;
404   color: #FFFFFF;
405   background-color: #292929;
406-  font-size: 12px;
407+  font-size: 14px;
408   font-weight: 400; }
409   #breadcrumbs a,
410   #breadcrumbs a:hover,
411   #breadcrumbs a:active {
412     text-decoration: none;
413     color: inherit; }
414   #breadcrumbs ol {
415     padding: 0 32px; }
416Index: static/scss/_variables.scss
417===================================================================
418--- a/static/scss/_variables.scss
419+++ b/static/scss/_variables.scss
420@@ -62,27 +62,27 @@
421 $error: $red;
422 $error-fg: $white;
423 $error-bg: $red;
424 
425 // Font sizes //////////////////////////////////////////////////////////////////
426 
427 // For components
428 
429-$font-size-xl: 20px;
430-$font-size-lg: 18px;
431-$font-size-md: 16px;
432-$font-size-sm: 14px;
433-$font-size-xs: 12px;
434+$font-size-xl: 22px;
435+$font-size-lg: 20px;
436+$font-size-md: 18px;
437+$font-size-sm: 16px;
438+$font-size-xs: 14px;
439 
440 // For headers
441 
442-$font-size-h1: 42px;
443-$font-size-h2: 28px;
444-$font-size-h3: 22px;
445+$font-size-h1: 46px;
446+$font-size-h2: 30px;
447+$font-size-h3: 24px;
448 $font-size-h4: $font-size-xl;
449 $font-size-h5: $font-size-lg;
450 $font-size-h6: $font-size-lg;
451 
452 // Sizes ///////////////////////////////////////////////////////////////////////
453 
454 $xl: 96px;
455 $lg: 64px;
456Index: static/scss/content/_typography.scss
457===================================================================
458--- a/static/scss/content/_typography.scss
459+++ b/static/scss/content/_typography.scss
460@@ -15,17 +15,16 @@
461 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
462 
463 // Headings ////////////////////////////////////////////////////////////////////
464 
465 %headings
466 {
467   text-transform: uppercase;
468   font-weight: 700;
469-  line-height: 120%;
470 }
471 
472 h1,
473 .h1
474 {
475   margin: $xl 0 $lg 0;
476   text-transform: none;
477   font-size: $font-size-h1;
478@@ -79,17 +78,17 @@
479   color: $primary-fg;
480   // @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
481   font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
482   "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
483   "Fira Sans", "Droid Sans", "Helvetica Neue",
484   sans-serif;
485   font-size: $font-size-lg;
486   font-weight: 300;
487-  line-height: 120%;
488+  line-height: 1.5;
489 }
490 
491 small,
492 .small
493 {
494   margin-bottom: $xs;
495   font-size: 70%;
496   line-height: 80%;