Subversion Repositories blog

Rev

Rev 21 | Rev 37 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
5 jldugger 1
/*
2
        Name: Smashing HTML5
3
        Date: July 2009
4
        Description: Sample layout for HTML5 and CSS3 goodness.
5
        Version: 1.0
6
        Author: Enrique Ramírez
29 jldugger 7
        Author URI: http://enrique-ramirez.com
8
        See also: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
5 jldugger 9
*/
10
 
11
/* Imports */
12
@import url("reset.css");
13
@import url("pygment.css");
14
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin);
15
 
16
/***** Global *****/
17
/* Body */
18
body {
19
    color: #000305;
20
    font-size: 87.5%; /* Base font size: 14px */
21
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
22
    line-height: 1.429;
23
    margin: 0;
24
    padding: 0;
25
    text-align: left;
26
}
27
 
28
 
29
 
30
/* Headings */
31
h1 {font-size: 2em }
32
h2 {font-size: 1.571em} /* 22px */
33
h3 {font-size: 1.429em} /* 20px */
34
h4 {font-size: 1.286em} /* 18px */
35
h5 {font-size: 1.143em} /* 16px */
36
h6 {font-size: 1em}             /* 14px */
37
 
38
h1, h2, h3, h4, h5, h6 {
39
        font-weight: 400;
40
        line-height: 1.1;
41
        margin-bottom: .8em;
42
    font-family: 'Yanone Kaffeesatz', arial, serif;
43
}
44
 
45
h3, h4, h5, h6 { margin-top: .8em; }
46
 
47
hr { border: 2px solid #EEEEEE; }
48
 
49
/* Anchors */
50
a {outline: 0;}
51
a img {border: 0px; text-decoration: none;}
52
a:link, a:visited {
14 jldugger 53
        color: #4A43C7;
5 jldugger 54
        padding: 0 1px;
55
        text-decoration: underline;
56
}
57
a:hover, a:active {
14 jldugger 58
        background-color: #4A43C7;
5 jldugger 59
        color: #fff;
60
        text-decoration: none;
61
        text-shadow: 1px 1px 1px #333;
62
}
63
 
64
h1 a:hover {
65
    background-color: inherit
66
}
67
 
68
/* Paragraphs */
69
p {margin-bottom: 1.143em;}
70
 
71
strong, b {font-weight: bold;}
72
em, i {font-style: italic;}
73
 
74
/* Lists */
75
ul {
76
        list-style: outside disc;
77
        margin: 1em 0 1.5em 1.5em;
78
}
79
 
80
ol {
81
        list-style: outside decimal;
82
        margin: 1em 0 1.5em 1.5em;
83
}
84
 
85
.post-info {
86
    float:right;
87
    margin:10px;
88
    padding:5px;
89
}
90
 
91
.post-info p{
92
    margin-bottom: 1px;
93
}
94
 
95
.readmore { float: right }
96
 
97
dl {margin: 0 0 1.5em 0;}
98
dt {font-weight: bold;}
99
dd {margin-left: 1.5em;}
100
 
101
pre{background-color: #000; padding: 10px; color: #fff; margin: 10px; overflow: auto;}
102
 
103
/* Quotes */
104
blockquote {
105
    margin: 20px;
106
    font-style: italic;
107
}
108
cite {}
109
 
110
q {}
111
 
112
/* Tables */
113
table {margin: .5em auto 1.5em auto; width: 98%;}
114
 
115
        /* Thead */
116
        thead th {padding: .5em .4em; text-align: left;}
117
        thead td {}
118
 
119
        /* Tbody */
120
        tbody td {padding: .5em .4em;}
121
        tbody th {}
122
 
123
        tbody .alt td {}
124
        tbody .alt th {}
125
 
126
        /* Tfoot */
127
        tfoot th {}
128
        tfoot td {}
129
 
130
/* HTML5 tags */
131
header, section, footer,
132
aside, nav, article, figure {
133
        display: block;
134
}
135
 
136
/***** Layout *****/
137
.body {clear: both; margin: 0 auto; width: 800px;}
138
img.right figure.right {float: right; margin: 0 0 2em 2em;}
139
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
140
 
141
/*
142
        Header
143
*****************/
144
#banner {
145
        margin: 0 auto;
146
        padding: 2.5em 0 0 0;
147
}
148
 
149
        /* Banner */
150
        #banner h1 {font-size: 3.571em; line-height: 0;}
151
        #banner h1 a:link, #banner h1 a:visited {
152
                color: #000305;
153
                display: block;
154
                font-weight: bold;
155
                margin: 0 0 .6em .2em;
156
                text-decoration: none;
157
                width: 427px;
158
        }
159
        #banner h1 a:hover, #banner h1 a:active {
160
                background: none;
14 jldugger 161
                color: #4A43C7;
5 jldugger 162
                text-shadow: none;
163
        }
164
 
165
        #banner h1 strong {font-size: 0.36em; font-weight: normal;}
166
 
167
        /* Main Nav */
168
        #banner nav {
169
                background: #000305;
170
                font-size: 1.143em;
171
                height: 40px;
172
                line-height: 30px;
173
                margin: 0 auto 2em auto;
174
                padding: 0;
175
                text-align: center;
176
                width: 800px;
177
 
178
                border-radius: 5px;
179
                -moz-border-radius: 5px;
180
                -webkit-border-radius: 5px;
181
        }
182
 
183
        #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
184
        #banner nav li {float: left; display: inline; margin: 0;}
185
 
186
        #banner nav a:link, #banner nav a:visited {
187
                color: #fff;
188
                display: inline-block;
189
                height: 30px;
190
                padding: 5px 1.5em;
191
                text-decoration: none;
192
        }
193
        #banner nav a:hover, #banner nav a:active,
194
        #banner nav .active a:link, #banner nav .active a:visited {
14 jldugger 195
                background: #4A43C7;
5 jldugger 196
                color: #fff;
197
                text-shadow: none !important;
198
        }
199
 
200
        #banner nav li:first-child a {
201
                border-top-left-radius: 5px;
202
                -moz-border-radius-topleft: 5px;
203
                -webkit-border-top-left-radius: 5px;
204
 
205
                border-bottom-left-radius: 5px;
206
                -moz-border-radius-bottomleft: 5px;
207
                -webkit-border-bottom-left-radius: 5px;
208
        }
209
 
210
/*
211
        Featured
212
*****************/
213
#featured {
214
        background: #fff;
215
        margin-bottom: 2em;
216
        overflow: hidden;
217
        padding: 20px;
218
        width: 760px;
219
 
220
        border-radius: 10px;
221
        -moz-border-radius: 10px;
222
        -webkit-border-radius: 10px;
223
}
224
 
225
#featured figure {
226
        border: 2px solid #eee;
227
        float: right;
228
        margin: 0.786em 2em 0 5em;
229
        width: 248px;
230
}
231
#featured figure img {display: block; float: right;}
232
 
14 jldugger 233
#featured h2 {color: #4A43C7; font-size: 1.714em; margin-bottom: 0.333em;}
5 jldugger 234
#featured h3 {font-size: 1.429em; margin-bottom: .5em;}
235
 
236
#featured h3 a:link, #featured h3 a:visited {color: #000305; text-decoration: none;}
237
#featured h3 a:hover, #featured h3 a:active {color: #fff;}
238
 
239
/*
240
        Body
241
*****************/
242
#content {
243
        background: #fff;
244
        margin-bottom: 2em;
245
        overflow: hidden;
246
        padding: 20px 20px;
247
        width: 760px;
248
 
249
        border-radius: 10px;
250
        -moz-border-radius: 10px;
251
        -webkit-border-radius: 10px;
252
}
253
 
254
/*
255
        Extras
256
*****************/
257
#extras {margin: 0 auto 3em auto; overflow: hidden;}
258
 
259
#extras ul {list-style: none; margin: 0;}
260
#extras li {border-bottom: 1px solid #fff;}
261
#extras h2 {
14 jldugger 262
        color: #4A43C7;
5 jldugger 263
        font-size: 1.429em;
264
        margin-bottom: .25em;
265
        padding: 0 3px;
266
}
267
 
268
#extras a:link, #extras a:visited {
269
        color: #444;
270
        display: block;
271
        border-bottom: 1px solid #F4E3E3;
272
        text-decoration: none;
273
        padding: .3em .25em;
274
}
275
 
276
#extras li:last-child,
277
#extras li:last-child a {border: 0}
278
 
279
#extras .blogroll li:nth-last-child(2),
280
#extras .blogroll li:nth-last-child(3),
281
#extras .blogroll li:nth-last-child(2) a,
282
#extras .blogroll li:nth-last-child(3) a {border: 0;}
283
 
284
#extras a:hover, #extras a:active {color: #fff;}
285
 
286
        /* Blogroll */
287
        #extras .blogroll {
288
                float: left;
289
                width: 615px;
290
        }
291
 
292
        #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
293
 
294
        /* Social */
295
        #extras .social {
296
                float: right;
297
                width: 175px;
298
        }
299
 
300
        #extras div[class='social'] a {
301
                background-repeat: no-repeat;
302
                background-position: 3px 6px;
303
                padding-left: 25px;
304
        }
305
 
306
                /* Icons */
307
                .social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
308
                .social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
309
                .social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
310
                .social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
311
                .social a[href*='atom.xml'] {background-image: url('../images/icons/rss.png');}
312
                .social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
313
                .social a[href*='linkedin.com'] {background-image: url('../images/icons/linkedin.png');}
314
 
315
/*
316
        About
317
*****************/
318
#about {
319
        background: #fff;
320
        font-style: normal;
321
        margin-bottom: 2em;
322
        overflow: hidden;
323
        padding: 20px;
324
        text-align: left;
325
        width: 760px;
326
 
327
        border-radius: 10px;
328
        -moz-border-radius: 10px;
329
        -webkit-border-radius: 10px;
330
}
331
 
332
#about .primary {float: left; width: 165px;}
14 jldugger 333
#about .primary strong {color: #4A43C7; display: block; font-size: 1.286em;}
5 jldugger 334
#about .photo {float: left; margin: 5px 20px;}
335
 
336
#about .url:link, #about .url:visited {text-decoration: none;}
337
 
338
#about .bio {float: right; width: 500px;}
339
 
340
/*
341
        Footer
342
*****************/
343
#contentinfo {padding-bottom: 2em; text-align: right;}
344
 
345
/***** Sections *****/
346
/* Blog */
347
.hentry {
348
        border-bottom: 1px solid #eee;
349
        padding: 1.5em 0;
350
}
351
li:last-child .hentry, #content > .hentry {border: 0; margin: 0;}
352
#content > .hentry {padding: 1em 0;}
353
.hentry img{display : none ;}
354
.entry-title {font-size: 3em; margin-bottom: 10px; margin-top: 0;}
355
.entry-title a:link, .entry-title a:visited {text-decoration: none; color: #333;}
356
.entry-title a:visited {background-color: #fff;}
357
 
358
.hentry .post-info * {font-style: normal;}
359
 
360
        /* Content */
361
        .hentry footer {margin-bottom: 2em;}
362
        .hentry footer address {display: inline;}
363
        #posts-list footer address {display: block;}
364
 
365
        /* Blog Index */
366
        #posts-list {list-style: none; margin: 0;}
367
        #posts-list .hentry {padding-left: 10px; position: relative;}
368
 
369
        #posts-list footer {
370
                left: 10px;
371
                position: relative;
372
        float: left;
373
                top: 0.5em;
374
                width: 190px;
375
        }
376
 
377
        /* About the Author */
378
        #about-author {
379
                background: #f9f9f9;
380
                clear: both;
381
                font-style: normal;
382
                margin: 2em 0;
383
                padding: 10px 20px 15px 20px;
384
 
385
                border-radius: 5px;
386
                -moz-border-radius: 5px;
387
                -webkit-border-radius: 5px;
388
        }
389
 
390
        #about-author strong {
391
                color: #C64350;
392
                clear: both;
393
                display: block;
394
                font-size: 1.429em;
395
        }
396
 
397
        #about-author .photo {border: 1px solid #ddd; float: left; margin: 5px 1em 0 0;}
398
 
399
        /* Comments */
400
        #comments-list {list-style: none; margin: 0 1em;}
401
        #comments-list blockquote {
402
                background: #f8f8f8;
403
                clear: both;
404
                font-style: normal;
405
                margin: 0;
406
                padding: 15px 20px;
407
 
408
                border-radius: 5px;
409
                -moz-border-radius: 5px;
410
                -webkit-border-radius: 5px;
411
        }
412
        #comments-list footer {color: #888; padding: .5em 1em 0 0; text-align: right;}
413
 
414
        #comments-list li:nth-child(2n) blockquote {background: #F5f5f5;}
415
 
416
        /* Add a Comment */
417
        #add-comment label {clear: left; float: left; text-align: left; width: 150px;}
418
        #add-comment input[type='text'],
419
        #add-comment input[type='email'],
420
        #add-comment input[type='url'] {float: left; width: 200px;}
421
 
422
        #add-comment textarea {float: left; height: 150px; width: 495px;}
423
 
424
        #add-comment p.req {clear: both; margin: 0 .5em 1em 0; text-align: right;}
425
 
426
        #add-comment input[type='submit'] {float: right; margin: 0 .5em;}
427
        #add-comment * {margin-bottom: .5em;}