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; |