Skip to content

Instantly share code, notes, and snippets.

@euclio
Last active August 29, 2015 14:03
Show Gist options
  • Save euclio/c5028c8f7015e8b2c2a1 to your computer and use it in GitHub Desktop.
Save euclio/c5028c8f7015e8b2c2a1 to your computer and use it in GitHub Desktop.
Two-column fork of the supernova tumblr theme
<html>
<!-- SUPERNOVA THEME BY DRINKHERTEARS.TUMBLR.COM -->
<!-- Modified by coderaugustus.tumblr.com -->
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="image:sidebar" content=""/>
<meta name="if:show title" content="1"/>
<meta name="color:background" content="#ffffff"/>
<meta name="color:text" content="#000000"/>
<meta name="color:link" content="#222222"/>
<meta name="color:hover background" content="#00ffed">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>
<style type="text/css">
body {
margin: 0;
font: 12px baskerville;
background: {color:background};
color: {color:text};
}
a {
text-decoration: none;
-webkit-transition-duration: .1s;
color: {color:link};
}
a:hover {
-webkit-transition-duration: .1s;
background: {color:hover background};
}
img {
background: {color:background};
}
a img, a:hover img {
background: {color:background};
}
blockquote {
margin: 0 10px;
padding: 0 8px;
border-left: 1px solid #ccc;
}
blockquote img {
max-width: 481px;
}
ul, ol {
padding: 0px 25px;
}
p, ul, ol {
margin: 5px 0;
}
::-webkit-scrollbar {
width: 7px;
height: 10px;
background: #fff;
}
::-webkit-scrollbar-thumb:vertical {
background: #9e9e9e;
}
#whole {
width: 800px;
margin: auto;
}
#sidebar {
width: 200px;
margin: 100px 0 0;
text-align: left;
float: right;
}
.title {
font: 25px times;
text-transform: lowercase;
line-height: 25px;
}
.title a, .title a:hover {
color: #000;
background: transparent;
letter-spacing: -1px;
}
#main {
width: 600px;
padding: 10px;
}
.posttitle {
font-size: 17px;
font-style: italic;
text-transform: lowercase;
background: transparent;
}
.posttitle a, .posttitle a:hover {
color: #000;
background: transparent;
}
.link, .link a {
font-size: 17px;
font-style: italic;
text-transform: lowercase;
text-decoration: underline;
color: #000;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.date, .date a {
font: 10px cambria;
font-style: italic;
color: #666;
}
ol.notes li.note img.avatar {
display: none
}
ol.notes li.note blockquote {
border: 0;
margin: 0;
padding: 0 0 0 10px;
}
.center {
display: block;
text-align: center;
}
.entry {
width: 250px;
}
.entry img {
width: 100%;
}
#sidebar ul {
list-style-type: none;
padding: 0;
margin: 1em 0;
}
{CustomCSS}
</style>
</head>
<body>
<div id="whole">
<div id="sidebar">
{block:ifshowtitle}<div class="title"><a href="/">{Title}</a></div>{/block:ifshowtitle}
{block:ifsidebarimage}<img src="{image:sidebar}" width="100%" style="padding: 5px 0 0;"/>{/block:ifsidebarimage}
<div style="padding: {block:ifnotsidebarimage}10px{/block:ifnotsidebarimage}{block:ifsidebarimage}5px{/block:ifsidebarimage} 0 0;">{Description}</div>
<ul style="letter-spacing: 1px;">
{block:ifnotshowtitle}<li><a href="/">home</a></li>{/block:ifnotshowtitle}
{block:HasPages}<li>{block:Pages}<a href="{URL}">{Label}</a></li>{/block:Pages}{/block:HasPages}
{block:AskEnabled}<li><a href="/ask">ask</a></li>{/block:AskEnabled}
{block:SubmissionsEnabled}<li><a href="/submit">submit</a></li>{/block:SubmissionsEnabled}
<li><a href="/archive">archive</a></li>
<li><a href="http://drinkhertears.tumblr.com" target="_blank">theme</a></li>
</ul>
</div>
<div id="main">
<br />
{block:Posts}
<div class="entry">
{block:Text}
{block:Title}<div class="posttitle"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{Body}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Text}
{block:Photo}
{LinkOpenTag}
<div class="center" style="max-width: 250px;"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Photo}
{block:Photoset}
{Photoset-250}
{block:Caption}{Caption}{/block:Caption}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Photoset}
{block:Quote}
<big><i>&ldquo;{Quote}&rdquo;</i></big>
{block:Source}&mdash;&nbsp;{Source}{/block:Source}
{block:Date}
<div class="date" style="padding: 3px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Quote}
{block:Link}
<div class="link"><a href="{URL}" {Target}>{Name}</a></div>
{block:Description}{Description}{/block:Description}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Link}
{block:Chat}
{block:Title}<div class="posttitle"><a href="{Permalink}">{Title}</a></div>{/block:Title}
{block:Lines}{block:Label}<b>{Label}</b>&nbsp;{/block:Label}{Line}<br />{/block:Lines}
{block:Date}
<div class="date" style="padding: 3px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Chat}
{block:Audio}
{block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
{block:Caption}{Caption}{/block:Caption}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Audio}
{block:Video}
<div class="center">{Video-250}</div>
{block:Caption}{Caption}{/block:Caption}
{block:Date}
<div class="date" style="padding: 1px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Video}
{block:Answer}
<big><i>{Question}</i></big>
&mdash;&nbsp;{Asker}
{Answer}
{block:Date}
<div class="date" style="padding: 3px 0 0;">
<a href="{Permalink}">{TimeAgo}</a>&nbsp;&nbsp;
{block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}
</div>
{/block:Date}
{block:IndexPage}<br /><br />{/block:IndexPage}<br />
{/block:Answer}
{block:PermalinkPage}
<div style="text-transform: lowercase;">
{block:Date}
{block:ContentSource}source: <a href="{SourceURL}" target="_blank">{SourceTitle}</a><br />{/block:ContentSource}
{block:RebloggedFrom}from: <a href="{ReblogParentURL}" target="_blank">{ReblogParentName}</a><br />{/block:RebloggedFrom}
{block:PostNotes}
{block:NoteCount}<br /><i>{NoteCountWithLabel}</i>{/block:NoteCount} {PostNotes}
{/block:PostNotes}
{/block:Date}
</div>
{/block:PermalinkPage}
</div>
{/block:Posts}
</div>
<div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}" class="left">&#171; Previous</a>
{/block:PreviousPage}{block:NextPage}
<a href="{NextPage}" class="right">Next &#187;</a>
{/block:NextPage}
</div>
</div>
</body>
<script>
$(function() {
var $container = $('#main');
$container.imagesLoaded(function() {
$container.masonry({
columnWidth: 270,
gutter: 20,
itemSelector: '.entry'
});
});
$container.infinitescroll({
navSelector : '.pagination',
nextSelector : '.pagination a.right',
itemSelector : '.entry'
},
function(newElements) {
var $newElems = $(newElements).css({ opacity: 0 });
$newElems.imagesLoaded(function() {
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment