Download as
Browse Code »

Commit 1e3612c80902a536219128baa903f096e8220241

Authored by Tomáz Martins
1 parent 9b3cb9d2
Exists in master and in 54 other branches add_you_are_here_breadcrumbs_label, api_for_colab, backup_not_prod, create_institution_bootstrap_modal, design_validation, dev_env_minimal, disable_email_dev, fix_edit_software_permission, fix_edit_software_with_another_license, fix_hover_button_whitening, fix_members_pagination, fix_models_translations, fix_software_api, fix_software_block_migration, fix_validations_and_tests, focus_search_field_theme, gov-user-refactoring, gov-user-refactoring-rails4, header_fix, institution_modal_on_rating, kalibro-conf-refactoring, kalibro-processor-package, lxc, margin_fix, mezuro_cookbook, organization_rating_style_changes, prezento, refactor_software_communities, refactor_software_for_sisp, register_page, release-process, release-process-v2, remove-unused-images, remove_secondary_email_from_user, removing_super_archives_email, review_message, scope2method, signals_community_noosfero, sisp_colab_config, sisp_dev, sisp_dev_master, sisp_improvements, sisp_simple_version, software_as_organization, software_catalog_style_fix, software_catalog_style_fixes, spb_minimal_env, spec_refactor, stable-4.x, temp_soft_comm_refactoring, thread_dropdown, thread_page, update_software_api, update_softwares_boxes

Reviewing home-page 

1. Sort of declarations of properties in rules
2. Adjusting, whenever possible, properties 'margin', 'border', 'padding' and
'font' to its most complete form
3. Adjust to properly fit two lines of title of software in featured box
4. Putting units (px) to null values of certain properties
5. Fixing backgroun color of hightlights block
Showing 1 changed file with 135 additions and 170 deletions   Show diff stats
css/home-page.css
  Diff comments   View file @1e3612c
1 1 /*** boxes sizes definition **/
2 2 .action-home-index .box-1 {
  3 + margin: 0px 0px 0px 210px;
3 4 width: 490px;
4   - margin: 0 0 0 210px;
5 5 }
6 6  
7   -.action-home-index .box-3{
  7 +.action-home-index .box-3 {
8 8 width: 230px;
9 9 }
10 10  
... ... @@ -14,20 +14,18 @@
14 14  
15 15 /* Read More pattern */
16 16  
17   -.action-home-index #content .box .block-outer .read-more{
18   - background: #eee;
  17 +.action-home-index #content .box .block-outer .read-more {
19 18 border-bottom: none;
20   - font-family: "open_sans", Arial, Helvetica, sans-serif;
21   - font-variant: normal;
22   - font-size: 10px;
  19 + background: #eee;
  20 + font: normal normal normal 10px 'open_sansregular', arial, helvetica, sans-serif;
23 21 text-transform: uppercase;
24 22 text-align: right;
25 23 }
26 24  
27 25 .action-home-index #content .box .block-outer .read-more a {
28   - color: #000000;
29   - line-height: 20px;
30 26 padding: 8px;
  27 + line-height: 20px;
  28 + color: #000000;
31 29 display: block;
32 30 }
33 31  
... ... @@ -36,16 +34,14 @@
36 34 }
37 35  
38 36 .action-home-index #content .box .block-outer .read-more a::after {
39   - color: #FFFFFF;
40   - font-size: 14px;
41   - content: url('../images/right-arrow.png');
42   - padding-left: 8px;
43   - padding-right: 5px;
44 37 margin-left: 7px;
45 38 border-radius: 4px;
  39 + padding: 0px 5px 0px 8px;
46 40 line-height: 20px;
  41 + color: #FFFFFF;
  42 + font: 14px 'open_sansbold', arial, helvetica, sans-serif;
47 43 text-align: center;
48   - font-family: "open_sansbold", Arial, Helvetica, sans-serif;
  44 + content: url('../images/right-arrow.png');
49 45 }
50 46  
51 47  
... ... @@ -55,65 +51,61 @@
55 51  
56 52 /*** Software catalog search block **/
57 53  
58   -.action-home-index #content #catalogo-software-search{
59   - width: 100%;
60   - background-color:#1A397D;
  54 +.action-home-index #content #catalogo-software-search {
61 55 border-radius: 4px;
  56 + width: 100%;
  57 + background-color: #1A397D;
62 58 }
63 59  
64   -.action-home-index #content #catalogo-software-search h1{
65   - margin: 0 15px 10px 15px;
66   - padding: 10px 0 0 0;
67   - color:#FFFFFF;
  60 +.action-home-index #content #catalogo-software-search h1 {
  61 + margin: 0px 15px 10px 15px;
68 62 border-bottom: none;
69   - font-family:"open_sansregular", Arial;
70   - font-weight: normal;
71   - font-size:22px;
  63 + padding: 10px 0px 0px 0px;
72 64 line-height: 1.3em;
  65 + color: #FFFFFF;
  66 + font: normal normal normal 22px 'open_sansregular', arial;
73 67 text-align: left;
74 68 }
75 69  
76 70 .action-home-index #content #catalogo-software-search #search-Gadget {
77   - width: 90%;
78   - padding: 7px;
79   - margin: 0 15px 9px 15px;
  71 + margin: 0px 15px 9px 15px;
80 72 border: none;
81 73 border-radius: 4px;
  74 + padding: 7px;
  75 + width: 90%;
82 76 }
83 77  
84   -.action-home-index #content #catalogo-software-search .searchButton-catalog{
  78 +.action-home-index #content #catalogo-software-search .searchButton-catalog {
85 79 margin: 0px 0px 15px 15px;
86   - padding:6px 25px;
87   - color:#FFFFFF;
88   - background-color: #1A397D;
89   - border:1px solid #FFFFFF;
  80 + padding: 6px 25px;
  81 + border: 1px solid #FFFFFF;
90 82 border-radius: 4px;
  83 + background-color: #1A397D;
  84 + color: #FFFFFF;
91 85 font-weight: bold;
92 86 font-size: 14px;
93 87 text-transform: uppercase;
94 88 }
95 89  
96   -.action-home-index #content #catalogo-software-search #search-catalog-footer{
97   - color:#FFFFFF;
98   - background-color:#192758;
99   - border-top:1px solid;
100   - border-bottom-left-radius:4px;
101   - border-bottom-right-radius:4px;
  90 +.action-home-index #content #catalogo-software-search #search-catalog-footer {
  91 + border-top: 1px solid;
  92 + border-bottom-left-radius: 4px;
  93 + border-bottom-right-radius: 4px;
  94 + background-color: #192758;
  95 + color: #FFFFFF;
102 96 }
103 97  
104 98 .action-home-index #content #catalogo-software-search #search-catalog-footer p {
105 99 margin: 0px;
106 100 font-size: 11px;
107   - text-align:right;
  101 + text-align: right;
108 102 text-transform: uppercase;
109 103 }
110 104  
111 105 .action-home-index #content #catalogo-software-search #search-catalog-footer a {
112   - display: block;
113   - color: #FFF;
114 106 padding: 7px 0px 12px 0px;
115   - border-bottom-left-radius:4px;
116   - border-bottom-right-radius:4px;
  107 + color: #FFF;
  108 + display: block;
117 109 }
118 110  
119 111 .action-home-index #content #catalogo-software-search #search-catalog-footer a:hover {
... ... @@ -121,32 +113,30 @@
121 113 }
122 114  
123 115 .action-home-index #content #catalogo-software-search #bt_catalog-search::after {
124   - content: url('../images/right-arrow-black.png');
  116 + margin: 0px 15px 0 5px;
  117 + border-radius: 4px;
  118 + padding: 0px 4px 0 7px;
125 119 top: 2px;
126   - padding-left: 7px;
127   - padding-right: 4px;
128   - margin-left: 5px;
129   - margin-right: 15px;
130   - color: #172857;
  120 + line-height: 20px;
131 121 background: #eee;
132   - border-radius: 4px;
  122 + color: #172857;
133 123 font-size: 15px;
134   - line-height: 20px;
135 124 text-align: center;
136 125 position: relative;
  126 + content: url('../images/right-arrow-black.png');
137 127 }
138 128  
139 129 /*** Softwares block **/
140   -.action-home-index #content .softwares-block{
  130 +.action-home-index #content .softwares-block {
141 131 border-bottom: 1px solid #ccc;
142 132 overflow: auto;
143 133 }
144 134  
145 135 .action-home-index #content .softwares-block .block-title {
146 136 margin: 0px 0px 25px 0px;
147   - color: #2c66ce;
148   - background: #eee;
149 137 border-top: 4px solid #2c66ce;
  138 + background: #eee;
  139 + color: #2c66ce;
150 140 font-weight: 300;
151 141 }
152 142  
... ... @@ -154,26 +144,26 @@
154 144 display:none;
155 145 }
156 146  
157   -.action-home-index #content .software-block{
  147 +.action-home-index #content .software-block {
158 148 width: 145px;
159 149 height: 218px;
160 150 margin: 0px 9px 14px 9px;
161 151 }
162 152  
163 153 .action-home-index #content .software-block .software-block-logo {
164   - display: table-cell;
  154 + border: 1px solid #ccc;
  155 + border-radius: 8px;
165 156 width: 140px;
166 157 height: 150px;
  158 + text-align: center;
167 159 overflow: hidden;
168   - border: 1px solid #ccc;
169   - border-radius: 8px;
170 160 vertical-align: middle;
171   - text-align: center;
  161 + display: table-cell;
172 162 }
173 163  
174   -.action-home-index #content .software-block .software-block-logo img{
175   - max-width: 90px;
  164 +.action-home-index #content .software-block .software-block-logo img {
176 165 height: auto;
  166 + max-width: 90px;
177 167 }
178 168  
179 169 .action-home-index #content .software-block .software-block-info {
... ... @@ -182,18 +172,16 @@
182 172 }
183 173  
184 174 .action-home-index #content .software-block .software-block-title {
185   - height: 59px;
186   - overflow: hidden;
  175 + height: 65px;
187 176 font-weight: 300;
188 177 font-size: 14px;
189 178 text-align: center;
  179 + overflow: hidden;
190 180 }
191 181  
192   -.action-home-index #content .software-block .software-block-title h3{
  182 +.action-home-index #content .software-block .software-block-title h3 {
193 183 color: #2C66CE;
194   - font-weight: 300;
195   - font-size: 14px;
196   - font-family: "open_sansregular", Arial, Helvetica, sans-serif;
  184 + font: normal normal 300 14px 'open_sansregular', arial, helvetica, sans-serif;
197 185 }
198 186  
199 187 .action-home-index #content .software-block-description {
... ... @@ -206,55 +194,54 @@
206 194 }
207 195  
208 196 .action-home-index #content .software-block .software-block-finality {
209   - width:142px;
210   - height: 216px;
211   - left:0px;
212   - background-color:#f4f4f4;
213 197 border: solid 1px #D7D7D7;
214 198 border-radius: 8px;
  199 + width:142px;
  200 + height: 216px;
  201 + left: 0px;
  202 + background-color: #f4f4f4;
215 203 text-transform: uppercase;
216 204 }
217 205  
218 206 .action-home-index #content .software-block .software-block-finality::after {
219   - content: url('../images/right-arrow.png');
220   - margin: 0 7px 0px 3px;
221   - padding-left: 7px;
222   - padding-right: 4px;
223   - color: #FFF;
224   - background: #2c65cd;
  207 + margin: 0px 7px 0px 3px;
225 208 border-radius: 4px;
226   - font-size: 15px;
  209 + padding: 0 4px 0 7px;
227 210 line-height: 20px;
  211 + background: #2c65cd;
  212 + color: #FFF;
  213 + font-size: 15px;
228 214 text-align: center;
229 215 position: relative;
  216 + content: url('../images/right-arrow.png');
230 217 }
231 218  
232 219 .action-home-index #content .software-block .software-block-finality p {
  220 + margin: 0px 0px 7px 0px;
  221 + border-bottom: solid 1px #D7D7D7;
  222 + padding: 12px 12px 0px 12px;
233 223 height: 170px;
234   - overflow: hidden;
235   - margin: 0 0 7px 0;
236   - padding: 12px 12px 0 12px;
237 224 color: #172738;
238   - border-bottom: solid 1px #D7D7D7;
239 225 font-size: 12px;
240 226 text-align: left;
241 227 text-transform: none;
  228 + overflow: hidden;
242 229 }
243 230  
244 231 /*** News block - display content block **/
245 232  
246 233 .action-home-index #content .display-content-block .block-title {
247 234 margin: 0px;
  235 + border-top: 4px solid #643C67;
248 236 background: #eee;
249 237 color: #643C67;
250   - border-top: 4px solid #643C67;
251 238 font-weight: 300;
252 239 }
253 240  
254 241 .action-home-index #content .display-content-block li {
255   - min-height: 150px;
256 242 border-top: 1px solid #eee;
257   - padding-top: 15px;
  243 + padding: 15px 0px 0px 0px;
  244 + min-height: 150px;
258 245 }
259 246  
260 247 .action-home-index #content .display-content-block li:first-child {
... ... @@ -262,59 +249,53 @@
262 249 }
263 250  
264 251 .action-home-index #content .display-content-block .published-at {
265   - padding-bottom: 15px;
  252 + padding: 0px 0px 15px 0px;
266 253 color: #643C67;
267 254 }
268 255  
269 256 .action-home-index #content .display-content-block .image {
270   - display: table-cell;
271   - width: 150px;
272 257 padding-right: 25px;
  258 + padding: 0px 25px 0px 0px;
273 259 border: 0px solid #c0c1c1;
274 260 border-radius: 8px;
  261 + width: 150px;
  262 + display: table-cell;
275 263 }
276 264  
277 265 .action-home-index #content .display-content-block .image a {
278   - display: block;
  266 + border-radius: 8px;
279 267 height: 90px;
280 268 overflow: hidden;
281   - border-radius: 8px;
  269 + display: block;
282 270 }
283 271  
284 272 .action-home-index #content .display-content-block .image img {
285   - max-width: 150px;
286 273 border: 0px solid #c0c1c1;
  274 + max-width: 150px;
287 275 }
288 276  
289 277 .action-home-index #content .display-content-block .title {
290   - max-height: 40px;
291   - overflow: hidden;
292   - margin-bottom: 4px;
  278 + margin: 2px 0px 4px 0px;
293 279 padding-right: 0px;
  280 + max-height: 40px;
294 281 text-align: justify;
  282 + overflow: hidden;
295 283 }
296 284  
297 285 .action-home-index #content .display-content-block .title a {
298   - padding: 0;
  286 + padding: 0px;
299 287 color: #172738;
300   - font-size: 16px;
301   - font-family: Arial, Helvetica, sans-serif;
302   - font-style: normal;
303   - font-weight: bold;
304   - line-height: 1.3em;
  288 + font: normal normal bold 16px/1.3em arial, helvetica, sans-serif;
305 289 }
306 290  
307 291 .action-home-index #content .display-content-block .lead {
308 292 max-height: 56px;
309 293 overflow: hidden;
310   - padding-right: 0px;
311 294 }
312 295  
313 296 .action-home-index #content .display-content-block .lead a {
314 297 color: #000000;
315   - font-size: 15px;
316   - font-family: Arial;
317   - line-height: 1.3em;
  298 + font: 15px/1.3em arial;
318 299 }
319 300  
320 301 .action-home-index #content .display-content-block .lead a:visited,
... ... @@ -347,20 +328,16 @@
347 328 /*** What Is block - Article block **/
348 329  
349 330 .action-home-index #content .article-block .block-title {
  331 + border-top: 4px solid #08A649;
  332 + border-bottom: none;
350 333 padding: 6px 8px 22px 10px;
351 334 background: #eee;
352 335 color: #08A649;
353   - border-top: 4px solid #08A649;
354   - border-bottom: none;
355   - font-size: 18px;
356   - font-family: "open_sansregular", Arial, Helvetica, sans-serif;
357   - font-weight: 300;
358   - line-height: 1.3em;
  336 + font: normal normal 300 18px/1.3em 'open_sansregular', arial, helvetica, sans-serif;
359 337 text-align: left;
360 338 text-transform: none;
361 339 }
362 340  
363   -
364 341 .action-home-index #content .article-block .read-more {
365 342 margin-top: 30px;
366 343 border-top: 1px solid #08A649;
... ... @@ -375,11 +352,9 @@
375 352 }
376 353  
377 354 .action-home-index #content .article-block p {
378   - margin: 0 0 14px 0;
379   - padding: 0;
380   - font-size: 15px;
381   - font-family: Arial, Helvetica, sans-serif;
382   - line-height: 18px;
  355 + margin: 0px 0px 14px 0px;
  356 + padding: 0px;
  357 + font: 15px/18px arial, helvetica, sans-serif;
383 358 text-align: left;
384 359 text-transform: none;
385 360 }
... ... @@ -387,133 +362,124 @@
387 362 /******* See As Well Block - Highlights block *******/
388 363  
389 364 .action-home-index #content .highlights-block .block-title {
390   - width: auto;
391   - height: 16px;
392 365 margin: 11px 0px 0px;
393   - padding: 15px 1px 21px 15px;
394   - background-color: #eeeff1;
395   - color: #172638;
396 366 border: 1px solid #c0c1c1;
397 367 border-bottom: 0;
398 368 border-radius: 8px 8px 0 0;
399   - font-size: 16px;
400   - font-weight: bold;
401   - font-family: "open_sansbold", Arial, Helvetica, sans-serif;
  369 + padding: 15px 1px 21px 15px;
  370 + width: auto;
  371 + height: 16px;
  372 + background-color: #fff;
  373 + color: #172638;
  374 + font: bold 16px/1.3em 'open_sansbold', arial, helvetica, sans-serif;
402 375 text-transform: uppercase;
403 376 }
404 377  
405 378 .action-home-index #content .highlights-border {
  379 + border: 1px solid #c0c1c1;
  380 + border-radius: 0px 0px 8px 8px;
406 381 width: auto;
407 382 max-height: 230px;
408 383 background: #fff;
409   - border: 1px solid #c0c1c1;
410   - border-radius: 0 0 8px 8px;
411 384 }
412 385  
413 386 .action-home-index #content .highlights-container {
  387 + border-radius: 0px 0px 8px 8px;
  388 + border-width: 0px 0px 1px 0px;
  389 + padding: 0px 0px 0px 0px;
414 390 width: 100% !important;
415 391 max-height: 230px;
416   - padding-bottom: 0px;
  392 + background: #fff;
417 393 position: relative;
418 394 top: 0px;
419   - border-width: 0px;
420   - border-bottom-width: 1px;
421   - background: #fff;
422   - border-radius: 0 0 8px 8px;
423 395 }
424 396  
425 397 .action-home-index #content .highlights-image-link {
  398 + padding: 18px 0px 0px 0px;
  399 + border-radius: 0px 0px 8px 8px;
426 400 width: 220px;
427 401 max-height: 217px;
428   - padding-top: 18px;
429 402 background-color: #fff;
430   - border-radius: 0 0 8px 8px;
431 403 }
432 404  
433 405 .action-home-index #content .highlights-label {
434   - width: 190px;
  406 + border-top: 4px solid #3b61a7;
  407 + padding: 23px 20px 46px 20px;
435 408 max-height: 60px;
  409 + width: 190px;
436 410 position: relative;
437 411 bottom: -18px;
438   - padding: 23px 20px 11px;
439 412 background: #e8e9ec;
440 413 color: #172638;
441   - border-top: 4px solid #3b61a7;
442   - vertical-align: middle;
443 414 text-align: center;
444   - font-size: 16px;
445   - font-weight: normal;
446   - font-family: "open_sansbold", Arial, Helvetica, sans-serif;
  415 + font: normal normal normal 16px/1.5em 'open_sansbold', arial, helvetica, sans-serif;
  416 + vertical-align: middle;
447 417 }
448 418  
449 419 .action-home-index #content .highlights-block-pager {
  420 + border: 0;
  421 + padding: 14px 0px 0px 0px;
450 422 height: 1px;
451 423 width: 232px;
452   - padding-top: 14px;
453   - padding-right: 0px;
  424 + background-color: #FFF;
454 425 float: left;
455 426 position: static;
456   - background-color: #FFF;
457   - border: 0;
458 427 }
459 428  
460 429 .action-home-index #content .highlights-block-pager a {
461   - display: inline-block;
462   - height: 6px;
463   - width: 6px;
464   - overflow: hidden;
465 430 margin: 0 4px;
466   - color: transparent;
467   - background: #c0c1c1 center center no-repeat;
468 431 border-color: transparent;
469 432 border-radius: 50%;
  433 + height: 6px;
  434 + width: 6px;
  435 + background: #c0c1c1 center center no-repeat;
  436 + color: transparent;
470 437 text-indent: -5000px;
471 438 z-index: 1000;
  439 + overflow: hidden;
  440 + display: inline-block;
472 441 }
473 442 .action-home-index #content .highlights-block-pager a.activeSlide {
474   - color: transparent;
475   - background: #3e67b1;
476 443 border-color: transparent;
  444 + background: #3e67b1;
  445 + color: transparent;
477 446 }
478 447  
479 448 /*** mais software block **/
480   -.action-home-index #content #mais-software-block{
481   - width: auto;
  449 +.action-home-index #content #mais-software-block {
482 450 margin: 11px 0px;
483   - padding: 5px 0px;
484   - background-color: #eeeff1;
485 451 border: 1px solid #c0c1c1;
486 452 border-radius: 8px;
487   - font-family: arial;
488   - font-size: 14px;
  453 + padding: 5px 0px;
  454 + width: auto;
  455 + background-color: #eeeff1;
  456 + font: 14px arial;
489 457 }
490 458  
491   -.action-home-index #content #mais-software-block #sbp-information-softwares h2{
  459 +.action-home-index #content #mais-software-block #sbp-information-softwares h2 {
492 460 margin: 10px 0px 0px 0px;
493 461 padding: 0px 0px 17px 15px;
494   - color: #454545;
495 462 border-bottom: 1px solid #c0c1c1;
496   - font-family: "open_sansbold", Arial, Helvetica, sans-serif;
497   - font-weight: normal;
498   - font-size: 16px;
  463 + color: #454545;
  464 + font: normal normal normal 16px/21px 'open_sansbold', arial, helvetica, sans-serif;
499 465 text-align: left;
500 466 text-transform: uppercase;
501 467 }
502 468  
503   -.action-home-index #content #mais-software-block #list-categories{
  469 +.action-home-index #content #mais-software-block #list-categories {
504 470 margin: 14px 14px 14px 14px;
505 471 }
506 472  
507   -.action-home-index #content #mais-software-block #list-categories p{
  473 +.action-home-index #content #mais-software-block #list-categories p {
508 474 margin: 0 0 16px 0;
509 475 color: #464A55;
510 476 }
511 477  
512   -.action-home-index #content #mais-software-block #list-categories ul li{
  478 +.action-home-index #content #mais-software-block #list-categories ul li {
513 479 margin: 18px 5px 5px 5px;
514 480 }
515 481  
516   -.action-home-index #content #mais-software-block #list-categories li a{
  482 +.action-home-index #content #mais-software-block #list-categories li a {
517 483 color: #335277;
518 484 font-weight: bold;
519 485 }
... ... @@ -524,8 +490,8 @@
524 490  
525 491 .action-home-index #content #mais-software-block #footer-mais-software {
526 492 margin: 0px;
527   - padding: 10px 10px 0px 3px;
528 493 border-top: 1px solid #c0c1c1;
  494 + padding: 10px 10px 0px 3px;
529 495 font-size: 11px;
530 496 text-align: right;
531 497 text-transform: uppercase;
... ... @@ -536,4 +502,3 @@
536 502 }
537 503  
538 504 /******************** End Box-3 ********************/
539   -
... ...