« back to all changes in this revision
Viewing changes to css/base.css
- browse files at revision 81
- compare with another revision
- download diff
- download tarball
- view history from revision 81
- Committer: Anthony Dillon
- Date: 2013-07-31 10:28:06 UTC
- Revision ID: anthony.dillon@canonical.com-20130731102806-j6c6scb5d9w9jvag
Applying the guidelines to the theme
- files added:
- css/scratch.css
- files removed:
- css/960.css
- files modified:
- event.php
added
removed
css/base.css
1
/**
2
* Ubuntu Developer base stylesheet
3
*
4
* A base stylesheet containing site-wide styles
5
*
6
* @project Ubuntu Developer
7
* @version 1.0
8
* @author Canonical Web Team: Steve Edwards
9
* @copyright 2011 Canonical Ltd.
10
*/
11
12
/**
13
* @section Global
14
*/
15
16
body {
17
font-family: 'Ubuntu', 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
18
font-size: 13px;
19
line-height: 1.4;
20
color: #333;
21
}
22
a {
23
color: #dd4814;
24
text-decoration: none;
25
outline: 0;
26
}
27
p, dl {
28
margin-bottom: 10px;
29
}
30
strong {
31
font-weight: bold;
32
}
33
em {
34
font-style: italic;
35
}
36
code{
37
padding: 10px;
38
font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'DejaVu Sans Mono', Courier, monospace;
39
background-color: #fdf6f2;
40
display: block;
41
margin-bottom: 10px;
42
-moz-border-radius: 4px;
43
-webkit-border-radius: 4px;
44
border-radius: 4px;
45
}
46
h1 {
47
font-size: 36px;
48
line-height: 1.1;
49
margin-bottom: 20px;
50
}
51
article h1,
52
h2 {
53
font-size: 24px;
54
line-height: 1.2;
55
margin-bottom: 14px;
56
}
57
h3 {
58
font-size: 16px;
59
line-height: 1.3;
60
margin-bottom: 8px;
61
}
62
h4 {
63
font-weight: bold;
64
}
65
66
time {
67
color:#999;
68
}
69
70
/**
71
* @section Structure
72
*/
73
74
.header-login,
75
.header-navigation div,
76
.header-content div {
77
margin: 0 auto;
78
width: 940px;
79
}
80
81
.header-content h1{
82
background-color:#ffffff;
83
display:inline-block;
84
}
85
86
.header-content h2{
87
background-color:#ffffff;
88
display:table;
89
}
90
91
.header-login ul {
92
margin: 4px 0;
93
float: right;
94
}
95
.header-login li {
96
margin-right: 10px;
97
float: left;
98
}
99
.header-login a {
100
color: #333;
101
}
102
.header-navigation {
103
border-top: 2px solid #dd4814;
104
border-bottom: 2px solid #dd4814;
105
background-color: #fff;
106
height: 54px;
107
clear: right;
108
overflow: hidden;
109
}
110
.header-navigation nav ul {
111
border-right: 1px solid #dd4814;
112
float: right;
113
}
114
.header-navigation nav li {
115
border-left: 1px solid #dd4814;
116
float: left;
117
height: 54px;
118
}
119
.header-navigation nav a {
120
padding: 18px 14px 0;
121
font-size: 14px;
122
display: block;
123
height: 36px;
124
}
125
.header-navigation nav a:hover {
126
background-color: #fcece7;
127
}
128
.header-navigation nav .current_page_item a,
129
.header-navigation nav .current_page_parent a,
130
.header-navigation nav .current_page_ancestor a {
131
background-color: #dd4814;
132
color: #fff;
133
}
134
.header-navigation input {
135
margin: 12px 10px 0 10px;
136
padding: 5px;
137
border-top: 1px solid #a1a1a1;
138
border-right: 1px solid #e0e0e0;
139
border-bottom: 1px solid #fff;
140
border-left: 1px solid #e0e0e0;
141
width: 90px;
142
font-style: italic;
143
color: #ccc;
144
-moz-border-radius: 3px;
145
-webkit-border-radius: 3px;
146
border-radius: 3px;
147
-moz-box-shadow: inset 0 1px 1px #e0e0e0;
148
-webkit-box-shadow: inset 0 1px 1px #e0e0e0;
149
box-shadow: inset 0 1px 1px #e0e0e0;
150
}
151
.header-navigation h2 {
152
margin: 18px 0 0 6px;
153
text-transform: lowercase;
154
font-size: 22px;
155
color: #dd4814;
156
float: left;
157
}
158
.header-navigation .logo-ubuntu {
159
margin-top: 12px;
160
float: left;
161
}
162
.header-content .header-navigation-secondary {
163
margin-bottom: 40px;
164
padding: 0;
165
position: relative;
166
z-index: 2;
167
}
168
.header-navigation-secondary div {
169
padding: 0;
170
border: 2px solid #dd4814;
171
-moz-border-radius: 0px 0px 4px 4px;
172
-webkit-border-radius: 0px 0px 4px 4px;
173
border-radius: 0px 0px 4px 4px;
174
background: #fff;
175
border-top: 0px;
176
width: 936px;
177
}
178
.header-navigation-secondary nav li {
179
float: left;
180
}
181
.header-navigation-secondary nav li a {
182
color: #333;
183
display: block;
184
height: 25px;
185
padding: 8px 8px 0;
186
}
187
.header-navigation-secondary nav li:hover,
188
.header-navigation-secondary nav .current_page_item a {
189
background: url("../img/sec-nav-hover.gif");
190
}
191
.header-content {
192
padding-bottom: 30px;
193
border-bottom: 1px solid #e0e0e0;
194
-moz-box-shadow: 0 1px 3px #e0e0e0;
195
-webkit-box-shadow: 0 1px 3px #e0e0e0;
196
box-shadow: 0 1px 3px #e0e0e0;
197
margin-bottom: 3px;
198
position: relative;
199
overflow: hidden;
200
}
201
footer {
202
padding: 10px 10px 40px 10px;
203
position: relative;
204
-moz-border-radius: 0 0 4px 4px;
205
-webkit-border-radius: 0 0 4px 4px;
206
border-radius: 0 0 4px 4px;
207
font-size: 12px;
208
background: url("../img/background-footer.png") repeat scroll 0 0 #f7f6f5;
209
}
210
footer div {
211
margin: 0 auto;
212
padding: 0 10px;
213
width: 940px;
214
}
215
footer a {
216
color: #000;
217
}
218
footer nav ul {
219
margin: 10px 17px 30px 0;
220
width: 172px;
221
display: inline-block;
222
vertical-align: top;
223
height: auto;
224
zoom: 1;
225
*display: inline;
226
}
227
footer nav ul.last {
228
margin-right: 0;
229
}
230
footer nav li {
231
margin-bottom: 8px;
232
}
233
footer nav li:first-child {
234
font-weight: bold;
235
}
236
footer p {
237
margin-bottom: 0;
238
}
239
#content {
240
padding-top: 35px;
241
}
242
.arrow-nav {
243
display: none;
244
position: absolute;
245
top: -1px;
246
z-index: 3;
247
}
248
.shadow {
249
margin: 30px 0 3px 0;
250
border-bottom: 1px solid #e0e0e0;
251
-moz-box-shadow: 0 2px 3px #e0e0e0;
252
-webkit-box-shadow: 0 2px 3px #e0e0e0;
253
box-shadow: 0 2px 3px #e0e0e0;
254
height: 3px;
255
}
256
257
/**
258
* @section Site-wide
259
*/
260
261
#content h2{
262
font-size:24px;
263
}
264
265
.box-orange {
266
padding: 10px;
267
border: 3px solid #dd4814;
268
-moz-border-radius: 4px;
269
-webkit-border-radius: 4px;
270
border-radius: 4px;
271
}
272
.box-orange .link-action-small {
273
float: right;
274
margin: 0 0 0 20px;
275
}
276
.link-bug {
277
margin-left: 10px;
278
color: #999;
279
}
280
.link-action {
281
float: left;
282
margin-bottom: 20px;
283
padding: 8px 12px;
284
display: block;
285
background-color: #dd4814;
286
color: #fff;
287
-moz-border-radius: 20px;
288
-webkit-border-radius: 20px;
289
border-radius: 20px;
290
font-size: 16px;
291
line-height: 1.3;
292
border-top: 3px solid #e6633a;
293
border-bottom: 3px solid #c03d14;
294
}
295
.link-action2 {
296
float: left;
297
display: block;
298
color: #fff;
299
font-size: 16px;
300
line-height: 1.3;
301
}
302
.link-action2 span{
303
display:block;
304
float:left;
305
}
306
.link-action2 .cta-left{
307
background:url(../img/button-cta-left.png) no-repeat;
308
width:22px;
309
height:48px;
310
}
311
.link-action2 .cta-center{
312
background:url(../img/button-cta-slice.png) repeat-x;
313
line-height:45px;
314
height:48px;
315
}
316
.link-action2 .cta-right{
317
background:url(../img/button-cta-right.png) no-repeat;
318
width:22px;
319
height:48px;
320
}
321
322
.link-action-small {
323
float: left;
324
display: block;
325
color: #fff;
326
font-size: 16px;
327
}
328
.link-action-small span{
329
display:block;
330
float:left;
331
height:42px;
332
}
333
.link-action-small .cta-left{
334
background:url(../img/button-cta-left-small.png) no-repeat;
335
width:19px;
336
}
337
.link-action-small .cta-center{
338
background:url(../img/button-cta-slice-small.png) repeat-x;
339
line-height:42px;
340
}
341
.link-action-small .cta-right{
342
background:url(../img/button-cta-right-small.png) no-repeat;
343
width:19px;
344
}
345
346
.link-action:active {
347
position: relative;
348
top: 1px;
349
}
350
.link-action2:active {
351
position: relative;
352
top: 1px;
353
}
354
.link-action-small:active {
355
position: relative;
356
top: 1px;
357
}
358
.list-bullets li {
359
margin-bottom: 10px;
360
list-style: disc;
361
list-style-position: inside;
362
}
363
.box {
364
margin-bottom: 30px;
365
padding: 15px;
366
border: 1px solid #aea79f;
367
-moz-border-radius: 4px;
368
-webkit-border-radius: 4px;
369
border-radius: 4px;
370
}
371
.box-padded {
372
margin-bottom: 30px;
373
padding: 5px;
374
border: 2px solid #aea79f;
375
-moz-border-radius: 4px;
376
-webkit-border-radius: 4px;
377
border-radius: 4px;
378
background: url("../img/pattern-featured.gif") repeat scroll 0 0 #ebe9e7;
379
overflow: hidden;
380
}
381
.box-padded h3 {
382
margin: 5px 0 10px 5px;
383
}
384
.box-padded div {
385
padding: 10px;
386
border: 1px solid #aea79f;
387
-moz-border-radius: 4px;
388
-webkit-border-radius: 4px;
389
border-radius: 4px;
390
background-color: #fff;
391
overflow: hidden;
392
}
393
.box-padded li {
394
padding: 0 10px;
395
float: left;
396
width: 211px;
397
border-right: 1px dotted #aea79f;
398
}
399
.box-padded li.first {
400
padding: 0;
401
margin-bottom: 0;
402
}
403
.box-padded li.last {
404
border: 0;
405
width: 217px;
406
}
407
.box-padded img {
408
margin: 0 10px 50px 0;
409
float: left;
410
-moz-border-radius: 8px;
411
-webkit-border-radius: 8px;
412
border-radius: 8px;
413
}
414
.box-clear {
415
margin-bottom: 40px;
416
}
417
.box-clear .grid-4.first {
418
margin-right: 15px;
419
padding-right: 15px;
420
}
421
.box-clear .grid-4 {
422
margin-left: 0;
423
margin-right: 10px;
424
padding-right: 10px;
425
width: 298px;
426
}
427
.box-clear time {
428
display: block;
429
border-bottom: 1px dotted #aea79f;
430
padding-bottom: 10px;
431
margin-bottom: 10px;
432
}
433
.box-clear div.first {
434
border-right: 1px dotted #aea79f;
435
}
436
.box-clear a {
437
display: block;
438
}
439
.box-clear .location {
440
display: block;
441
margin-bottom: 1px;
442
}
443
.box-clear .last {
444
margin: 0;
445
padding-right: 0;
446
-moz-border-radius: 4px;
447
-webkit-border-radius: 4px;
448
border-radius: 4px;
449
width: 293px;
450
}
451
452
/* Widgets */
453
454
.ui-state-focus {
455
outline: none;
456
}
457
.ui-accordion {
458
border-bottom: 1px dotted #aea79f;
459
}
460
.ui-accordion a {
461
display: block;
462
}
463
.ui-accordion h3 {
464
margin-bottom: 0;
465
border-top: 1px dotted #aea79f;
466
position: relative;
467
font-size: 13px;
468
font-weight: bold;
469
}
470
.ui-accordion h3 a {
471
padding: 10px 0;
472
color: #333;
473
}
474
.ui-accordion h4 {
475
margin-bottom: 5px;
476
}
477
.ui-accordion div fieldset {
478
padding-bottom: 5px;
479
}
480
.ui-accordion div li,
481
.ui-accordion div input {
482
margin-bottom: 10px;
483
}
484
.ui-accordion .ui-icon {
485
position: absolute;
486
top: 15px;
487
right: 0;
488
display: block;
489
width: 8px;
490
height: 8px;
491
background: url("../img/icon-accordion-inactive.png") 0 0 no-repeat transparent;
492
}
493
.ui-accordion .ui-state-active .ui-icon {
494
background-image: url("../img/icon-accordion-active.png");
495
}
496
.ui-accordion .current_page_item a {
497
color: #333;
498
}
499
.container-tweet {
500
-moz-border-radius: 4px 4px 4px 4px;
501
-webkit-border-radius: 4px 4px 4px 4px;
502
border-radius: 4px 4px 4px 4px;
503
padding: 10px 10px 10px;
504
background-color: #f7f7f7;
505
}
506
.container-tweet .tweet-follow {
507
margin-top: 10px;
508
margin-bottom: -10px;
509
padding-left: 55px;
510
padding-bottom: 6px;
511
background: url("../img/tweet-follow.png") 0 5px no-repeat;
512
display: block;
513
}
514
.container-tweet .tweet-follow span {
515
font-size: 16px;
516
font-weight: bold;
517
line-height: 1.2;
518
display: block;
519
}
520
.tweet a {
521
display: inline;
522
}
523
.tweet .tweet_text {
524
padding: 10px;
525
background-color: #fff;
526
-moz-border-radius: 4px 4px 4px 4px;
527
-webkit-border-radius: 4px 4px 4px 4px;
528
border-radius: 4px 4px 4px 4px;
529
border: 1px solid #dd4814;
530
font-size: 16px;
531
display: block;
532
clear: both;
533
}
534
.tweet.tweet-small .tweet_text {
535
font-size: inherit;
536
}
537
.tweet .tweet_text a {
538
color: #333;
539
}
540
.tweet .tweet_time,
541
.tweet .tweet_user_and_time {
542
padding: 15px 0 10px 0;
543
position: relative;
544
top: -2px;
545
background: url("../img/tweet-arrow.png") no-repeat;
546
display: block;
547
}
548
.tweet .tweet_odd .tweet_time,
549
.tweet .tweet_odd .tweet_user_and_time {
550
background-position: right 0;
551
float: right;
552
}
553
.tweet .tweet_even .tweet_time,
554
.tweet .tweet_even .tweet_user_and_time {
555
background-position: left 0;
556
float: left;
557
}
558
559
/* Search */
560
561
#content .list-search li {
562
list-style-type:none;
563
border:0px;
564
margin-bottom: 15px;
565
padding-top: 15px;
566
}
567
568
/* Blog */
569
570
.blog-article #nav-single {
571
margin-top: 30px;
572
margin-bottom: 30px;
573
}
574
.blog-article #nav-single .nav-next {
575
float: right;
576
}
577
.blog-article article header .entry-meta {
578
margin-bottom: 20px;
579
}
580
.blog-article article .entry-meta {
581
color: #999;
582
}
583
.blog-article #respond form input[type="submit"] {
584
float: left;
585
cursor: pointer;
586
margin-bottom: 20px;
587
padding: 8px 12px;
588
display: block;
589
background-color: #dd4814;
590
color: #fff;
591
-moz-border-radius: 20px;
592
-webkit-border-radius: 20px;
593
border-radius: 20px;
594
font-size: 16px;
595
line-height: 1.3;
596
border-top: 3px solid #e6633a;
597
border-left: 3px solid #e6633a;
598
border-right: 3px solid #e6633a;
599
border-bottom: 3px solid #c03d14;
600
}
601
.blog-article #respond form input[type="submit"]:active {
602
position: relative;
603
top: 1px;
604
}
605
606
.alignnone{
607
float:left;
608
margin:10px 20px 10px 0;
609
}
610
.alignleft{
611
float:left;
612
margin:10px 20px 10px 0;
613
}
614
.alignright{
615
float:right;
616
margin:10px 0 10px 20px;
617
}
618
619
.aligncenter{
620
float:left;
621
margin:10px 20px 10px 0;
622
}
623
.entry-content h2, .entry-content h3{
624
margin-top:20px;
625
}
626
.entry-content ul li{
627
list-style-type: circle;
628
margin-left:16px;
629
}
630
631
.entry-content hr{
632
border:none;
633
border-top: 1px dotted #AEA79F;
634
}
635
636
637
kbd {
638
background: none repeat scroll 0 0 #EEEEEE;
639
border-color: #CCCCCC #AAAAAA #888888 #BBBBBB;
640
border-style: solid;
641
border-width: 1px 2px 2px 1px;
642
color: #000000;
643
padding: 2px 4px 0;
644
white-space: nowrap;
645
}
646
647
/* keep up-to-date - latest article lists and social links */
648
#keep-up h3 {
649
color: #ADA79F;
650
font-size: 16px;
651
font-weight: 300;
652
}
653
654
.article h4, .event h4 {
655
font-weight: normal;
656
}
657
658
#keep-up .article h4 a {
659
font-size: 16px;
660
}
661
662
#keep-up .article p {
663
font-size: 13px;
664
margin-bottom: 5px;
665
}
666
667
#keep-up .event h4 a {
668
font-size: 16px;
669
}
670
671
#keep-up .box-clear time {
672
padding-bottom: 7px;
673
}
674
675
#keep-up .social-links {
676
margin-top: 20px;
677
}
678
679
#keep-up .social-links a {
680
padding: 4px 0 4px 24px;
681
}
682
683
#keep-up .blog-links a {
684
padding: 4px 0 4px 24px;
685
}
686
687
#keep-up .social-links a.link-twitter { background: url(../img/icon-twitter.png) 0 50% no-repeat; }
688
689
#keep-up .social-links a.link-facebook { background: url(../img/icon-facebook.png) 0 50% no-repeat; }
690
691
#keep-up .social-links a.link-google-plus { background: url(../img/icon-google-plus.png) 0 50% no-repeat; }
692
693
#keep-up .blog-links a.link-rss { background: url("../img/rss.jpg") 0 50% no-repeat; }
694
695
#keep-up .blog-links a.link-blog { background: url("../img/icon-forum.png") 0 50% no-repeat; }
Loggerhead is a web-based interface for Breezy
Version: 2.0.1