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

Side by Side Diff: static/scss/content/_typography.scss

Issue 29438582: Issue 5135 - Reduce font size and padding on smaller screens on acceptableads.com (Closed) Base URL: https://hg.adblockplus.org/web.acceptableads.com
Patch Set: Refactor and use .section Created July 5, 2017, 10:52 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
OLDNEW
1 // This file is part of acceptableads.org. 1 // This file is part of acceptableads.org.
2 // Copyright (C) 2016 Eyeo GmbH 2 // Copyright (C) 2016 Eyeo GmbH
3 // 3 //
4 // acceptableads.org is free software: you can redistribute it and/or modify 4 // acceptableads.org is free software: you can redistribute it and/or modify
5 // it under the terms of the GNU General Public License as published by 5 // it under the terms of the GNU General Public License as published by
6 // the Free Software Foundation, either version 3 of the License, or 6 // the Free Software Foundation, either version 3 of the License, or
7 // (at your option) any later version. 7 // (at your option) any later version.
8 // 8 //
9 // acceptableads.org is distributed in the hope that it will be useful, 9 // acceptableads.org is distributed in the hope that it will be useful,
10 // but WITHOUT ANY WARRANTY; without even the implied warranty of 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of
11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 // GNU General Public License for more details. 12 // GNU General Public License for more details.
13 // 13 //
14 // You should have received a copy of the GNU General Public License 14 // You should have received a copy of the GNU General Public License
15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>. 15 // along with acceptableads.org. If not, see <http://www.gnu.org/licenses/>.
16 16
17 // Headings //////////////////////////////////////////////////////////////////// 17 // Headings ////////////////////////////////////////////////////////////////////
18 18
19 %headings 19 %headings
20 { 20 {
21 text-transform: uppercase; 21 text-transform: uppercase;
22 font-weight: 700; 22 font-weight: 700;
23 line-height: 120%; 23 line-height: 120%;
24 } 24 }
25 25
26 h1, 26 h1,
juliandoucette 2017/07/05 13:28:33 I think the change to this header margin is miss-a
ire 2017/07/06 10:31:37 Done. I had initially thought of it as an underlin
27 .h1 27 .h1
28 { 28 {
29 margin: $xl 0 $lg 0; 29 margin: $xl 0 $lg 0;
30 text-transform: none; 30 text-transform: none;
31 font-size: $font-size-h1; 31 font-size: $font-size-h1;
32 font-weight: 300; 32 font-weight: 300;
33
34 @media (max-width: $tablet-breakpoint)
35 {
36 font-size: $font-size-h1 - 12px;
37 margin-top: $md;
38 }
39 @media (max-width: $mobile-breakpoint)
40 {
41 font-size: $font-size-h1 - 16px;
42 margin-bottom: $lg - 20px;
43 }
33 } 44 }
34 45
35 h2, 46 h2,
36 .h2 47 .h2
37 { 48 {
38 margin: $lg 0 $md 0; 49 margin: $lg 0 $md 0;
39 font-size: $font-size-h2; 50 font-size: $font-size-h2;
40 font-weight: 700; 51 font-weight: 700;
52
53 @media (max-width: $tablet-breakpoint)
54 {
55 font-size: $font-size-h2 - 4px;
56 margin-top: $md;
57 }
58 @media (max-width: $mobile-breakpoint)
59 {
60 font-size: $font-size-h2 - 6px;
61 margin-bottom: $sm;
62 }
41 } 63 }
42 64
43 h3, 65 h3,
44 .h3 66 .h3
45 { 67 {
46 margin: $lg 0 $md 0; 68 margin: $lg 0 $md 0;
47 font-size: $font-size-h3; 69 font-size: $font-size-h3;
48 font-weight: 700; 70 font-weight: 700;
71
72 @media (max-width: $tablet-breakpoint)
73 {
74 font-size: $font-size-h3 - 2px;
75 margin-top: $md;
76 }
77 @media (max-width: $mobile-breakpoint)
78 {
79 margin-bottom: $sm;
80 }
49 } 81 }
50 82
51 h4, 83 h4,
52 .h4 84 .h4
53 { 85 {
54 margin: $md 0 $sm 0; 86 margin: $md 0 $sm 0;
55 font-size: $font-size-h4; 87 font-size: $font-size-h4;
56 font-weight: 700; 88 font-weight: 700;
89
90 @media (max-width: $mobile-breakpoint)
91 {
92 font-size: $font-size-h4 - 2px;
93 }
57 } 94 }
58 95
59 h5, 96 h5,
60 .h5 97 .h5
61 { 98 {
62 margin: $sm 0; 99 margin: $sm 0;
63 font-size: $font-size-h5; 100 font-size: $font-size-h5;
101
102 @media (max-width: $mobile-breakpoint)
103 {
104 font-size: $font-size-h5 - 2px;
105 }
64 } 106 }
65 107
66 h6, 108 h6,
67 .h6 109 .h6
68 { 110 {
69 margin: $sm 0; 111 margin: $sm 0;
70 font-size: $font-size-h6; 112 font-size: $font-size-h6;
71 font-weight: 400; 113 font-weight: 400;
114
115 @media (max-width: $mobile-breakpoint)
116 {
117 font-size: $font-size-h6 - 2px;
118 }
72 } 119 }
73 120
74 // Main text /////////////////////////////////////////////////////////////////// 121 // Main text ///////////////////////////////////////////////////////////////////
75 122
76 html, 123 html,
77 body 124 body
78 { 125 {
79 color: $primary-fg; 126 color: $primary-fg;
80 // @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practic al-guide/ 127 // @see https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practic al-guide/
81 font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, 128 font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
82 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 129 "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
83 "Fira Sans", "Droid Sans", "Helvetica Neue", 130 "Fira Sans", "Droid Sans", "Helvetica Neue",
84 sans-serif; 131 sans-serif;
85 font-size: $font-size-lg; 132 font-size: $font-size-lg;
86 font-weight: 300; 133 font-weight: 300;
87 line-height: 120%; 134 line-height: 120%;
135
136 @media (max-width: $mobile-breakpoint)
137 {
138 font-size: $font-size-lg - 2px;
139 }
88 } 140 }
89 141
90 small, 142 small,
91 .small 143 .small
92 { 144 {
93 margin-bottom: $xs; 145 margin-bottom: $xs;
94 font-size: 70%; 146 font-size: 70%;
95 line-height: 80%; 147 line-height: 80%;
96 } 148 }
97 149
(...skipping 154 matching lines...) Expand 10 before | Expand all | Expand 10 after
252 dd 304 dd
253 { 305 {
254 margin: $sm 0 $md 0; 306 margin: $sm 0 $md 0;
255 } 307 }
256 308
257 dt 309 dt
258 { 310 {
259 font-size: $font-size-xl; 311 font-size: $font-size-xl;
260 text-transform: uppercase; 312 text-transform: uppercase;
261 font-weight: 700; 313 font-weight: 700;
314
315 @media (max-width: $tablet-breakpoint)
316 {
317 font-size: $font-size-xl - 2px;
318 }
262 } 319 }
263 320
264 // Blockquotes ///////////////////////////////////////////////////////////////// 321 // Blockquotes /////////////////////////////////////////////////////////////////
265 322
266 blockquote 323 blockquote
267 { 324 {
268 margin: 0; 325 margin: 0;
269 padding: 0 $md; 326 padding: 0 $md;
270 text-transform: uppercase; 327 text-transform: uppercase;
271 font-size: $font-size-lg; 328 font-size: $font-size-lg;
(...skipping 13 matching lines...) Expand all
285 342
286 html .center blockquote 343 html .center blockquote
287 { 344 {
288 border: none; 345 border: none;
289 } 346 }
290 347
291 .center blockquote 348 .center blockquote
292 { 349 {
293 @extend h2; 350 @extend h2;
294 margin: 0; 351 margin: 0;
295 padding: $xl 0; 352 padding: $lg 0;
296 font-style: normal; 353 font-style: normal;
354
355 @media (max-width: $tablet-breakpoint)
356 {
357 font-size: $font-size-h3;
358 padding: $md 0;
359 }
297 } 360 }
298 361
299 .center blockquote p:last-child 362 .center blockquote p:last-child
300 { 363 {
301 margin-top: -$xs; 364 margin-top: -$xs;
302 } 365 }
303 366
304 cite 367 cite
305 { 368 {
306 font-size: $font-size-sm; 369 font-size: $font-size-sm;
(...skipping 108 matching lines...) Expand 10 before | Expand all | Expand 10 after
415 { 478 {
416 vertical-align: bottom; 479 vertical-align: bottom;
417 text-transform: uppercase; 480 text-transform: uppercase;
418 border-bottom: 2px solid $info; 481 border-bottom: 2px solid $info;
419 } 482 }
420 483
421 table tbody + tbody 484 table tbody + tbody
422 { 485 {
423 border-top: 2px solid $info; 486 border-top: 2px solid $info;
424 } 487 }
OLDNEW

Powered by Google App Engine
This is Rietveld