Skip to content

Instantly share code, notes, and snippets.

@blat

blat/Tumblr.html

Created April 7, 2010 19:55
Show Gist options
  • Save blat/359354 to your computer and use it in GitHub Desktop.
Save blat/359354 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Tumblr.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>{Title}{block:SearchPage} &ndash; {SearchQuery}{/block:SearchPage}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="text:Disqus Shortname" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
* { margin: 0; padding: 0; border: none; }
li { list-style-type: square; margin-left: 20px; }
body {
background: #161616;
color: #eee;
font-family: 'Lucida Grande','Lucida Sans Unicode',Verdana,sans-serif;
font-size: 86%;
}
#header {
width: 30%;
float: left;
padding-top: 20px;
}
#header h1 {
margin-left: 20px;
display: inline;
}
#header h1 a {
font-family: "Trebuchet MS",Verdana,Sans-Serif;
font-size: 2.3em;
color: #fff;
text-decoration: none;
}
#header .meta {
margin-right: 20px;
float: right;
}
#header .meta li {
display: inline;
padding: 5px;
margin: 0;
}
#header .meta li a {
display: inline-block;
padding-top: 5px;
}
#wrapper {
border-top: 45px solid #161616;
min-height: 200px;
}
.post {
vertical-align: top;
}
.post div {
width: 420px;
text-align: justify;
}
.post p {
margin: 1em 0;
}
#footer {
position: fixed;
clear: both;
color: #ccc;
font-size: 10px;
padding: 5px;
padding-top: 20px;
text-align: right;
}
#footer a {
color: #ccc;
}
/* Date */
.post .date {
color: #CCCCCC;
font-family: Helvetica,sans-serif;
font-size: 34px;
margin-top: -42px;
position: absolute;
text-transform: uppercase;
}
.post .date .date_brick {
background-color: #FFC61F;
color: #161616;
float: left;
font-family: Verdana,Sans-Serif;
font-size: 12px;
font-weight: bold;
height: 30px;
line-height: 12px;
margin-right: 10px;
overflow: hidden;
padding-top: 5px;
text-align: center;
width: 45px;
}
/*
.post .date_marker {
width: 1px;
background: #FFC61F;
z-index: 10000;
position: absolute;
height: 95%;
top:0;
margin-top: 5px;
}
**/
/* Permalink */
.post img.permalink {
background-color: #000000;
display: none;
height: 13px;
margin-left: 420px;
position: absolute;
width: 14px;
z-index: 10;
}
.post:hover img.permalink {
display:inline;
}
/* Quote */
.post .quote {
border-left: 20px solid #ED008C;
}
.post .quote h2 {
display: inline;
background: #ED008C;
padding: 0 10px;
-moz-border-radius: 0 4px 4px 0;
letter-spacing: 0.2pt;
text-transform: uppercase;
}
.post .quote h2 a {
padding: 0;
}
.post .quote .body {
background-image: url(http://static.tumblr.com/rensj7n/kMEkj5id3/quote.png);
background-position: 10px 0;
background-repeat: no-repeat;
padding-left: 56px;
margin-top: 10px;
width: 354px;
font-style: italic;
}
/* Photo */
.post .photo {
border-left: 20px solid #6CC071;
}
.post .photo .caption a {
color: #6CC071;
}
.post .photo .caption a:hover {
color: #000;
background: #6CC071;
}
/* Video */
.post .video {
border-left: 20px solid #A957C8;
}
.post .video .caption a {
color: #A957C8;
}
.post .video .caption a:hover {
color: #000;
background: #A957C8;
}
/* Link */
.post .link {
border-left: 20px solid #00AEF0;
}
.post .link h2 a {
background: #00AEF0;
}
.post .body a {
color: #00AEF0;
}
.post .body a:hover {
color: #000;
background: #00AEF0;
}
/* Chat */
.post .chat {
border-left: 20px solid #FF5954;
}
.post .chat h2 a {
background: #FF5954;
}
.post .chat .label {
color: #FF5954;
font-weight: bold;
}
.post .chat ul {
padding: 0 10px;
width: 400px;
}
.post .chat ul li {
list-style: none;
margin: 0;
}
/* Audio */
.post .audio {
border-left: 20px solid #F5EE4F;
}
.post .audio .player {
padding-top: 2px;
}
.post .audio .player .audio_player {
display: inline;
background: #F5EE4F;
padding: 15px 5px 0;
}
.post .audio .meta {
background: #F5EE4F;
-moz-border-radius: 0 4px 4px 0;
vertical-align: top;
font-size: 8px;
margin-left: -5px;
padding: 2px 10px 19px 5px;
color: #363636;
}
.post .audio .body a {
color: #F5EE4F;
}
.post .audio .body a:hover {
color: #000;
background: #F5EE4F;
}
.post .audio .album_art {
padding: 10px;
float: left;
width: 100px;
}
.post .audio .album_art img {
width: 100px;
}
/* Text */
.post .text {
border-left: 20px solid #32BEBC;
}
.post .text h2 a {
background: #32BEBC;
}
.post .body a {
color: #32BEBC;
}
.post .body a:hover {
color: #000;
background: #32BEBC;
}
/* Post */
.post h2 a {
padding: 0 10px;
-moz-border-radius: 0 4px 4px 0;
color: #eee;
font-size: 1em;
letter-spacing: 0.2pt;
text-transform: uppercase;
}
.post .body {
padding: 0 10px 0 10px;
width: 400px;
}
.post a {
text-decoration: none;
}
.post .caption,
.post .media {
padding: 0 10px;
width: 400px;
}
/* Comments */
#disqus_thread {
clear: both;
margin-left: 30px;
}
/* Info */
.post .info {
background: #363636;
float: right;
margin-right:10px;
padding: 5px;
width: 390px;
-moz-border-radius: 4px;
color: #ccc;
font-size: 10px;
margin-bottom: 10px;
}
.post .info .tags, .post .info .tags li {
display: inline;
margin: 0;
}
.post .info a {
color: #ccc;
text-decoration: underline;
}
/* Pagination */
#next-page, #prev-page {
vertical-align: top;
}
#prev-page {
padding-right: 30px;
}
#next-page a, #prev-page a {
font-size: 30px;
padding: 0 10px;
text-decoration: none;
color: #eee;
margin-top: -45px;
position: absolute;
}
{CustomCSS}
</style>
</head>
<body>
<div id="header">
<h1><a href="/">{Title}</a></h1>
<ul class="meta">
{block:Following}
{block:Followed}<li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" /></a></li>{/block:Followed}
{/block:Following}
<li><a href="{Rss}"><img src="http://www.blizzart.net/img/rss.png" /></a></li>
</ul>
</div>
<table id="wrapper"><tr>
{block:PreviousPage}
<td id="prev-page">
<a href="{PreviousPage}" title="Previous page">&larr;</a> &nbsp;&nbsp;
</td>
{/block:PreviousPage}
{block:Posts}
<td class="post">
{block:NewDayDate}
<div class="date_marker"></div>
<div class="date">
<div class="date_brick">
{ShortMonth}<br/>
{DayOfMonth}{DayOfMonthSuffix}
</div>
{ShortDayOfWeek}
</div>
{/block:NewDayDate}
<a href="{Permalink}"><img src="/themes/5/permalink.gif" class="permalink" alt="permalink"/></a>
{block:Text}
<div class="text">
{block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<div class="body">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="photo">
<div class="media">{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
{block:Source}<h2 class="title">{Source}</h2>{/block:Source}
<div class="body"><p class="{Length}">{Quote}</span></p>
</div>
{/block:Quote}
{block:Link}
<div class="link">
<h2 class="title"><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div class="body">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="chat">
{block:Title}
<h2 class="title"><a href="{Permalink}">{Title}</a></h2>
{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}"><p>
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</p></li>
{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Audio}
<div class="audio">
<div class="player">
{AudioPlayerBlack}
<span class="meta">{PlayCountWithLabel}{block:ExternalAudio} &bull; <a href="{ExternalAudioURL}">download</a>{/block:ExternalAudio}</span>
</div>
{block:AlbumArt}
<div class="album_art">
<img src="{AlbumArtURL}" alt="{block:Artist}{Artist}{/block:Artist}{block:TrackName} - {TrackName}{/block:TrackName}" style="margin-bottom: 10px" />
</div>
{/block:AlbumArt}
{block:Caption}
<div class="body">{Caption}</div>
{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="video">
<div class="media">{Video-400}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Video}
<div class="info">
{block:Reblog} &rsaquo; {ReblogParentName} {block:RebloggedFromReblog} &rsaquo; {ReblogRootName}{block:RebloggedFromReblog} &ndash;{/block:Reblog}
{block:FromBookmarklet}&rsaquo; bookmarklet &ndash;{/block:FromBookmarklet}
{block:FromMobile}&rsaquo; mobile &ndash;{/block:FromMobile}
{block:NoteCount}
<span class="notes">{NoteCountWithLabel}</span>
&ndash;
{/block:NoteCount}
{block:HasTags}
Tags :
<ul class="tags">
{block:Tags}<li><a href="{TagURL}">{Tag}</a></li>{/block:Tags}
</ul>
&ndash;
{/block:HasTags}
{block:IfDisqusShortname}
<span class="comments"><a href="{Permalink}#disqus_thread">Commentaires</a></span>
{/block:IfDisqusShortname}
</div>
{block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus_thread"></div>
<script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script>
<noscript><a href="http://{text:Disqus Shortname}.disqus.com/?url=ref">View the discussion thread.</a></noscript>
{/block:Permalink}
{/block:IfDisqusShortname}
</td>
{/block:Posts}
{block:NextPage}
<td id="next-page">
<a href="{NextPage}" title="Next page">&rarr;</a>
</td>
{/block:NextPage}
</tr></table>
<div id="footer">
Powered by <a href="http://www.tumblr.com">Tumblr</a>
</div>
{block:IfDisqusShortname}
<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 charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment