Skip to content

Instantly share code, notes, and snippets.

@corygibbons

corygibbons/fushigi.html

Created November 20, 2012 04:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save corygibbons/4116115 to your computer and use it in GitHub Desktop.
Save corygibbons/4116115 to your computer and use it in GitHub Desktop.
Download ZIP
#tumblr #fushigi
Raw
fushigi.html
<!DOCTYPE html>
<html>
<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}
<!--
Fushigi by Cory Gibbons
www.corygibbons.com
www.ifonawintersmorning.com
hi@corygibbons.com
@corygibbons
-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/j9zrgpw/PZhmdlz15/modernizr-2.6.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(window).load(function() {
$(".fade").each(function(i) {
$(this).delay(110*i).fadeIn();
});
});
</script>
<style type="text/css">
body {
background-color: #fbfbfb;
font-family: 'Droid Sans', Helvetica; Arial, Sans-serif;
font-size: 11px;
line-height: 1.6em;
color: #3f3f3f;
}
a { color: #3f3f3f; text-decoration: none; }
a:hover { color: #3f3f3f; border-bottom: 1px solid #7f7f7f; padding-bottom: 2px; }
h1 {
font-size: 11px;
font-weight: normal;
margin: 0;
}
#container {
margin: 0 auto;
max-width: 1060px;
padding: 40px;
}
header {
margin: 60px 0 100px 0;
max-width: 1060px;
float: left;
}
header .title {
width: 440px;
float: left;
}
header .additional {
width: 400px;
float: left;
margin: 0 0 0 0;
color: #b4b4b4;
}
header .additional a { color: #b4b4b4; }
header .tagged {
max-width: 400px;
float: left;
margin: 0 0 0 0;
color: #b4b4b4;
}
#posts {
margin: 0 0 0 -40px;
max-width: 1100px;
clear: both;
}
.post {
margin: 0 0 40px 40px;
float: left;
min-width: 180px;
}
.post header { color: #b4b4b4; display: block; margin: 0; padding: 0; width: 100%; }
.quote {
background-color: #f2f2f2;
padding: 10px;
}
.link { background-color: #f2f2f2; padding: 10px; }
.link p { margin: 0; }
.single {
width: 180px;
float: left;
}
.single img { width: 180px; line-height: 0px; display: block; }
.double {
width: 400px;
float: left;
}
.double img { width: 400px; display: block; }
.triple {
max-width: 620px;
float: left;
}
.triple img { max-width: 620px; display: block; }
.navigation {
border-top: 1px solid #c7c7c7;
padding: 10px 0 0 0;
}
.fade { display: none; }
/**** Transitions ****/
.masonry,
.masonry .masonry-brick {
-webkit-transition-duration: 0.7s;
-moz-transition-duration: 0.7s;
-o-transition-duration: 0.7s;
transition-duration: 0.7s;
}
.masonry {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.masonry .masonry-brick {
-webkit-transition-property: left, right, top;
-moz-transition-property: left, right, top;
-o-transition-property: left, right, top;
transition-property: left, right, top;
}
</style>
</head>
<body>
<div id="container">
<header>
<div class="title">
<h1 class="fade"><a href="/">{Title}</a></h1>
</div>
{block:Description}
<div class="additional fade">
{Description}
</div>
{/block:Description}
{block:TagPage}
<div class="tagged fade">
Viewing all entries marked "{Tag}"
</div>
{/block:TagPage}
</header>
<section id="posts">
{block:Posts}
{block:Post1}
{block:IndexPage}<section class="post fade double">{/block:IndexPage}
{block:PermalinkPage}<section class="post fade double">{/block:PermalinkPage}
{/block:Post1}
{block:Post2}</section><section class="post fade single">{/block:Post2}
{block:Post3}</section><section class="post fade single">{/block:Post3}
{block:Post4}</section><section class="post fade single">{/block:Post4}
{block:Post5}</section><section class="post fade single">{/block:Post5}
{block:Post6}</section><section class="post fade single">{/block:Post6}
{block:Post7}</section><section class="post fade double">{/block:Post7}
{block:Post8}</section><section class="post fade single">{/block:Post8}
{block:Post9}</section><section class="post fade single">{/block:Post9}
{block:Post10}</section><section class="post fade single">{/block:Post10}
{block:Post11}</section><section class="post fade single">{/block:Post11}
{block:Post12}</section><section class="post fade double">{/block:Post12}
{block:Post13}</section><section class="post fade single">{/block:Post13}
{block:Post14}</section><section class="post fade single">{/block:Post14}
{block:Post15}</section><section class="post fade single">{/block:Post15}
{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
{block:IndexPage}
<a href="{Permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:IndexPage}
{block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
{/block:PermalinkPage}
{/block:Photo}
{block:Quote}
<div class="quote">
"{Quote}"
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="the-link" {Target}>{Name} &rarr;</a>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
</div>
{/block:Link}
{block:PermalinkPage}
</section> <!-- img section -->
{block:Date}
<section class="post fade single navigation">
<header>Posted</header>
{Month} {DayOfMonth}, {Year}
</section>
{/block:Date}
{block:HasTags}
<section class="post fade single navigation">
<header>Tagged</header>
{block:Tags}
<a href="{TagURL}">{Tag}</a>&nbsp;
{/block:Tags}
</section>
{/block:HasTags}
{block:ContentSource}
<section class="post fade single navigation">
<header>Content source</header>
<a href="{SourceURL}" target="_blank">{SourceTitle}</a>
</section>
{/block:ContentSource}
{block:RebloggedFrom}
<section class="post fade single navigation">
<header>Reblogged from</header>
<a href="{ReblogParentURL}" target="_blank">{ReblogParentTitle}</a>
</section>
{/block:RebloggedFrom}
{block:PreviousPost}
<section class="post fade navigation">
<a href="{PreviousPost}">Previous Entry</a>
</section>
{/block:PreviousPost}
{block:NextPost}
<section class="post fade navigation">
Newer Entry
</section>
{/block:NextPost}
{/block:PermalinkPage}
{/block:Posts}
</section>
{block:Pagination}
{block:PreviousPage}
<section class="post fade navigation">
<a href="{PreviousPage}">Previous Page</a>
</section>
{/block:PreviousPage}
{block:NextPage}
<section class="post fade navigation">
<a href="{NextPage}">Next Page</a>
</section>
{/block:NextPage}
{/block:Pagination}
</div>
<script src="http://static.tumblr.com/j9zrgpw/J0tmdlzgo/jquery.masonry.min.js"></script>
<script>
$(window).load(function(){
$('#posts').masonry({
itemSelector: '.post',
columnWidth: 220,
isAnimated: !Modernizr.csstransitions
});
{block:IndexPage}
$("img").hover(function() {
$(this).stop().animate({opacity: "0.4"}, '400');
},
function() {
$(this).stop().animate({opacity: "1"}, '400');
});
{/block:IndexPage}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment