Skip to content

Instantly share code, notes, and snippets.

@ajwarnick
Created May 16, 2013 02:24
Show Gist options
  • Save ajwarnick/5588977 to your computer and use it in GitHub Desktop.
Save ajwarnick/5588977 to your computer and use it in GitHub Desktop.
tumblr stuff
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{Title}{block:PostTitle}: {PostTitle}{/block:PostTitle}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<link rel="shortcut icon" href="{Favicon}"></link>
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/ljcosh2/PcMlhwwei/cufon-yui.js"></script>
<script src="http://static.tumblr.com/ljcosh2/k4slia2th/walkway.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1',{ fontFamily: "walkway" });
Cufon.replace('.title',{ fontFamily: "walkway" });
Cufon.replace('.contenttype',{ fontFamily: "walkway" });
</script>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<link href='http://static.tumblr.com/ljcosh2/6D6li9gcw/reset.css' rel='stylesheet' type='text/css'>
<style type="text/css">
/* GENERAL */
body{background-color: #fbfbfb; color: #151515; font-family: 'Droid Serif', serif; -webkit-font-smoothing: subpixel-antialiased;}
a, a:active, a:visited { color: #151515; text-decoration: none; } a:hover { color: #f50000; text-decoration: none; }
#container {width: 800px; margin: 0 auto; position: relative; padding-top: 80px;}
/* HEADER */
h1 {font-size: 3em; font-family: 'Verdana', sans-serif;} h1 a:hover {background-color: #f50000; padding-bottom: 10px;} h1 a:active, h1 a:visited { color: #151515; text-decoration: none; }
header {height: 54px; text-align: center; width: 100%; z-index:3; border-bottom: 3px solid #f50000; background-color: #fbfbfb;}
/* LEFT MENU */
#left {background: url('http://static.tumblr.com/ljcosh2/S4ali9i6t/left-bg.png') no-repeat left top; width: 150px; height:600px; float: left; position: fixed; }
#left ul, #left li {padding:2px 0px 12px 25px; list-style:none; font-weight: bold;}
/* MAIN CONTENT */
main {float: left; width: 500px;}
/* SEARCH */
#searchbox {display: none; margin-left: 150px;}
input, textarea {text-align: center;height: 20px;border: none;border-bottom: dotted 1px #f50000;outline: 0;width: 400px;margin-bottom: 5px;}
input:hover, textarea:hover,input:focus, textarea:focus {border-color: #C9C9C9;}
/* RIGHT MENU */
#right {background: #ffffff; margin-left:650px; width: 100px; position: absolute;}
/* POST */
article {margin-left: 150px; width: 500px; float: left; border-bottom: 1px dashed #f50000; padding-bottom: 10px; margin-bottom: 30px; z-index:1;}
content {padding: 50px 10px 0px 10px; margin-bottom: 15px; width: 500px;}
/* ARTICLE HEADER */
#articleheader {width: 500px; height: 50px;}
article .dateblock, article .dateblock a:hover {color: #151515; height: 28px; width: 39px; background-image: url('http://static.tumblr.com/ljcosh2/10uli9pr7/dateblock-bg.png'); font-size: 0.8em; font-weight: bold; font-style: italic; text-align: center; padding-top: 3px; float: left;}
article .contenttype {margin-left: 10px; float: right; text-transform:uppercase; color: #f50000; font-size: 1.5em;}
article .contenttype a {color: #f50000;}
article .contenttype a:hover {background-color: #151515;}
article .title {float: left; margin-left: 10px; width: 350px; font-size: 1.5em;}
article .title a:hover {background-color: #f50000;}
/* ARTICLE INFORMATION */
article .information {height: 20px; width: 500px; font-size: 0.9em; font-style: italic;}
article .tagging {float: left;}
article .tagging a {color: #f50000;}
article .tagging a:hover {color: #f50000;text-decoration: underline; }
article .note {height: 12px; float: right; display: inline; background: #fbfbfb url('http://static.tumblr.com/ljcosh2/8Xuli9ykx/note.png') no-repeat right bottom; padding: 0px 14px 2px 4px; margin-left: 10px;}
iframe {max-width:500px; z-index: 2;}
/* POST - TEXT */
article .text p {margin-top: 10px;}
article .text a {color: #f50000; font-style: italic;}
article .text blockquote{border-left: 3px solid #f50000; padding-left: 10px; font-style:italic; margin-top:10px;}
article .text ul, ol, dl {line-height: inherit; margin:5px 0 5px 20px;}
ul{list-style-type: circle;}
ol{list-style-type: upper-roman;}
/* POST - CHAT */
.chat li {border-left: 3px solid # f50000; padding-left: 5px; list-style-type: none; margin-top: 10px;}
content .chat em {font-weight: bold;}
/* POST - PHOTO(SET) */
figure {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
figure img {}
figcaption {margin-bottom: 10px; padding-left: 10px;}
.highres {500px; text-align: center;}
/* POST - QUOTE */
#quote {margin-bottom: 10px;}
#quote blockquote {border-left: 3px solid #f50000; border-bottom: 1px solid #f50000; padding: 10px 0px 10px 10px; font-style:italic; margin-top:10px; font-size: 1.4em; text-align: center;}
#quote p {margin-top: 10px; font-weight: bold;}
/* POST - LINK */
#link {margin-bottom: 10px;}
#link a {text-style: underline; padding: 10px 0px 10px 10px; font-style:italic; margin-top:10px; font-size: 1.4em; text-align: center;}
#link p {margin-top: 10px; font-weight: bold;}
/* POST - AUDIO */
audio {margin-bottom: 10px;}
audio img {max-widht:500px;}
audio p {margin-top: 10px;
#audioplayer {height: 30px; width: 400px;}
</style>
</head>
<body class="clearfix">
<header>
<h1><font color="#F80000">-</font> <a href="/"> {Title} </a>{block:PostTitle}| {PostTitle}{/block:PostTitle}{block:DayPage} on the {DayOfMonth}{DayOfMonthSuffix} of {Month} {Year}{/block:DayPage} <font color="#F80000">-</font></h1>
</header>
<div id="container">
<div id="left">
<ul>
<li><a href="/archive">Archive</a></li>
<li><a href="/random">Random</a></li>
<li><a href="{rss}">RSS</a></li>
<li><a href="#" id="search">Search</a></li>
</ul>
<script>
$('#search').click(function() {
$('#searchbox').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
</div>
<div id="main">
<form id="searchbox">
<input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
</form>
{block:Posts}
{block:Text}<article><!-- TEXT ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="title"><a href="{Permalink}">{Title}</a></div><div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<content class="text">
{Body}
</content>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Text}
{block:Photo}<article><!-- PHOTO ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<figure>
{LinkOpenTag}<img src="{PhotoURL-500}" width="500px" alt="{PhotoAlt}" />{LinkCloseTag}
{block:HighRes}<a href="{PhotoURL-HighRes}" class="highres">Click here for a high-resolution version of this photo...</a>{/block:HighRes}
<figcaption>{block:Caption}{Caption}{/block:Caption}</figcaption>
</figure>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a></div>
</div>
</article>
{/block:Photo}
{block:Photoset}<article><!-- PHOTOSET ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<figure>
{Photoset-500}
<figcaption>{block:Caption}{Caption}{/block:Caption}</figcaption>
</figure>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a></div>
</div>
</article>
{/block:Photoset}
{block:Quote}<article><!-- QUOTE ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<div id="quote">
<blockquote>{Quote}</blockquote>
<p>{block:Source} &#8212; {Source}{/block:Source}</p>
</div>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Quote}
{block:Link}<article><!-- LINK ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<div id="link">
<a href="{URL}" {Target} >{Name}</a>
{block:Description}<p>{Description}</p>{/block:Description}
</div>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Link}
{block:Chat}<article><!-- CHAT ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="title"><a href="{Permalink}">{Title}</a></div><div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
<content class="chat">
<ul class="chat">
{block:Lines}
<li>{block:Label}<em>{Label}</em>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
</content>
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Chat}
{block:Audio}<article><!-- AUDIO ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="title"><a href="{Permalink}">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{block:TrackName} - {/block:TrackName}{/block:Artist}{block:Artist}{Artist}{/block:Artist}</a></div><div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
{block:AlbumArt}<img src="{AlbumArtURL}" alt="albumart" />{/block:AlbumArt}
<div id="audioplayer">
{AudioPlayerGrey}
</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
{block:ExternalAudio}<a href="{ExternalAudioURL}" alt="">External audio</a> {/block:ExternalAudio}
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Audio}
{block:Video}<article><!-- Video ------------------------------------------------------------------------------>
<div id="articleheader">
{block:Date}<a href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonth}/"><div class="dateblock">
{DayOfMonth}{DayOfMonthSuffix} <br />
{ShortMonth}
</div></a>{/block:Date}
<div class="title"><a href="{Permalink}">{block:TrackName}{TrackName}{/block:TrackName}{block:Artist}{block:TrackName} - {/block:TrackName}{/block:Artist}{block:Artist}{Artist}{/block:Artist}</a></div><div class="contenttype"><a href="{Permalink}">{PostType}</a></div><br />
</div>
{block:AlbumArt}<img src="{AlbumArtURL}" alt="albumart" />{/block:AlbumArt}
<div id="video">
{Video-500}
</div>
{block:Caption}<p>{Caption}</p>{/block:Caption}
{block:ExternalAudio}<a href="{ExternalAudioURL}" alt="">External audio</a> {/block:ExternalAudio}
<div class="information">
{block:HasTags}{block:Tags}<div class="tagging"><a href="{TagURL}">|{Tag}&nbsp;&nbsp;</a></div>{/block:Tags}{/block:HasTags}
<div class="note"><a href="#">{NoteCountWithLabel}</a> </div>
</div>
</article>
{/block:Audio}
</div>
{/block:Posts}
<footer>
{block:PreviousPage}
<a href="{PreviousPage}">&#171; Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next &#187;</a>
{/block:NextPage}
</footer>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment