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

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

Issue 29693561: Noissue - Update font-family to Source Sans Pro on abp.org (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Left Patch Set: Separate font variants Created March 1, 2018, 1:54 p.m.
Right Patch Set: Rebase Created March 14, 2018, 6:12 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 | « static/css/fonts.css ('k') | static/fonts/Source-Sans-Pro/300/cyrillic.woff2 » ('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 body 1 body
2 { 2 {
3 font-family: "Source Sans Pro", Arial, sans-serif; 3 font-family: "Source Sans Pro", Arial, sans-serif;
4 margin: 0; 4 margin: 0;
5 } 5 /* Start below fixed navbar */
6 6 padding-top: 4em;
7 #content 7 line-height: 1.5;
8 }
9
10 #content,
11 #blog
8 { 12 {
9 padding-bottom: 2em; 13 padding-bottom: 2em;
10 } 14 }
11 15
12 a img 16 a img
13 { 17 {
14 border: none; 18 border: none;
15 } 19 }
16 20
17 a:link, a:visited 21 a:link, a:visited
(...skipping 17 matching lines...) Expand all
35 padding: 1em; 39 padding: 1em;
36 overflow: auto; 40 overflow: auto;
37 } 41 }
38 42
39 .sprite 43 .sprite
40 { 44 {
41 display: inline-block; 45 display: inline-block;
42 font-size: 0px; /* fix for IE6 height bug */ 46 font-size: 0px; /* fix for IE6 height bug */
43 background-image: url(../img/sprite-main.png); 47 background-image: url(../img/sprite-main.png);
44 background-repeat: no-repeat; 48 background-repeat: no-repeat;
45 }
46
47 #adblock-browser-notification
48 {
49 text-align: center;
50 }
51
52 #adblock-browser-notification a
53 {
54 font-weight: bold;
55 }
56
57 #adblock-browser-notification img
58 {
59 vertical-align: bottom;
60 width: 25px;
61 height: 25px;
62 }
63
64 #adblock-browser-notification span
65 {
66 white-space: nowrap;
67 margin-left: 1em;
68 }
69
70 [dir="rtl"] #adblock-browser-notification span
71 {
72 margin-left: 0;
73 margin-right: 1em;
74 } 49 }
75 50
76 .toc 51 .toc
77 { 52 {
78 display: inline-block; 53 display: inline-block;
79 border: 1px solid #aaa; 54 border: 1px solid #aaa;
80 background: #fff; 55 background: #fff;
81 padding: 16px 20px; 56 padding: 16px 20px;
82 } 57 }
83 58
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
160 .section 135 .section
161 { 136 {
162 padding: 2em 0; 137 padding: 2em 0;
163 } 138 }
164 139
165 /****************************************************************************** 140 /******************************************************************************
166 * .content 141 * .content
167 *****************************************************************************/ 142 *****************************************************************************/
168 143
169 .content h1, 144 .content h1,
145 .content .h1,
170 .content h2, 146 .content h2,
171 .content h3, 147 .content h3,
172 .content h4, 148 .content h4,
173 .content h5 149 .content h5
174 { 150 {
175 font-weight: bold; 151 font-weight: bold;
176 margin: 32px 0 16px 0; 152 margin: 32px 0 16px 0;
177 margin: 2rem 0 1rem 0; 153 margin: 2rem 0 1rem 0;
178 } 154 line-height: 1.4;
179 155 }
180 .content h1 { font-size: 1.8em; } 156
181 .content h2 { font-size: 1.4em; } 157 .content h1,
182 .content h3 { font-size: 1.3em; } 158 .content .h1 { font-size: 1.4em; }
183 .content h4 { font-size: 1.2em; } 159 .content h2 { font-size: 1.3em; }
184 .content h5 { font-size: 1.1em; } 160 .content h3 { font-size: 1.2em; }
161 .content h4 { font-size: 1.1em; }
162 .content h5 { font-size: 1em; }
163
164 @media(min-width: 576px)
165 {
166 .content h1,
167 .content .h1 { font-size: 1.6em; }
168 .content h2 { font-size: 1.4em; }
169 .content h3 { font-size: 1.3em; }
170 .content h4 { font-size: 1.2em; }
171 .content h5 { font-size: 1.1em; }
172 }
185 173
186 @media(min-width: 768px) 174 @media(min-width: 768px)
187 { 175 {
188 .content h1 { font-size: 2.4em; } 176 .content h1,
177 .content .h1
178 {
179 font-size: 2.4em;
180 line-height: 1.3;
181 }
182
189 .content h2 { font-size: 1.6em; } 183 .content h2 { font-size: 1.6em; }
190 } 184 }
191 185
192 .content a, 186 .content a,
193 .content a:visited 187 .content a:visited
194 { 188 {
195 color: #c70d2c; 189 color: #c70d2c;
196 } 190 }
197 191
198 /* Buttons 192 /* Buttons
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
231 .button.primary:hover 225 .button.primary:hover
232 { 226 {
233 background-color: #E00F32; 227 background-color: #E00F32;
234 } 228 }
235 229
236 .button.primary:active 230 .button.primary:active
237 { 231 {
238 background-color: #AD102A; 232 background-color: #AD102A;
239 } 233 }
240 234
241 .button.inverse, 235 .button.accent,
242 a.button.inverse 236 .button.accent:visited
243 { 237 {
244 background: none; 238 background: #077CA6;
245 color: #fff; 239 color: #fff;
246 margin-left: 2px; 240 margin-left: 2px;
247 margin-right: 2px; 241 margin-right: 2px;
248 border: 1px solid #fff; 242 }
249 } 243
250 244 .button.accent:hover,
251 .button.inverse:hover, 245 .button.accent:active,
252 .button.inverse:focus 246 .button.accent:focus
253 { 247 {
254 box-shadow: inset 0 0 0 2px #fff; 248 box-shadow: inset 0 0 0 3px #005D80;
255 } 249 }
256 250
257 .button.inverse:active 251 /*******************************************************************************
258 { 252 * .fg-* utilities
259 background-color: #fff; 253 ******************************************************************************/
260 } 254
261 255 .fg-accent
262 .bg-accent .button.inverse:active
263 { 256 {
264 color: #077CA6; 257 color: #077CA6;
265 } 258 }
266 259
267 /******************************************************************************* 260 .bg-secondary
268 * .bg-* utilities 261 {
269 ******************************************************************************/ 262 color: #000;
270 263 background-color: #F4F4F4;
271 .bg-accent
272 {
273 color: #fff;
274 background-color: #077CA6;
275 } 264 }
276 265
277 /******************************************************************************* 266 /*******************************************************************************
278 * #navbar 267 * #navbar
279 ******************************************************************************/ 268 ******************************************************************************/
280 269
281 #navbar 270 #navbar
282 { 271 {
283 min-height: 4em; 272 min-height: 4em;
284 background-color: #c70d2c; 273 background-color: #c70d2c;
274 position: fixed;
275 z-index: 2;
276 width: 100%;
277 top: 0;
278 transition: top 0.2s ease-in-out;
285 } 279 }
286 280
287 @media(max-width: 991px) 281 @media(max-width: 991px)
288 { 282 {
289 #navbar 283 #navbar
290 { 284 {
291 overflow: auto; 285 overflow: auto;
292 } 286 }
293 } 287 }
294 288
(...skipping 221 matching lines...) Expand 10 before | Expand all | Expand 10 after
516 510
517 @media(max-width: 991px) 511 @media(max-width: 991px)
518 { 512 {
519 #navbar-menu 513 #navbar-menu
520 { 514 {
521 display: none; 515 display: none;
522 float: left; 516 float: left;
523 clear: both; 517 clear: both;
524 width: 100%; 518 width: 100%;
525 background-color: #292929; 519 background-color: #292929;
520 overflow-y: scroll;
521 max-height: 416px;
522 max-height: 80vh;
526 } 523 }
527 524
528 #navbar-menu.visible 525 #navbar-menu.visible
529 { 526 {
530 display: block; 527 display: block;
531 } 528 }
532 529
533 #navbar-menu li a 530 #navbar-menu li a
534 { 531 {
535 padding: 0.75em 1em; 532 padding: 0.75em 1em;
(...skipping 167 matching lines...) Expand 10 before | Expand all | Expand 10 after
703 { 700 {
704 display: none; 701 display: none;
705 } 702 }
706 703
707 /* overriding display:none above */ 704 /* overriding display:none above */
708 #footer #social-list 705 #footer #social-list
709 { 706 {
710 display: block; 707 display: block;
711 } 708 }
712 } 709 }
710
711 /* Video
712 ****************************************************************************/
713
714 .video-parent
715 {
716 position: relative;
717 display: block;
718 width: 100%;
719 padding: 0;
720 border: 1px solid #c9c9c9;
721 box-shadow: 1px 1px 0 0 #dbdbdb;
722 overflow: hidden;
723 }
724
725 .video-parent.has-iframe::before
726 {
727 display: block;
728 content: "";
729 padding-top: 56.25%;
730 }
731
732 .video-parent iframe
733 {
734 position: absolute;
735 top: 0;
736 bottom: 0;
737 left: 0;
738 width: 100%;
739 height: 100%;
740 border: 0;
741 }
742
743 .video-link
744 {
745 display: block;
746 position: relative;
747 }
748
749 .video-thumbnail
750 {
751 width: 100%;
752 transition: opacity 0.8s;
753 opacity: 0.2;
754 }
755
756 .hide-disclaimer .video-thumbnail
757 {
758 opacity: 1;
759 }
760
761 .video-disclaimer
762 {
763 visibility: visible;
764 opacity: 1;
765 position: absolute;
766 bottom: 0;
767 left: 0;
768 padding: 1em;
769 background-color: #fff;
770 font-size: 0.9em;
771 text-align: center;
772 transition: opacity 0.8s;
773 }
774
775 .hide-disclaimer .video-disclaimer
776 {
777 visibility: hidden;
778 opacity: 0;
779 }
780
781 .video-play
782 {
783 position: absolute;
784 top: 50%;
785 left: 50%;
786 width: 80px;
787 margin-top: -60px;
788 margin-left: -40px;
789 }
790
791 .hide-disclaimer .video-play
792 {
793 margin-top: -40px;
794 }
LEFTRIGHT

Powered by Google App Engine
This is Rietveld