← Back to branch summary

~jorge/juju-website/juju-website

« back to all changes in this revision

Viewing changes to css/base.css

  • Committer: Jorge O. Castro
  • Date: 2013-07-09 15:38:27 UTC
  • mfrom: (20.1.1 juju-website)
  • Revision ID: jorge@ubuntu.com-20130709153827-z0fdphk3xuecuufy
Add new design from Graham Bancroft.

Show diffs side-by-side

added added

removed removed

Lines of Context:
css/base.css
12
12
/**
13
13
* @section Global
14
14
*/
15
 
 
 
15
html { background: #f7f7f7; }
16
16
body {
 
17
        background: #fff;
17
18
        font-family: 'Ubuntu', 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
18
 
        font-size: 13px;
19
 
        line-height: 1.4;
 
19
        font-size: 16px;
 
20
        line-height: 1.5;
20
21
        color: #333;
 
22
        font-weight: 300;
21
23
}
22
24
a {
23
25
        color: #dd4814;
24
26
        text-decoration: none;
25
27
        outline: 0;
26
28
}
 
29
a:hover {
 
30
        text-decoration: underline;
 
31
}
27
32
p, dl {
28
33
        margin-bottom: 10px;
29
34
}
43
48
                -webkit-border-radius: 4px;
44
49
        border-radius: 4px;
45
50
}
 
51
h1, h2, h3, h4 { 
 
52
        font-weight: 300;
 
53
        line-height: 1.3; 
 
54
}
46
55
h1 {
47
56
        font-size: 36px;
48
 
        line-height: 1.1;
49
57
        margin-bottom: 20px;
50
58
}
51
59
article h1,
52
60
h2 {
53
61
        font-size: 24px;
54
 
        line-height: 1.2;
55
62
        margin-bottom: 14px;
56
63
}
 
64
article h1 a:hover {
 
65
        text-decoration: underline;
 
66
}
57
67
h3 {
58
68
        font-size: 16px;
59
 
        line-height: 1.3;
60
69
        margin-bottom: 8px;
61
70
}
62
 
h4 {
63
 
        font-weight: bold;
64
 
}
65
71
 
66
72
time {
67
73
        color:#999;
68
74
}
69
75
 
 
76
/* .list */
 
77
#content .list {
 
78
        margin-left: 0;
 
79
        padding-left: 0;
 
80
}
 
81
                
 
82
#content .list li {
 
83
  border-bottom: 1px dotted #aea79f;
 
84
        list-style: none !important;
 
85
  margin-bottom: 0;
 
86
  padding: 10px 0;
 
87
        margin-left: 0 !important;
 
88
}
 
89
 
 
90
#content .list li:first-of-type, 
 
91
#content .list li.first-item,
 
92
#content .list li.first-child { 
 
93
        padding-top: 0;
 
94
}
 
95
 
 
96
#content .list li:last-of-type, 
 
97
#content .list li.last-item { 
 
98
  border: 0;
 
99
  padding-bottom: 0;
 
100
}
 
101
 
70
102
/**
71
103
* @section Structure
72
104
*/
 
105
.row {
 
106
        border-bottom: 1px dotted #aea79f;
 
107
        clear: both;
 
108
        padding-top: 40px;
 
109
        padding-bottom: 40px;
 
110
        display: block;
 
111
        float: left;
 
112
        width: 100%;
 
113
}
 
114
 
 
115
.row:after { 
 
116
   content: "."; 
 
117
   visibility: hidden; 
 
118
   display: block; 
 
119
   height: 0; 
 
120
   clear: both;
 
121
}
 
122
 
 
123
.row-grey {
 
124
  background: #f7f7f7;
 
125
}
 
126
 
 
127
.no-border {
 
128
        border-bottom: 0;
 
129
}
 
130
 
 
131
.inner-wrapper {
 
132
        margin: 0 auto;
 
133
        overflow: visible;
 
134
        position: relative;
 
135
        width: 940px;
 
136
}
 
137
 
 
138
.no-padding-bottom {
 
139
        padding-bottom: 0;
 
140
}
 
141
 
 
142
/* vertical-divider */
 
143
.vertical-divider > div,
 
144
.vertical-divider > li {
 
145
  border-right: 1px dotted #aea79f;
 
146
  margin-right: 0;
 
147
  padding-right: 20px;
 
148
  padding-left: 20px;
 
149
  float: none;
 
150
  display: table-cell;
 
151
  vertical-align: top;
 
152
}
 
153
.vertical-divider > div:last-child,
 
154
.vertical-divider > li:last-child,
 
155
.vertical-divider > div.last-col,
 
156
.vertical-divider > li.last-col,
 
157
.vertical-divider > div.omega,
 
158
.vertical-divider > li.omega,
 
159
.vertical-divider > div:last-of-type,
 
160
.vertical-divider > li:last-of-type {
 
161
  border-right: 0;
 
162
  padding-right: 0;
 
163
}
 
164
.vertical-divider > div:first-child,
 
165
.vertical-divider > li:first-child,
 
166
.vertical-divider > div.first-col,
 
167
.vertical-divider > div.alpha,
 
168
.vertical-divider > li.alpha,
 
169
.vertical-divider > li.first-col,
 
170
.vertical-divider > div:first-of-type,
 
171
.vertical-divider > li:first-of-type {
 
172
  padding-left: 0;
 
173
}
73
174
 
74
175
.header-login,
75
176
.header-navigation div,
100
201
        color: #333;
101
202
}
102
203
.header-navigation {
103
 
        border-top: 2px solid #dd4814;
104
204
        border-bottom: 2px solid #dd4814;
105
205
        background-color: #fff;
106
206
        height: 54px;
124
224
}
125
225
.header-navigation nav a:hover {
126
226
        background-color: #fcece7;
 
227
        text-decoration: none;
127
228
}
128
229
.header-navigation nav .current_page_item a,
129
230
.header-navigation nav .current_page_parent a,
157
258
}
158
259
.header-navigation .logo-ubuntu {
159
260
        float: left;
 
261
        padding-top: 7px;
160
262
}
161
263
.header-content .header-navigation-secondary {
162
264
        margin-bottom: 40px;
176
278
}
177
279
.header-navigation-secondary nav li {
178
280
        float: left;
 
281
        font-size: 14px;
179
282
}
180
283
.header-navigation-secondary nav li a {
181
284
        color: #333;
182
285
        display: block;
183
286
        height: 25px;
184
 
        padding: 8px 8px 0;
 
287
        padding: 8px 8px 2px;
 
288
}
 
289
.header-navigation-secondary nav li a:hover {
 
290
        text-decoration: none;
185
291
}
186
292
.header-navigation-secondary nav li:hover,
187
293
.header-navigation-secondary nav .current_page_item a {
198
304
        overflow: hidden;
199
305
}
200
306
footer {
201
 
        padding: 10px 10px 40px 10px;
202
307
        position: relative;
203
 
                -moz-border-radius: 0 0 4px 4px;
204
 
                -webkit-border-radius: 0 0 4px 4px;
205
 
        border-radius: 0 0 4px 4px;
206
308
        font-size: 12px;
207
 
        background: url("../img/background-footer.png") repeat scroll 0 0 #f7f6f5;
208
 
}
209
 
footer div {
210
 
        margin: 0 auto;
211
 
    padding: 0 10px;
212
 
    width: 940px;
 
309
        background: #f7f7f7;
 
310
}
 
311
footer .row {
 
312
        border-bottom: 1px solid #d8d8d8;
 
313
        padding-top: 30px;
 
314
        padding-bottom: 30px;
 
315
}
 
316
footer .no-border {
 
317
        border: 0;
213
318
}
214
319
footer a {
215
 
        color: #000;
216
 
}
217
 
footer nav ul {
 
320
        color: #333;
 
321
}
 
322
footer nav ul.footer-a {
 
323
        display: table;
 
324
        width: 100%;
 
325
}
 
326
footer nav li.grid-3 {
 
327
        border-right: 1px dotted #aea79f;
218
328
        margin: 10px 17px 30px 0;
219
329
        width: 172px;
220
 
        display: inline-block;
 
330
        display: table-cell;
221
331
        vertical-align: top;
222
 
        height: auto;
 
332
        padding-left: 20px;
223
333
        zoom: 1;
224
 
        *display: inline;
225
 
}
226
 
footer nav ul.last {
 
334
        float: none;
 
335
}
 
336
footer nav li.first-col {
 
337
        padding-left: 0;
 
338
}
 
339
footer nav li.last-col {
 
340
        border-right: 0;
227
341
        margin-right: 0;
228
342
}
 
343
footer nav li h4 {
 
344
        font-weight: normal;
 
345
        margin-bottom: 10px;
 
346
}
229
347
footer nav li {
230
 
        margin-bottom: 8px;
231
 
}
232
 
footer nav li:first-child {
233
 
        font-weight: bold;
 
348
        margin-bottom: 5px;
234
349
}
235
350
footer p {
236
351
        margin-bottom: 0;
237
352
}
 
353
footer p a:hover {
 
354
        color: #dd4814;
 
355
        text-decoration: underline;
 
356
}
 
357
footer .legal {
 
358
        background: url(../img/logo-ubuntu-grey.png) 100% 0 no-repeat;
 
359
        padding-bottom: 20px;   
 
360
}
238
361
#content {
239
362
        padding-top: 35px;
240
363
}
253
376
        height: 3px;
254
377
}
255
378
 
 
379
.home-new #content,
 
380
.community #content {
 
381
        width: 100%;
 
382
        padding-top: 0;
 
383
}
 
384
 
256
385
/**
257
386
* @section Site-wide
258
387
*/
318
447
        height:48px;
319
448
}
320
449
 
 
450
.link-cta-ubuntu{
 
451
        -moz-border-radius: 4px;
 
452
        -webkit-border-radius: 4px;
 
453
  background-color: #dd4814;
 
454
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4814), to(#c03f11));
 
455
  background-image: -webkit-linear-gradient(#dd4814, #c03f11);
 
456
  background-image:     -moz-linear-gradient(#dd4814, #c03f11);
 
457
  background-image:             -o-linear-gradient(#dd4814, #c03f11);
 
458
  border-radius: 4px;
 
459
        color: #fff;
 
460
        display: inline-block;
 
461
        font-size: 18px;
 
462
        font-weight: 300;
 
463
        margin: 0;
 
464
        padding: 6px 10px;
 
465
        text-decoration:none;
 
466
  font-family: Ubuntu, Arial, "libra sans", sans-serif;
 
467
}
 
468
 
 
469
.link-cta-ubuntu:hover {
 
470
  background: #dd4814;
 
471
  text-decoration: none;
 
472
}
 
473
 
 
474
a.cta-large {
 
475
        font-size: 20px;
 
476
        padding: 10px 20px;
 
477
}
 
478
 
321
479
.link-action-small {
322
480
        float: left;
323
481
        display: block;
468
626
        border-top: 1px dotted #aea79f;
469
627
        position: relative;
470
628
        font-size: 13px;
471
 
        font-weight: bold;
 
629
        font-weight: normal;
472
630
}
473
631
.ui-accordion h3 a {
474
632
        padding: 10px 0;
500
658
        color: #333;
501
659
}
502
660
.container-tweet {
503
 
                -moz-border-radius: 4px 4px 4px 4px;
504
 
                -webkit-border-radius: 4px 4px 4px 4px;
505
 
        border-radius: 4px 4px 4px 4px;
506
 
        padding: 10px 10px 10px;
507
 
        background-color: #f7f7f7;
 
661
        padding: 5px 0 10px;
508
662
}
509
663
.container-tweet .tweet-follow {
510
 
        margin-top: 10px;
511
 
        margin-bottom: -10px;
512
664
        padding-left: 55px;
513
665
        padding-bottom: 6px;
514
666
        background: url("../img/tweet-follow.png") 0 5px no-repeat;
515
667
        display: block;
 
668
        font-size: 13px;
516
669
}
517
670
.container-tweet .tweet-follow span {
518
671
        font-size: 16px;
519
 
        font-weight: bold;
 
672
        font-weight: normal;
520
673
        line-height: 1.2;
521
674
        display: block;
522
675
}
 
676
.tweet {
 
677
        margin-bottom: -30px;
 
678
}
523
679
.tweet a {
524
680
        display: inline;
525
681
}
537
693
.tweet.tweet-small .tweet_text {
538
694
        font-size: inherit;
539
695
}
540
 
.tweet .tweet_text a {
 
696
.tweet .tweet_text, .tweet .tweet_time a {
541
697
        color: #333;
542
698
}
543
699
.tweet .tweet_time,
644
800
  box-shadow: 0 0 0;
645
801
  border-radius: 0px;
646
802
  border: 0;
647
 
  font-size: 13px;
 
803
  font-size: 16px;
 
804
  line-height: 1.5;
648
805
  padding: 0;
649
806
  margin: 0;
650
807
}
651
808
 
 
809
.stacktack.stacktack-container .heading {
 
810
        color: #333;
 
811
        font-size: 24px;
 
812
        font-weight: 300;
 
813
}
 
814
 
652
815
.stacktack.stacktack-container a, .stacktack.stacktack-container a:hover{
653
816
  color: #DD4814;
654
817
}
677
840
.stacktack.stacktack-container img {
678
841
  max-width: 940px;
679
842
}
 
843
 
 
844
hr {
 
845
        background: #dd4814;
 
846
        height: 14px;
 
847
        margin: 0;
 
848
        border: 0;
 
849
                -moz-   box-shadow: inset 0 2px 2px -2px #333;
 
850
                -webkit box-shadow: inset 0 2px 2px -2px #333;
 
851
        box-shadow: inset 0 2px 2px -2px #333; 
 
852
        clear: both;
 
853
}
 
854
 
 
855
/* contextual-footer */
 
856
#content #contextual-footer {
 
857
        margin-bottom: 10px;
 
858
}
 
859
#content #contextual-footer, #content #contextual-footer h2 {
 
860
        font-size: 13px;
 
861
}
 
862
#content #contextual-footer h2 {
 
863
        font-weight: normal;
 
864
}
 
865
 
 
866
#content #contextual-footer ul {
 
867
        margin-bottom: 20px;
 
868
}
 
869
 
 
870
#content #contextual-footer ul li {
 
871
        padding: 3px 0;
 
872
}
 
873
 
 
874
#content #contextual-footer ul.list li {
 
875
  padding: 10px 0;
 
876
}
 
877
 
 
878
#content #contextual-footer .list li:first-of-type,
 
879
#content #contextual-footer .list li.first-item,
 
880
#content #contextual-footer .list li.first-child { 
 
881
        padding-top: 0;
 
882
}