LEFT | RIGHT |
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 Loading... |
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 Loading... |
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 Loading... |
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 Loading... |
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 Loading... |
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 } |
LEFT | RIGHT |