Subversion Repositories blog

Rev

Rev 37 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 37 Rev 39
Line 3... Line 3...
3
        Date: July 2009
3
        Date: July 2009
4
        Description: Sample layout for HTML5 and CSS3 goodness.
4
        Description: Sample layout for HTML5 and CSS3 goodness.
5
        Version: 1.0
5
        Version: 1.0
6
        Author: Enrique Ramírez
6
        Author: Enrique Ramírez
7
        Author URI: http://enrique-ramirez.com
7
        Author URI: http://enrique-ramirez.com
8
        See also: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
-
 
9
*/
8
*/
10
9
11
/* Imports */
10
/* Imports */
12
@import url("reset.css");
11
@import url("reset.css");
13
@import url("pygment.css");
12
@import url("pygment.css");
Line 52... Line 51...
52
a:link, a:visited {
51
a:link, a:visited {
53
        color: #4A43C7;
52
        color: #4A43C7;
54
        padding: 0 1px;
53
        padding: 0 1px;
55
        text-decoration: underline;
54
        text-decoration: underline;
56
}
55
}
57
a:hover, a:active {
56
a:hover, a:active, a.active, .active>a {
58
        background-color: #4A43C7;
57
        background-color: #4A43C7;
59
        color: #fff;
58
        color: #fff;
60
        text-decoration: none;
59
        text-decoration: none;
61
        text-shadow: 1px 1px 1px #333;
60
        text-shadow: 1px 1px 1px #333;
62
}
61
}
Line 111... Line 110...
111
110
112
/* Tables */
111
/* Tables */
113
table {margin: .5em auto 1.5em auto; width: 98%;}
112
table {margin: .5em auto 1.5em auto; width: 98%;}
114
       
113
       
115
        /* Thead */
114
        /* Thead */
116
        thead th {padding: .5em .4em; text-align: left;}
115
        thead th {padding: .5em .4em; text-align: left; border: thin solid grey;}
117
        thead td {}
116
        thead td {border: thin solid grey;}
118
117
119
        /* Tbody */
118
        /* Tbody */
120
        tbody td {padding: .5em .4em;}
119
        tbody td {padding: .5em .4em; border: thin solid grey;}
121
        tbody th {}
120
        tbody th {border: thin solid grey;}
122
       
121
       
123
        tbody .alt td {}
122
        tbody .alt td {}
124
        tbody .alt th {}
123
        tbody .alt th {}
125
       
124
       
126
        /* Tfoot */
125
        /* Tfoot */
Line 132... Line 131...
132
aside, nav, article, figure {
131
aside, nav, article, figure {
133
        display: block;
132
        display: block;
134
}
133
}
135
134
136
/***** Layout *****/
135
/***** Layout *****/
137
.body {clear: both; margin: 0 auto; width: 800px;}
-
 
138
img.right figure.right {float: right; margin: 0 0 2em 2em;}
136
img.right figure.right {float: right; margin: 0 0 2em 2em;}
139
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
137
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
140
138
141
/*
139
/*
142
        Header
140
        Header
143
*****************/
141
*****************/
144
#banner {
142
#banner {
-
 
143
    clear: both;
145
        margin: 0 auto;
144
        margin: 0 auto 0 auto;
146
        padding: 2.5em 0 0 0;
145
        padding: 2.5em 0 0 0;
147
}
146
}
148
147
149
        /* Banner */
148
        /* Banner */
-
 
149
        #banner h1 {
150
        #banner h1 {font-size: 3.571em; line-height: 0;}
150
        font-size: 3.571em;
-
 
151
        line-height: 0;
-
 
152
    }
151
        #banner h1 a:link, #banner h1 a:visited {
153
        #banner h1 a:link, #banner h1 a:visited {
152
                color: #000305;
154
                color: #000305;
153
                display: block;
155
                display: block;
154
                font-weight: bold;
156
                font-weight: bold;
155
                margin: 0 0 .6em .2em;
157
                margin: 0 0 .6em 2em;
156
                text-decoration: none;
158
                text-decoration: none;
157
                width: 427px;
159
                width: 427px;
158
        }
160
        }
159
        #banner h1 a:hover, #banner h1 a:active {
161
        #banner h1 a:hover, #banner h1 a:active {
160
                background: none;
162
                background: none;
Line 170... Line 172...
170
                font-size: 1.143em;
172
                font-size: 1.143em;
171
                height: 40px;
173
                height: 40px;
172
                line-height: 30px;
174
                line-height: 30px;
173
                margin: 0 auto 2em auto;
175
                margin: 0 auto 2em auto;
174
                padding: 0;
176
                padding: 0;
175
                text-align: center;
-
 
176
                width: 800px;
177
                width: 90%;
177
               
178
               
178
                border-radius: 5px;
179
                border-radius: 5px;
179
                -moz-border-radius: 5px;
180
                -moz-border-radius: 5px;
180
                -webkit-border-radius: 5px;
181
                -webkit-border-radius: 5px;
181
        }
182
        }
182
       
183
       
183
        #banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
184
        #banner nav ul {list-style: none; margin: 0 auto;}
184
        #banner nav li {float: left; display: inline; margin: 0;}
185
        #banner nav li {float: left; display: inline; margin: 0;}
185
       
186
       
186
        #banner nav a:link, #banner nav a:visited {
187
        #banner nav a:link, #banner nav a:visited {
187
                color: #fff;
188
                color: #fff;
188
                display: inline-block;
189
                display: inline-block;
Line 208... Line 209...
208
        }
209
        }
209
210
210
/*
211
/*
211
        Featured
212
        Featured
212
*****************/
213
*****************/
213
#featured {
214
#content {
214
        background: #fff;
215
        background: #fff;
215
        margin-bottom: 2em;
-
 
216
        overflow: hidden;
-
 
217
        padding: 20px;
-
 
218
        width: 760px;
-
 
219
       
-
 
220
        border-radius: 10px;
216
        border-radius: 10px;
221
        -moz-border-radius: 10px;
217
        -moz-border-radius: 10px;
222
        -webkit-border-radius: 10px;
218
        -webkit-border-radius: 10px;
-
 
219
    float: left;
-
 
220
    margin: 1em 10px 2em 7%;
-
 
221
        background: #fff;
-
 
222
        overflow: hidden;
-
 
223
        padding: 20px 20px;
-
 
224
        min-width: 600px;
-
 
225
        width: 60%;
223
}
226
}
224
227
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
-
 
233
#featured h2 {color: #4A43C7; font-size: 1.714em; margin-bottom: 0.333em;}
-
 
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
/*
228
/*
240
        Body
229
        Extras
241
*****************/
230
*****************/
-
 
231
.adsense { float:right; padding: 20px 20px; }
242
#content {
232
#sidebar {
-
 
233
    float: right;
-
 
234
    margin: 1em 7% 2em 10px;
243
        background: #fff;
235
        background: #fff;
244
        margin-bottom: 2em;
-
 
245
        overflow: hidden;
236
        overflow: hidden;
246
        padding: 20px 20px;
237
        padding: 20px 20px;
247
        width: 760px;
238
        width: 15%;
248
       
239
       
249
        border-radius: 10px;
240
        border-radius: 10px;
250
        -moz-border-radius: 10px;
241
        -moz-border-radius: 10px;
251
        -webkit-border-radius: 10px;
242
        -webkit-border-radius: 10px;
252
}
243
}
253
244
254
/*
-
 
255
        Extras
-
 
256
*****************/
245
#sidebar ul {list-style: none; margin: 0;}
257
#extras {margin: 0 auto 3em auto; overflow: hidden;}
246
#sidebar li {border-bottom: 1px solid #fff;}
258
247
259
#extras ul {list-style: none; margin: 0;}
-
 
260
#extras li {border-bottom: 1px solid #fff;}
-
 
261
#extras h2 {
248
#sidebar h2 {
262
        color: #4A43C7;
249
        color: #4A43C7;
263
        font-size: 1.429em;
250
        font-size: 1.429em;
-
 
251
        margin-top: .75em;
264
        margin-bottom: .25em;
252
        margin-bottom: .25em;
265
        padding: 0 3px;
253
        padding: 0 3px;
266
}
254
}
267
255
268
#extras a:link, #extras a:visited {
256
#sidebar a:link, #sidebar a {
269
        color: #444;
257
        color: #444;
270
        display: block;
258
        display: block;
271
        border-bottom: 1px solid #F4E3E3;
259
        border-bottom: 1px solid #F4E3E3;
272
        text-decoration: none;
260
        text-decoration: none;
273
        padding: .3em .25em;
261
        padding: .3em .25em;
274
}
262
}
-
 
263
#sidebar li.active a {color: white;}
275
264
276
#extras li:last-child,
265
#sidebar li:last-child,
277
#extras li:last-child a {border: 0}
266
#sidebar li:last-child a {border: 0}
278
267
279
#extras .blogroll li:nth-last-child(2),
268
#sidebar .blogroll li:nth-last-child(2),
280
#extras .blogroll li:nth-last-child(3),
269
#sidebar .blogroll li:nth-last-child(3),
281
#extras .blogroll li:nth-last-child(2) a,
270
#sidebar .blogroll li:nth-last-child(2) a,
282
#extras .blogroll li:nth-last-child(3) a {border: 0;}
271
#sidebar .blogroll li:nth-last-child(3) a {border: 0;}
283
272
284
#extras a:hover, #extras a:active {color: #fff;}
273
#sidebar a:hover, #sidebar a:active {color: #fff;}
285
274
286
        /* Blogroll */
275
        /* Blogroll */
287
        #extras .blogroll {
276
        #sidebar .blogroll {
288
                float: left;
-
 
289
                width: 615px;
277
                width: 100%;
290
        }
278
        }
291
       
279
       
292
        #extras .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
280
        #sidebar .blogroll li {float: left; margin: 0 20px 0 0; width: 185px;}
293
       
281
       
294
        /* Social */
-
 
295
        #extras .social {
-
 
296
                float: right;
-
 
297
                width: 175px;
-
 
298
        }
-
 
299
       
282
       
300
        #extras div[class='social'] a {
283
        .social a {
301
                background-repeat: no-repeat;
284
                background-repeat: no-repeat;
302
                background-position: 3px 6px;
285
                background-position: 3px 6px;
303
                padding-left: 25px;
-
 
304
        }
286
        }
305
       
287
       
306
                /* Icons */
288
                /* Icons */
307
                .social a[href*='delicious.com'] {background-image: url('../images/icons/delicious.png');}
289
                .social a[href*='delicious.com']:before {content: url('../images/icons/delicious.png'); margin-right: 2px; vertical-align: -3px;}
308
                .social a[href*='digg.com'] {background-image: url('../images/icons/digg.png');}
290
                .social a[href*='digg.com']:before {content: url('../images/icons/digg.png'); margin-right: 2px; vertical-align: -3px;}
309
                .social a[href*='facebook.com'] {background-image: url('../images/icons/facebook.png');}
291
                .social a[href*='facebook.com']:before {content: url('../images/icons/facebook.png'); margin-right: 2px; vertical-align: -3px;}
-
 
292
                .social a[href*='atom.xml']:before {content: url('../images/icons/rss.png'); margin-right: 2px; vertical-align: -3px;}
310
                .social a[href*='last.fm'], .social a[href*='lastfm.'] {background-image: url('../images/icons/lastfm.png');}
293
                .social a[href*='last.fm']:before, .social a[href*='lastfm.']:before {content: url('../images/icons/rss.png'); margin-right: 2px; vertical-align: -3px;}
-
 
294
                .social a[href*='jamendo.com']:before {content: url('../images/icons/jamendo.png'); margin-right: 2px; vertical-align: -3px;}
-
 
295
                .social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverflow.png'); margin-right: 2px; vertical-align: -3px;}
311
                .social a[href*='atom.xml'] {background-image: url('../images/icons/rss.png');}
296
                .social a[href*='rss.xml']:before {content: url('../images/icons/rss.png'); margin-right: 2px; vertical-align: -3px;}
312
                .social a[href*='twitter.com'] {background-image: url('../images/icons/twitter.png');}
297
                .social a[href*='twitter.com']:before {content: url('../images/icons/twitter.png'); margin-right: 2px; vertical-align: -3px;}
313
                .social a[href*='linkedin.com'] {background-image: url('../images/icons/linkedin.png');}
298
                .social a[href*='linkedin.com']:before {content: url('../images/icons/linkedin.png'); margin-right: 2px; vertical-align: -3px;}
314
299
315
/*
300
/*
316
        About
301
        About
317
*****************/
302
*****************/
318
#about {
303
#about {
Line 338... Line 323...
338
#about .bio {float: right; width: 500px;}
323
#about .bio {float: right; width: 500px;}
339
324
340
/*
325
/*
341
        Footer
326
        Footer
342
*****************/
327
*****************/
-
 
328
#footer {
343
#contentinfo {padding-bottom: 2em; text-align: right;}
329
    padding-bottom: 2em;
-
 
330
    text-align: center;
-
 
331
    clear: both;
-
 
332
    width: 80%;
-
 
333
    margin: 20px auto;
-
 
334
}
344
335
345
/***** Sections *****/
336
/***** Sections *****/
346
/* Blog */
337
/* Blog */
347
.hentry {
338
.hentry {
348
        border-bottom: 1px solid #eee;
339
        border-bottom: 1px solid #eee;