Pastie now auto-senses if line-wrap is a bad or good idea. Feedback?
## mark a section (Learn more)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{Title}{block:PostSummary} • {PostSummary}{/block:PostSummary}</title> <meta name="author" content="Matthew Buchanan" /> <meta name="color:Accent" content="#ee3322" /> <link rel="icon" href="{Favicon}" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss" /> <style type="text/css" media="screen"> /* Vertigo Theme by Matthew Buchanan v1.00 Released under Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License http://creativecommons.org/licenses/by-nc-sa/3.0/ */ html { background-color: transparent; } html, body { height: 100%; } body { font: normal 62.5%/1 "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #000; color: #ddd; } #page { position: relative; width: 960px; min-height: 100%; margin: 0 auto; } #header { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/header-bg.png") no-repeat 50% 0; padding-top: 110px; margin-bottom: 60px; } #header h1 { font-size: 250%; color: #fff; text-align: center; text-transform: uppercase; } #header h2 { width: 500px; margin: 0 auto; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/header-h2-bg.png") no-repeat 50% 100%; padding: 15px 0 60px 120px; font-size: 130%; text-align: center; color: #fff; } .pagetype { font-size: 130%; color: #666; text-transform: lowercase; margin: -10px 0 30px; padding: 0 0 20px 415px; } .pagetype span { border: 1px solid #222; padding: 0.66em 1em; } .pagetype strong { font-weight: normal; text-transform: uppercase; } .pagetype a:link, .pagetype a:visited { color: #fff; } .pagetype a:hover, .pagetype a:active { color: {color:Accent}; } /* Posts */ .post { margin-bottom: 60px; font-size: 130%; } .post .container { position: relative; } .video { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/video-bg.png") repeat-y 250px 100%; margin-bottom: 40px; } .video .container { position: relative; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/video-projector.png") no-repeat 250px 100%; padding: 0 285px 165px 275px; } .video .embed { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/video-top.png") no-repeat 0 0; padding: 50px 0 0 35px; margin: 0 -35px 1em -35px; } .video .projector { position: absolute; width: 80px; height: 100px; left: 805px; bottom: 54px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/video-projector-anim.gif") no-repeat 0 0; } .video .meta { top: 50px; } .audio .container { position: relative; padding: 10px 260px 0 240px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/audio-cite-bg.png") no-repeat 200px 100%; } .audio .embed { width: 300px; height: 220px; padding: 30px 0 0 100px; margin-bottom: 10px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/audio-bg.png") no-repeat 0 0; } .audio .cassette { position: absolute; width: 270px; height: 120px; left: 281px; top: 81px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/audio-cassette-anim.gif") no-repeat 0 0; } .audio .content { padding-left: 20px; } .audio .plays { margin-bottom: 1em; color: #777; } .audio .plays a:link, .audio .plays a:visited { color: #777; text-decoration: none; border-bottom: 1px dotted #aaa; } .audio .plays a:hover, .audio .plays a:active { color: #444; border-bottom: 1px dotted #555; } .audio .plays + p { text-indent: 0; } .audio .plays + p + p { text-indent: 2.5em; } .audio .meta { top: 35px; } .quote { margin-top: -20px; } .quote .container { padding: 30px 260px 0 240px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/quote-bg.png") no-repeat 710px 0; } .quote .quotetext { padding: 0; color: #fff; } .quote .quotetext p + p { text-indent: 2em; } .quote .long { font-size: 140%; line-height: 135%; } .quote .medium { font-size: 185%; line-height: 120%; } .quote .short { font-size: 230%; line-height: 120%; } .quote .content { width: 430px; min-height: 80px; margin-top: 10px; padding: 50px 20px 0 20px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/quote-cite-bg.png") no-repeat 0 0; } .quote .hand { float: left; width: 150px; height: 80px; } .quote .meta { top: 30px; } .long .meta { top: 28px; } .short .meta { top: 34px; } .link .container { padding: 0 0 0 240px; } .link .link-wrap { position: relative; width: 590px; min-height: 90px; } .link .hand { position: absolute; top: 0; right: 0; width: 165px; height: 90px; background: {color:Accent} url("http://theme.matthewbuchanan.name/themes/vertigo/img/link-hand.png") no-repeat 100% 0; } .link h2 { font-size: 200%; margin-right: 165px; background: {color:Accent} url("http://theme.matthewbuchanan.name/themes/vertigo/img/link-top.png") no-repeat 0 0; } .link h2 span { display: block; padding: 35px 0 20px 20px; background: transparent url("http://theme.matthewbuchanan.name/themes/vertigo/img/link-bot.png") no-repeat 0 100%; } .link h2 a:link, .link h2 a:visited { color: #fff; } .link h2 a:hover, .link h2 a:active { text-decoration: none; border-bottom: 1px dotted #fff; } .link .content { padding: 0 260px 0 20px; margin-top: 10px; } .link .meta { top: 35px; } .chat .container { padding: 0 240px 0 210px; } .chat h2 { font-size: 190%; color: #fff; margin-bottom: 15px; padding: 2px 0 0 30px; } .chat .transcript li { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/chat-bg.png") repeat-y 0 0; margin-bottom: 5px; padding: 5px 40px 5px 50px; color: #fff; font-size: 115%; line-height: 1.3; } .chat .transcript li.even { background-position: 0 100%; } .chat .label { font-weight: normal; text-transform: lowercase; color: #888; } .photo .container { padding: 20px 270px 0 240px; } .photo .photo-wrap { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/photo-bg.png") no-repeat 0 0; padding: 25px 20px 0; } .photo .photo-wrap img { display: block; border: 3px solid #000; margin: 0 auto; } .photo .photo-wrap img:hover { border: 3px solid {color:Accent}; } .photo .photo-wrap .frame { height: 30px; margin-left: -20px; margin-right: -20px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/photo-bg.png") no-repeat 0 100%; } .photo .content { padding-left: 20px; margin-top: 10px; } .photo .meta { top: 45px; } .text .container { padding: 35px 270px 0 260px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/text-bg.png") no-repeat 600px 0; } .text h2.title { font-size: 185%; text-transform: uppercase; margin: 5px 0 15px; } .text h2.title a:link, .text h2.title a:visited { color: #fff; } .text h2.title a:hover, .text h2.title a:active { color: {color:Accent}; text-decoration: none; } .text .meta { top: 35px; } /* Content */ .content { line-height: 154%; color: #bbb; } .content h1, .content h2 { font-size: 131%; color: #fff; margin-bottom: 0.5em; } .content h3, .content h4 { font-size: 115%; color: #fff; margin: 0.75em 0 0.25em; } .content h5, .content h6 { color: #fff; text-transform: uppercase; margin: 0.75em 0 0.25em; } .content p + p { text-indent: 2.5em; } .content blockquote { font-style: italic; margin: 1em 0; padding-left: 2.5em; } .content ul, .content ol { margin: 0.75em 0; padding-left: 2.5em; } .content ul li { list-style: disc; } .content ol li { list-style-type: decimal; } .content pre { margin: 1em 0; padding: 5px 10px; background-color: #222; color: #fff; overflow: auto; width: 410px; } .content code { padding: 1px 2px; font: normal 108%/1.57 "Lucida Console", Consolas, monospace; background-color: #222; color: #fff; } .content abbr, .content acronym { border-bottom: 1px dotted #bbb; cursor: help; } /* Metadata */ .meta { position: absolute; top: 0; left: 0; width: 220px; } .meta .permalink { position: absolute; top: 0; right: 0; width: 30px; height: 30px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/permalink.png") no-repeat 0 0; overflow: hidden; } .meta .permalink a { display: block; width: 30px; height: 0; padding-top: 30px; overflow: hidden; } .meta .data { text-align: right; margin-right: 40px; background-color: #000; } .meta .data p, .meta .tags { margin: 0.7em 0; } .meta .data p em { color: #666; font-style: normal; padding-bottom: 0.25em; border-bottom: 1px solid #333; } .meta .tags li { padding-bottom: 0.5em; } /* Content */ strong, b, strong em, strong i { font-weight: bold; } em, i, em strong, em b { font-style: italic; } /* Footer */ #footer { background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/footer-bg.png") no-repeat 50% 0; padding: 60px 0; } #footer #tumblr-logo, #footer #controls { position: absolute; bottom: 0; width: 100px; height: 30px; } #footer #tumblr-logo { left: 220px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/tumblr-logo.png") no-repeat 0 0; } #footer #controls { left: 640px; background: {color:Accent} url("http://theme.matthewbuchanan.name/themes/vertigo/img/footer-controls.png") no-repeat 0 0; } #footer #controls li, #footer #controls li a { display: block; float: left; width: 30px; height: 30px; } #footer #controls .random, #footer #controls .random a { width: 40px; } #footer #tumblr-logo, #footer #controls li a { text-indent: -999em; overflow: hidden; } #footer .older, #footer .newer { width: 180px; height: 40px; float: left; margin-left: 285px; background: url("http://theme.matthewbuchanan.name/themes/vertigo/img/nav-older-bg.png") no-repeat 0 0; } #footer .newer { margin-left: 20px; background-image: url("http://theme.matthewbuchanan.name/themes/vertigo/img/nav-newer-bg.png"); } #footer .older a, #footer .newer a { display: block; height: 40px; text-indent: -999em; overflow: hidden; background: {color:Accent} url("http://theme.matthewbuchanan.name/themes/vertigo/img/nav-older.png") no-repeat 0 0; } #footer .newer a { background-image: url("http://theme.matthewbuchanan.name/themes/vertigo/img/nav-newer.png"); } #footer .older a:hover, #footer .newer a:hover { background-position: 0 -40px; } #footer .credits, #footer .pages { clear: both; text-align: center; font-size: 130%; line-height: 130%; padding-top: 1em; color: #666; } #footer .pages { color: #333; } #footer .credits a:link, #footer .credits a:visited { color: #999; } #footer .credits a:hover, #footer .credits a:active { color: {color:Accent}; /* Links */ a:link, a:visited { color: {color:Accent}; text-decoration: none; } a:hover, a:active { text-decoration: underline; } .data a:link, .data a:visited { color: #666; } .data a:hover, .data a:active { color: {color:Accent}; text-decoration: none; } /* sIFR */ .sIFR-flash { visibility: visible !important; margin: 0; } .sIFR-replaced { visibility: visible !important; } span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } .sIFR-flash + div[adblocktab=true] { display: none !important; } .sIFR-hasFlash #header h1 { visibility: hidden; line-height: 1; } .sIFR-hasFlash .text h2.title { visibility: hidden; letter-spacing: 2px; line-height: 1; } </style> <style type="text/css" media="print"> /* sIFR */ .sIFR-flash, .sIFR-flash object, .sIFR-flash embed { display: none !important; height: 0; width: 0; position: absolute; overflow: hidden; } span.sIFR-alternate { visibility: visible !important; display: block !important; position: static !important; left: auto !important; top: auto !important; } </style> <!--[if lt IE 7]> <style type="text/css" media="screen"> body, #header { text-align: center; } #page { text-align: left; } .link .link-wrap { height: 90px; } .content p { text-indent: 2.5em; } .content pre { width: 430px; overflow-x: auto; overflow-y: visible; } .content code { font-size: 91%; } .meta { left: -240px; } .video .meta { left: -275px; } .text .meta { left: -260px; } .audio .embed { width: 400px; height: 250px; } .audio .cassette { left: 41px; } #footer .older, #footer .newer { display: inline; } </style> <![endif]--> <!--[if IE 7]> <style type="text/css" media="screen"> .content pre { overflow-x: scroll; overflow-y: visible; } .content code { font-size: 91%; } </style> <![endif]--> <script type="text/javascript" src="http://theme.matthewbuchanan.name/themes/sifr/sifr.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> // <![CDATA[ var obj = null; function fadeObject() { if (obj) obj.find(".data2").fadeOut("slow"); } $(document).ready(function() { $(".meta").hover(function() { if (obj) { obj.find(".data2").fadeOut("slow"); obj = null; } $(this).find(".data").fadeIn("fast"); }, function() { obj = $(this); setTimeout("fadeObject()",1000); }); $(".video").hover(function() { $(this).find(".projector").removeClass("hidden"); }, function() { $(this).find(".projector").addClass("hidden"); }); $(".audio").hover(function() { $(this).find(".cassette").removeClass("hidden"); }, function() { $(this).find(".cassette").addClass("hidden"); }); }); // ]]> </script> <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAnElEQVRIx2Pk4goL6+n5/59hgACjk9OaNW/fku6AEydWrZo/n4HBwiIsLDGRfAewJCWZmXFwEK9h3rxTp378wBQn1Ry4A8TFv379+5ewwpcvubmZmQmrI9Y8uANcXbW1BQVxK9i9++rV9+9J9xkhc2GAiXSjqQtGHTDqgFEHsJCbzwkBYs1lIbaEIxaQah4LrrKdVECuOYwDXR0DAENXQzZK18t+AAAAAElFTkSuQmCC" rel="icon" type="image/x-icon" /> </head> <body> <div id="page"> <div id="header"> <h1><a href="/">{Title}</a></h1> {block:Description}<h2>{Description}</h2>{/block:Description} </div> <div id="main"> {block:TagPage} <div class="pagetype"> <p><span>Posts tagged with <strong><a href="{TagURL}">{Tag}</a></strong></span></p> </div> {/block:TagPage} {block:DayPage} <div class="pagetype"> <p><span>Posts for <strong>{DayOfWeek}, {DayOfMonth} {Month} {Year}</strong></span></p> </div> {/block:DayPage} {block:Posts} {block:PermalinkPage} <div class="pagetype"> <p><span>Posted on <strong><a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}/">{DayOfWeek}, {DayOfMonth} {Month} {Year}</a></strong></span></p> </div> {/block:PermalinkPage} {block:Video} <div class="post video"> <div class="container"> <div class="embed"> {Video-400} </div> <div class="projector hidden"></div> {block:Caption} <div class="content"> {Caption} </div> {/block:Caption} {/block:Video} {block:Quote} <div class="post quote {Length}"> <div class="container"> <blockquote class="quotetext {Length}"> {Quote} </blockquote> {block:Source} <div class="content"> <div class="hand"></div> {Source} </div> {/block:Source} {/block:Quote} {block:Audio} <div class="post audio"> <div class="container"> <div class="embed"> {AudioPlayerBlack} </div> <div class="cassette hidden"></div> {block:Caption} <div class="content"> <p class="plays">{FormattedPlayCount} Plays{block:ExternalAudio} • <a href="{ExternalAudioURL}">Download</a>{/block:ExternalAudio}</p> {Caption} </div> {/block:Caption} {/block:Audio} {block:Link} <div class="post link"> <div class="container"> <div class="link-wrap"> <div class="hand"></div> <h2><span><a href="{URL}" {Target}>{Name}</a></span></h2> </div> {block:Description} <div class="content"> {Description} </div> {block:Description} {/block:Link} {block:Chat} <div class="post chat"> <div class="container"> {block:Title} <h2>{Title}</h2> {/block:Title} <ul class="transcript"> {block:Lines} <li class="{Alt}"> {block:Label}<strong class="label">{Label}</strong>{/block:Label} {Line} </li> {/block:Lines} </ul> {/block:Chat} {block:Photo} <div class="post photo"> <div class="container"> <div class="photo-wrap"> {LinkOpenTag}<img src="{PhotoURL-400}" border="0" alt="{PhotoAlt}" />{LinkCloseTag} <div class="frame"></div> </div> {block:Caption} <div class="content"> {Caption} </div> {/block:Caption} {/block:Photo} {block:Text} <div class="post text"> <div class="container"> {block:Title} <h2 class="title"><a href="{Permalink}">{Title}</a></h2> {/block:Title} <div class="content"> {Body} </div> {/block:Text} <div class="meta" id="meta{PostID}"> <p class="permalink"><a href="{Permalink}">*</a></p> <div class="data hidden"> <p><em><a href="{Permalink}">{TimeAgo}</a></em></p> {block:RebloggedFrom} <p><em>REBLOG<a href="{ReblogParentURL}">{ReblogParentName}</a></em></p> {/block:RebloggedFrom} <div style="font-size: 12px; text-align: right;"><a href="{Permalink}#disqus_thread">Comments (View)</a></div> </div> </div> </div> </div> {/block:Posts} </div> <div id="footer"> <a href="http://www.tumblr.com" title="Powered by Tumblr" id="tumblr-logo">Tumblr</a> {block:Permalink} <script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script> <div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/insomniatic/embed.js"></script> <a href="http://disqus.com" class="dsq-brlink">Powered by<span class="logo-disqus">Disqus</span></a> {/block:Permalink} <script type="text/javascript"> //<[CDATA[ (function() { var links = document.getElementsByTagName('a'); var query = '?'; for(var i = 0; i < links.length; i++) { if(links[i].href.indexOf('#disqus_thread') >= 0) { query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&'; } } document.write('<script type="text/javascript" src="http://disqus.com/forums/insomniatic/get_num_replies.js' + query + '"></' + 'script>'); })(); //]]> </script> <ul id="controls"> <li class="feed"><a href="/rss" title="RSS Feed">RSS Feed</a></li> <li class="random"><a href="/random" title="Random Post">Random Post</a></li> <li class="archive"><a href="/archive" title="Archive">Archive</a></li> </ul> {block:Pagination} <div class="older">{block:NextPage}<a href="{NextPage}">Older</a>{/block:NextPage}</div> <div class="newer">{block:PreviousPage}<a href="{PreviousPage}">Newer</a>{/block:PreviousPage}</div> {/block:Pagination} {block:PermalinkPagination} <div class="older">{block:PreviousPost}<a href="{PreviousPost}">Older</a>{/block:PreviousPost}</div> <div class="newer">{block:NextPost}<a href="{NextPost}">Newer</a>{/block:NextPost}</div> {/block:PermalinkPagination} {block:DayPagination} <div class="older">{block:PreviousDayPage}<a href="{PreviousDayPage}">Older</a>{/block:PreviousDayPage}</div> <div class="newer">{block:NextDayPage}<a href="{NextDayPage}">Newer</a>{/block:NextDayPage}</div> {/block:DayPagination} <p class="credits">inspired by the work of <a href="http://saulbass.tv">SAUL BASS</a>, ART GOODMAN and DAVE NAGATA.<br />hitchcock typeface by <a href="http://typographica.org/001110.php">MATT TERICH</a>. tumblr theme by <a href="http://matthewbuchanan.name">MATTHEW BUCHANAN</a>. </p> {block:Pagination} <p class="pages">Page {CurrentPage} of {TotalPages}</p> {/block:Pagination} </div> </div> <!-- sIFR --> <script type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){ sIFR.replaceElement("#header h1", "http://theme.matthewbuchanan.name/themes/sifr/hitchcock.swf", named({sColor : "{color:Accent}", sBgColor : "#000000", sCase : "upper", sHoverColor : "#ffffff", sFlashVars : "textalign=center"})); sIFR.replaceElement(".text h2.title", "http://theme.matthewbuchanan.name/themes/sifr/hitchcock.swf", named({sColor : "#ffffff", sBgColor : "#000000", sCase : "upper", sHoverColor : "{color:Accent}"})); }; //]]> </script> </body> </html>
This paste will be private.
From the Design Piracy series on my blog: