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