Just testing out gistup and related tutorial for streamlined gist/block generation.
For additional tips on generating block thumbnails, see this block and this HOWTO.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="style.css"> | |
| <body> | |
| <h1>Hello, world!</h1> |
| @import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:200,400,600); | |
| html { | |
| min-width: 1040px; | |
| } | |
| body { | |
| font-family: "Source Code Pro", sans-serif; | |
| margin: 1em auto 4em auto; | |
| position: relative; | |
| width: 960px; | |
| color: #555; | |
| background: whiteSmoke; | |
| } | |
| h1 { | |
| font-size: 100px; | |
| font-weight: 200; | |
| letter-spacing: -10px; | |
| margin: .8em 0 .1em 0; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| h2 { | |
| font-size: 100%; | |
| margin-top: 2em; | |
| } | |
| h1, h2 { | |
| text-rendering: optimizeLegibility; | |
| } | |
| h2 a { | |
| color: #ccc; | |
| left: -20px; | |
| position: absolute; | |
| width: 740px; | |
| } | |
| h3, h4, h5 { | |
| font-size: 100%; | |
| font-weight: 400; | |
| margin-top: .8em; | |
| } | |
| h3, h4 { | |
| text-transform: uppercase; | |
| } | |
| h4 { | |
| color: #AAA; | |
| } |