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

Side by Side Diff: static/css/main.css

Issue 29568555: Issue 5723 - Implement new abp.org content style guide (Closed) Base URL: https://bitbucket.org/adblockplus/adblockplus.org
Patch Set: Created Oct. 7, 2017, 3:33 p.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 /*******************************************************************************
2 * Base styles
3 ******************************************************************************/
4 html {
5 color: #212121;
6 background-color: #fff;
7 font-family: sans-serif;
8 line-height: 1.5; }
9
10 /**
11 * Stretch content full-width
12 */
13 .full-width {
14 display: block;
15 width: 100%;
16 margin: 1em 0px; }
17
18 /**
19 * Center content within a (responsive) fixed width
20 */
21 .container {
22 width: auto;
23 max-width: 100%;
24 margin: 0px auto;
25 padding: 0px 1em; }
26
27 @media (min-width: 768px) {
28 .container {
29 width: 720px; } }
30
31 @media (min-width: 1200px) {
32 .container {
33 width: 1170px; } }
34
35 /*******************************************************************************
36 * Grid component
37 ******************************************************************************/
38 /**
39 * - .row contains one or more .column(s)
40 * - .row clears .column(s)
41 * - .row negates the left & right padding of it's left-most & right-most
42 * .column(s) while preserving consistent padding between .column(s)
43 */
44 .row {
45 margin: 0px -1em; }
46
47 .row:after {
48 display: block;
49 clear: both;
50 content: ""; }
51
52 /**
53 * - .column is 100% width by default
54 * - Modifier classes are applied to .column to change it's width
55 * - Modifier classes behave differently on different device widths
56 */
57 .column {
58 position: relative;
59 width: 100%;
60 min-height: 1px;
61 padding: 0px 1em; }
62
63 /* - .column(s) within .row .reverse appear in reverse order
64 * - .column(s) within [dir=rtl] appear in reverse order respectively
65 */
66 .column,
67 [dir="rtl"] .reverse .column {
68 float: left; }
69
70 .row,
71 .column {
72 box-sizing: border-box; }
73
74 .reverse .column,
75 [dir="rtl"] .column {
76 float: right; }
77
78 @media (min-width: 768px) {
79 .one-half,
80 .one-fourth {
81 width: 50%; } }
82
83 @media (min-width: 1200px) {
84 .one-third {
85 width: 33.333333%; }
86 .two-thirds {
87 width: 66.666667%; }
88 .one-fourth {
89 width: 25%; }
90 .three-fourths {
91 width: 75%; } }
92
93 * 1 *
94 { 2 {
95 font-family: Arial, sans; 3 font-family: Arial, sans;
96 font-size: 16px; 4 font-size: 16px;
97 } 5 }
98 6
99 body 7 body
100 { 8 {
101 margin: 0; 9 margin: 0;
102 line-height: 1.5; 10 line-height: 1.5;
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
198 } 106 }
199 107
200 #logo 108 #logo
201 { 109 {
202 position: absolute; 110 position: absolute;
203 width: 128px; 111 width: 128px;
204 height: 128px; 112 height: 128px;
205 background-position: -83px -83px; 113 background-position: -83px -83px;
206 } 114 }
207 115
208 #content h1
209 {
210 font-size: 30px;
211 }
212
213 #content h2
214 {
215 font-weight: bold;
216 font-size: 25px;
217 }
218
219 #content h3
220 {
221 font-size: 20px;
222 }
223
224 #adblock-browser-notification 116 #adblock-browser-notification
225 { 117 {
226 text-align: center; 118 text-align: center;
227 } 119 }
228 120
229 #adblock-browser-notification a 121 #adblock-browser-notification a
230 { 122 {
231 font-weight: bold; 123 font-weight: bold;
232 } 124 }
233 125
(...skipping 141 matching lines...) Expand 10 before | Expand all | Expand 10 after
375 267
376 [dir="ltr"] .alert 268 [dir="ltr"] .alert
377 { 269 {
378 border-left: 5px solid #d14841; 270 border-left: 5px solid #d14841;
379 } 271 }
380 272
381 [dir="rtl"] .alert 273 [dir="rtl"] .alert
382 { 274 {
383 border-right: 5px solid #d14841; 275 border-right: 5px solid #d14841;
384 } 276 }
277
278 /*******************************************************************************
279 * .content
280 ******************************************************************************/
281
282 .content h5,
283 .content h4,
284 .content h3,
285 .content h2,
286 .content h1
ire 2017/10/09 12:28:48 NIT (feel free to ignore if you don't agree): I th
juliandoucette 2017/10/09 23:28:53 I agree :D
287 {
288 font-weight: bold;
289 margin: 30px 0px;
juliandoucette 2017/10/07 15:50:07 (fallback in-case rem is not supported - this size
ire 2017/10/09 12:28:48 Acknowledged.
290 margin: 2rem 0rem;
291 }
292
293 .content h5 {font-size: 1.1em;}
ire 2017/10/09 12:28:48 There should be spaces between the "{" and the sty
juliandoucette 2017/10/09 23:28:53 Acknowledged. (Doh)
294 .content h4 {font-size: 1.2em;}
295 .content h3 {font-size: 1.3em;}
296 .content h2 {font-size: 1.6em;}
297 .content h1 {font-size: 2.4em;}
298
299 .content footer,
juliandoucette 2017/10/07 15:50:08 I could have excluded this from this review as it
ire 2017/10/09 12:28:48 I think it should only be applied to the #site-foo
juliandoucette 2017/10/09 23:28:53 Agreed. The styleguide does specify this. But the
300 .content small
301 {
302 font-size: 0.9em;
303 }
OLDNEW

Powered by Google App Engine
This is Rietveld