Skip to content

Instantly share code, notes, and snippets.

@javierarce

javierarce/template.html

Last active August 29, 2015 14:01
Show Gist options
  • Save javierarce/2d80537be6cc60269b57 to your computer and use it in GitHub Desktop.
Save javierarce/2d80537be6cc60269b57 to your computer and use it in GitHub Desktop.
Download ZIP
watchthemmove.tumblr.com theme
Raw
template.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle} - {Description}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<meta name="viewport" content="width=775, maximum-scale=1.0" />
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style>
@import url(http://fonts.googleapis.com/css?family=Asap:200,400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,lisfont,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}
:focus{outline:0}
html { -webkit-font-smoothing: antialiased; }
body{line-height:1.3;color:#222;background:white}
p{padding-bottom:10px;line-height:25px}
p p{padding-bottom:0}
ol,ul li{list-style:disc;padding:0 0 18px 5px;margin-left:18px}
caption,th,td{text-align:left;font-weight:normal}
article.quote .source{margin: 15px 20px 0 0; text-align: right; }
article.link blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:28px;}
article.quote blockquote,q{quotes:""""}
article.quote blockquote:hover{background:#F2F66A;color:#333;}
article.quote blockquote a:hover{color:#333;}
article.quote blockquote{margin:0 0 10px 0;padding:4px 0px;font-size:18px;line-height:22px;display:inline;background:#F4F6B2;}
article.quote blockquote,article.quote blockquote a{font-weight:normal;line-height:35px;}
article .icon{display:block;position:absolute;top:5px;left:-75px;width:42px;height:42px;}
body{right:10px;font-size:16px;color:#333;font-family:"Droid Sans","helvetica-neue","Helvetica", Arial, sans-serif;line-height:23px; }
pre{font-size:10px}
a{font-weight:bold;text-decoration:none;-webkit-transition:.2s color linear;-moz-transition:.2s color linear;transition:.2s color linear; color:#6DB866; }
a:hover{color:#666}
#credits{color:#666;font-size:11px;margin:10px 0}
header{margin:80px 0 70px 0;clear:both;overflow:hidden;}
header nav{text-align:center;}
header h1 { margin-bottom: 3px; }
header h1 a {font: 50px "Asap","helvetica-neue","helvetica",arial,sans-serif; font-weight: 200; text-transform: uppercase; color:#6DB866}
.wrapper header h1 a:hover { color:#666; }
header h2 {margin: 0 0 5px 0; font: 16px "Asap", "helvetica-neue", "helvetica", arial, sans-serif; color: #666; }
header h2 span { font-family: "Helvetica", sans-serif; color: #ccc; font-weight: 200; }
div.about{display:none;margin:-25px 0 0 0;padding:15px 20px;color:#333;background:#F1F1F1;font-size:14px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:4px;}
header ul{list-style:none;margin:25px 0 0 0;padding:0;}
header ul li{display:inline;padding:0;margin:0 7px 0 0}
header ul li.about{display:inline;}
header ul li {font-weight:normal;font-size:14px;color:#ccc}
header ul li a{font-weight:normal;font-size:14px;text-decoration:underline; color:#ccc}
header #listening{font-size:11px;position:absolute;top:40px;right:10px;}
header #listening.active .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
header #listening a{display:block;font-weight:normal;color:#999;text-decoration:none;}
header #listening img{float:left;margin:1px 5px 0 0;}
header #listening strong{font-weight:bold;color:#999;}
header #listening strong.newline{display:block;}
h1,h2,h2 a,h3,h4,h5,h6{font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
h3{color:#333;font-weight:normal !important;margin-bottom:0px}
h4{color:#333;font-weight:normal;margin-bottom:0px}
img{background:#fff !important;margin:0px}
img a{text-decoration:none !important;background:#fff !important;margin:0px}
input{border:1px solid #999}
.wrapper{width:950px;margin:0 auto 20px auto;clear:both;}
.main{margin:0px 0px 50px 0;}
article{margin-bottom:200px;}
.main article:last-child{border:none!important;}
article p a{text-decoration:underline;}
article strong{font-weight:bold;}
article h2{font-size:16px;margin:0 0 7px 0;color:333;}
article h2 a:hover{color:#333;}
article h2 a{text-decoration:none;border-bottom:3px solid #333;padding-bottom:1px;line-height:28px;text-transform:uppercase; display:inline;}
article > .more {font-size:13px;margin:10px 0 20px 0;}
article > .more ul{margin-left:10px;}
article > .more ul li a{text-decoration:underline;font-size:13px;display:block;}
article > .more ul li{margin-bottom:10px;padding:0px;font-size:13px;}
article > .more ul li:last-child{margin-bottom:0;}
article .comment{position:absolute;width:100px;left:-115px;bottom:0px;margin-bottom:60px;font-size:10px;line-height:15px;text-align:right;color:#666;}
.video iframe { margin: 0 0 15px 0; }
footer{font-size:12px;color:#333;line-height:1.8;}
footer ul{list-style:none;margin:0;padding:0;}
footer ul li{display:inline;margin:0 7px 0 0;padding:3px 0;opacity:.4;color:#333;-webkit-transition:.2s opacity linear;-moz-transition:.2s opacity linear;transition:.2s opacity linear;}
footer ul li.more{margin:0 0 0 7px!important;}
footer ul li.tag a{font-family:'Lucida Grande',Helvetica,Arial,sans-serif;font-weight:bold;font-size:11px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;color:#444;background-color:#F8F8F8;border:1px solid #AAA;padding:0px 7px 1px 7px;min-width:70px;text-align:center;text-decoration:none;}
footer ul li:hover{opacity:1;color:#333;}
footer ul li:hover a{color:#333;}
footer ul li:last-child,footer ul li.via{margin:0;}
footer ul li a{font-weight:normal;color:#333;}
footer ul li.readlater{float:right;margin:0;}
footer ul li.readlater a{font-size:11px;color:#fff;background:#666;padding:5px 5px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
.navleft{font-size:14px;position:relative;float:left}
.navright{font-size:14px;position:relative;float:right}
.pagination{clear:both;overflow:hidden;margin:10px 0 10px 0;}
a .notes{text-decoration:none !important;background:none}
.notes a{text-decoration:none !important;background:none}
img .notes{margin:0px;padding:3px}
.notes img{display:none;margin:0px;padding:3px}
ol.notes{list-style:none;margin:0;padding:0}
ol.notes li{font-size:12px}
.regular_post_body img{max-width:100%}
/* .gist .gist-file .gist-data{background:#f1f1f1!Important;}
*/
.gist .gist-file{border:1px solid #f1f1f1!Important;}
.gist .gist-file .gist-data.gist-syntax .s2{color:#F75757;}
.gist .gist-meta{font-size:10px;color:#fff!important;background:#F75757!Important;font-family:"Droid Sans","helvetica-neue","helvetica",arial,sans-serif;}
.gist .gist-meta a{color:#fff!Important;text-decoration:underline;}
.gist .gist-file .gist-highlight pre{font-size:12px; font-family: "Droid Sans Mono", sans-serif!important;}
.listening_example{display:inline-block;margin:0 0 20px 0;font-size:11px;}
.listening_example .track{color:#999;padding:4px 7px;line-height:15px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #f1f1f1;display:none;}
.listening_example a{display:block;font-weight:normal;color:#999;text-decoration:none;}
.listening_example img{float:left;margin:1px 5px 0 0;}
.listening_example strong{font-weight:bold;color:#999;}
.listening_example strong.newline{display:block;}
article { position:relative; }
article .note { position:absolute; display:none; width:480px; top:0; left:0; padding:10px; background:#f1f1f1; z-index:1000; }
@media only screen and (max-width: 1400px) {
::-webkit-scrollbar{
width:10px;
height:10px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment{
display:block;
height:0px;
width:0px;
}
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:horizontal:increment{
background-color:transparent;
}
::-webkit-scrollbar-track-piece{
background-color:#fff;
}
::-webkit-scrollbar-thumb:vertical{
height:50px;
background-color:#6DB866;
}
::-webkit-scrollbar-thumb:horizontal{
width:50px;
background-color:#6DB866;
}
::-webkit-scrollbar-thumb:hover{
background-color:#6DB866;
}
::-webkit-scrollbar-corner{
background-color:#fbfbfb;
}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script>
$(function() {
var videos = [];
var color = "55AAAA";
var opts = "title=0&byline=0&portrait=0";
$("iframe").each(function() {
var $obj = $(this);
var data = $obj.attr("data");
var vsrc = $obj.attr("src");
var oldW = $obj.attr("width");
var newW = 950;
var oldH = $obj.attr("height");
var p = oldW/newW;
var newH = (oldH / p);
if (vsrc.search("youtube") > 0) {
$obj.replaceWith('<iframe src="'+vsrc+'?'+opts+'&amp;color='+color+'" width="'+newW+'" height="'+newH+'" frameborder="0"></iframe>');
}
});
var
i = 0,
iframes = document.body.getElementsByTagName('iframe'),
newVimeoWidth = 950,
newVimeoHeight = 'auto';
window.players = [];
var players = [];
for (x in iframes){
if(iframes[x].src && iframes[x].src.indexOf('player.vimeo.com') > -1){
if (newVimeoHeight == 'auto'){
newVimeoHeight = ( newVimeoWidth * 9 ) / 16;
}
iframes[x].setAttribute("id", "player" + x);
iframes[x].width = newVimeoWidth;
iframes[x].height = newVimeoHeight;
iframes[x].setAttribute("src", iframes[x].src + "?api=1&player_id=player" + x);
}
}
$("article footer .edit").live("click", function(e) {
e.preventDefault();
var
$article = $(this).parents("article");
var text = $(this).text() == 'More' ? 'Less' : 'More';
$article.find('.note').fadeToggle(250);
$(this).text(text);
});
$("article .note").each(function(i, el) {
var
$el = $(el),
$parent = $(this).parents("article"),
$footer = $parent.find("footer");
articlePaddingBottom = parseInt($parent.css("paddingBottom").replace("px", "")),
paddingTop = parseInt($el.css("paddingTop").replace("px", "")),
paddingBottom = parseInt($el.css("paddingBottom").replace("px", ""));
var height = $parent.height() - $footer.height() - paddingTop - paddingBottom;
console.log($(this).find("img").height(),$parent.height(), height);
if ($el.height() < height) {
$el.css({height: height});
}
var $button = $('<li class="more"><a href="#" class="edit">More</a></li>');
$footer.find("ul").append($button);
});
$("a.about").on("click", function() {
if ($(this).hasClass("open")) {
$(".main").animate({
marginTop: 0
},
250, function() {
$("div.about").slideToggle(50);
$(this).toggleClass("open");
});
} else {
$(".main").animate({ marginTop: "20px" }, 250, function() { $("div.about").slideToggle(50); $(this).toggleClass("open"); });
}
});
});
</script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<h1><a href="/">{Title}</a></h1>
<h2><span>&mdash;</span> {Description} <span>&mdash;</span></h2>
</nav>
</header>
<div class="main">
{block:SearchPage}
<div class="content">
<div class="datetime">
{lang:SearchResultCount results}
</div>
<h2>{lang:Search results for SearchQuery 2}</h2>
</div>
{/block:SearchPage}
{block:Posts}
{block:Regular}<article>{Body}{/block:Regular}
{block:Photo}
<article class="photo">
<a href="{Permalink}" class="icon" title="{Name}"></a>
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" title="{PhotoAlt}">{LinkCloseTag}{Caption}
{/block:Photo}
{block:Video}
<article class="video"><div class="video">{Video-500}</div>{Caption}
{/block:Video}
{block:Audio}
<article class="audio">{AudioPlayerGrey}{Caption}
{/block:Audio}
{block:Quote}
<article class="quote"><blockquote class="highlight large">
<a href="{Permalink}" class="icon" title="{Name}"></a>
{Quote}
</blockquote>
{block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
{/block:Quote}
{block:Link}
<article class="link">
<a href="{Permalink}" class="icon" title="{Name}"></a>
<h2><a href="{URL}" title="{Name}" {Target}>{Name}</a> →</h2>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Conversation}<article>
{block:Title}<h2>{Title}</h2>{/block:Title}
<p>
{block:Lines}
{block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />{/block:Lines}
</p>
{/block:Conversation}
<footer>
<ul>
{block:Date}<li class="date"><a href="{Permalink}">{TimeAgo}</a>{/block:Date}</li>
{block:NoteCount}<li class="count"><a href="{Permalink}"> {NoteCountWithLabel}</a></li>{/block:NoteCount}
{block:ContentSource}<li class="via">via <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
{block:HasTags}
{block:Tags}
<li class="tag">
<a href="{TagURL}">{Tag}</a>
</li>
{/block:Tags}
{/block:HasTags}
</ul>
</footer>
</article>
{/block:Posts}
{block:PermalinkPage}
{block:PostNotes}
<h3>{lang:Notes}</h3>
<p>{PostNotes}</p>
{/block:PostNotes}
{/block:PermalinkPage}
{block:Pagination}
<div class="pagination">
{block:NextPage}
<div class="navleft">
&larr;&nbsp;<a href="{NextPage}">past</a>
</div>
{/block:NextPage}
{block:PreviousPage}
<div class="navright">
<a href="{PreviousPage}">future</a>&nbsp;&rarr;
</div>
{/block:PreviousPage}
</div>
{/block:Pagination}
{block:PermalinkPagination}
<div class="pagination">
{block:PreviousPost}
<div class="navleft">
&larr;&nbsp;<a href="{PreviousPost}">{lang:Previous post}</a>
</div>
{/block:PreviousPost}
{block:NextPost}
<div class="navright">
<a href="{NextPost}">{lang:Next post}</a>&nbsp;&rarr;
</div>
{/block:NextPost}
</div>
{/block:PermalinkPagination}
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment