Skip to content

Instantly share code, notes, and snippets.

@besi

besi/tumblr-blog-theme.html

Last active November 1, 2017 17:48
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 besi/096528ff2341251a36c3 to your computer and use it in GitHub Desktop.
Save besi/096528ff2341251a36c3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tumblr-blog-theme.html
<!DOCTYPE html>
<!--[if lt IE 7]><html class="lt-ie10 lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie10 lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
{MobileAppHeaders}
<meta charset="utf-8">
<title>{Title}{block:SearchPage} ({lang:Search results for SearchQuery}){/block:SearchPage}{block:PermalinkPage}{block:PostSummary} — {PostSummary}{/block:PostSummary}{/block:PermalinkPage}</title>
{block:Description}
<meta name="description" content="{MetaDescription}">
{/block:Description}
{block:Hidden}
<meta name="if:Sliding header" content="1">
<meta name="if:Collapse navigation" content="1">
<meta name="if:Endless scrolling" content="1">
<meta name="select:Layout" content="regular" title="Regular">
<meta name="select:Layout" content="narrow" title="Narrow">
<meta name="select:Layout" content="grid" title="Grid">
<meta name="text:Disqus shortname" content="">
<meta name="text:Google analytics ID" content="">
{/block:Hidden}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="{Favicon}">
<link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/PuGmmhqcs/normalize.css">
<link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/qE8n2yg06/optica-icons.css">
<link rel="stylesheet" href="http://static.tumblr.com/vr9xgox/bvln4lpn1/main.css">
<!-- HTML5 Shiv -->
<!--[if lt IE 9]>
<script src="http://static.tumblr.com/hriofhd/Qj0m8pn7q/html5shiv.js"></script>
<![endif]-->
<style>
/* Colors */
body {
background: {BackgroundColor};
}
h1 {
font-family: {TitleFont}, "Helvetica Neue", HelveticaNeue, Arial, sans-serif;
font-weight: {TitleFontWeight};
}
h1 a,
.description,
.search-header {
color: {TitleColor};
}
.h-line {
background: {TitleColor};
}
a {
color: {AccentColor};
}
#pagination a,
.exposed-nav-wrapper li a {
color: {AccentColor};
}
#pagination a.next:after {
border-left-color: {AccentColor};
}
#pagination a.previous:after {
border-right-color: {AccentColor};
}
.loader .loader-bar {
background-color: {TitleColor};
}
.link-wrapper h2 a {
background-color: {AccentColor};
}
.header-image.cover {
background-image: url({HeaderImage});
}
.user-avatar {
background-color: {BackgroundColor};
border-color: {BackgroundColor};
}
.avatar-style-square .user-avatar {
-wekbit-box-shadow: 0 0 0 4px {BackgroundColor};
-moz-box-shadow: 0 0 0 4px {BackgroundColor};
box-shadow: 0 0 0 4px {BackgroundColor};
}
.no-header-image .selector .bar-icon,
.contain-header-image .selector .bar-icon {
background: {AccentColor};
}
.no-header-image .search-only .selector .icon,
.contain-header-image .search-only .selector .icon {
color: {AccentColor};
}
/* Adjust menus for light accents on light backgrounds */
.light-on-light.no-header-image .selector .bar-icon,
.light-on-light.contain-header-image .selector .bar-icon {
background: #444;
}
.light-on-light.no-header-image .search-only .selector .icon,
.light-on-light.contain-header-image .search-only .selector .icon {
color: #444;
}
/* Adjust menus for dark accents on dark backgrounds */
.dark-on-dark.no-header-image .selector .bar-icon,
.dark-on-dark.contain-header-image .selector .bar-icon {
background: #fff;
}
.dark-on-dark.no-header-image .search-only .selector .icon,
.dark-on-dark.contain-header-image .search-only .selector .icon {
color: #fff;
}
@media screen and (max-device-width: 568px) {
.header-image.cover {
background-image: url({HeaderImage-1024});
-webkit-background-size: cover;
background-size: cover;
}
.nav-menu-bg,
.nav-menu-wrapper .nav-menu.active:before,
.nav-menu .pop-menu ul {
background: {BackgroundColor};
}
.nav-menu.active .selector .bar-icon,
.below-header .selector .bar-icon {
background: {AccentColor};
}
.nav-menu .pop-menu ul li a,
.below-header .search-only .selector .icon {
color: {AccentColor};
}
/* Adjust menus for light accents on light backgrounds */
.light-on-light.below-header .nav-menu .selector .bar-icon,
.light-on-light.below-header .selector .bar-icon {
background: #444;
}
.light-on-light .nav-menu .pop-menu ul li a,
.light-on-light.below-header .search-only .selector .icon {
color: #444;
}
/* Adjust menus for dark accents on dark backgrounds */
.dark-on-dark .nav-menu .selector .bar-icon,
.dark-on-dark .below-header .selector .bar-icon {
background: #fff;
}
.dark-on-dark .nav-menu .pop-menu ul li a,
.dark-on-dark.below-header .search-only .selector .icon {
color: #fff;
}
.avatar-style-square .user-avatar {
-wekbit-box-shadow: 0 0 0 3px {BackgroundColor};
-moz-box-shadow: 0 0 0 3px {BackgroundColor};
box-shadow: 0 0 0 3px {BackgroundColor};
}
}
/* Custom CSS */
{CustomCSS}
</style>
</head>
<body data-urlencoded-name="{URLEncodedName}" class="{select:Layout}{block:IndexPage} index-page{/block:IndexPage}{block:PermalinkPage} permalink{/block:PermalinkPage}{block:SearchPage} search-page{block:NoSearchResults} no-results{/block:NoSearchResults}{/block:SearchPage}{block:HideHeaderImage} no-header-image{/block:HideHeaderImage}{block:NoStretchHeaderImage} contain-header-image{/block:NoStretchHeaderImage}">
<section id="page">
<div class="nav-menu-wrapper {block:IfNotCollapseNavigation}search-only{/block:IfNotCollapseNavigation}">
<nav class="nav-menu pop">
<a class="selector">
{block:IfCollapseNavigation}
<div class="bar-icon-wrapper">
<span class="bar-icon"></span>
<span class="bar-icon"></span>
<span class="bar-icon"></span>
</div>
{/block:IfCollapseNavigation}
{block:IfNotCollapseNavigation}
<span class="icon icon-search_16"></span>
<span class="icon icon-close"></span>
{/block:IfNotCollapseNavigation}
</a>
<div class="pop-menu west">
<ul>
<li class="no-hover search">
<form action="/search" method="get" id="search">
<input type="text" name="q" id="q" placeholder="{lang:Search}" value="{SearchQuery}">
<button type="submit" class="icon-search_16"></button>
</form>
</li>
{block:IfCollapseNavigation}
<li>
<a href="/archive" class="archive">{lang:Archive} <i class="icon-arrow_carrot_right"></i></a>
</li>
{block:AskEnabled}
<li>
<a href="/ask" class="ask">{AskLabel} <i class="icon-arrow_carrot_right"></i></a>
</li>
{/block:AskEnabled}
{block:HasPages}
{block:Pages}
<li>
<a href="{URL}" class="page">{Label} <i class="icon-arrow_carrot_right"></i></a>
</li>
{/block:Pages}
{/block:HasPages}
{block:SubmissionsEnabled}
<li>
<a href="/submit" class="submit">{SubmitLabel} <i class="icon-arrow_carrot_right"></i></a>
</li>
{/block:SubmissionsEnabled}
{block:IfCollapseNavigation}
</ul>
</div>
</nav>
<div class="glass"></div>
</div>
{block:IfCollapseNavigation}
<div class="nav-menu-bg"></div>
{/block:IfCollapseNavigation}
<div class="header-wrapper
{block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}
{block:HideHeaderImage}no-image {/block:HideHeaderImage}
{block:HideAvatar}avatar-hidden{/block:HideAvatar}
{block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar}">
<header id="header">
{block:ShowHeaderImage}
<div class="header-image-wrapper {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}">
<a href="/" class="header-image {block:IfSlidingHeader}parallax{/block:IfSlidingHeader} {block:StretchHeaderImage}cover{/block:StretchHeaderImage} {block:NoStretchHeaderImage}contain{/block:NoStretchHeaderImage}" data-bg-image="{HeaderImage}">
{block:NoStretchHeaderImage}
<img src="{HeaderImage}" alt="">
{/block:NoStretchHeaderImage}
</a>
<div class="loader-bg"></div>
</div>
{/block:ShowHeaderImage}
<div class="blog-title content">
<figure class="avatar-wrapper{block:IndexPage} animate{/block:IndexPage}">
<a href="/" style="background-image: url({PortraitURL-128})" class="user-avatar"><img src="{PortraitURL-128}" alt="" class="print-only invisible"></a>
</figure>
<div class="title-group{block:IndexPage} animate{/block:IndexPage}">
{block:ShowTitle}
<h1><a href="/">{Title}</a></h1>
{/block:ShowTitle}
{block:ShowDescription}
<span class="description">
{Description}
</span>
{/block:ShowDescription}
</div>
</div>
{block:IfNotCollapseNavigation}
<div class="{block:HideTitle}{block:HideDescription}no-title-desc{/block:HideDescription}{/block:HideTitle} exposed-nav-wrapper content">
<div class="h-line"></div>
<nav class="nav-menu">
<ul>
<li>
<a href="/archive">{lang:Archive}</a>
</li>
{block:AskEnabled}
<li>
<a href="/ask" class="ask">{AskLabel}</a>
</li>
{/block:AskEnabled}
{block:HasPages}
{block:Pages}
<li>
<a href="{URL}" class="page">{Label}</a>
</li>
{/block:Pages}
{/block:HasPages}
{block:SubmissionsEnabled}
<li>
<a href="/submit" class="submit">{SubmitLabel}</a>
</li>
{/block:SubmissionsEnabled}
</ul>
</nav>
</div>
{/block:IfNotCollapseNavigation}
</header>
</div>
{block:SearchPage}
<div class="search-header content">
<h2>
{lang:SearchResultCount results for SearchQuery}
{block:NoSearchResults}{lang:Sorry no search results found}{/block:NoSearchResults}
</h2>
</div>
{/block:SearchPage}
<section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}{block:HideHeaderImage}no-image {/block:HideHeaderImage} {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar} {block:HideAvatar}avatar-hidden{/block:HideAvatar} {block:IfNotCollapseNavigation}exposed-nav{/block:IfNotCollapseNavigation}">
<div data-page-id="{CurrentPage}">
{block:Posts}
<article class="{block:Text}text {/block:Text}{block:Photoset}photoset {/block:Photoset}{block:Photo}photo {/block:Photo}{block:RebloggedFrom}reblogged {/block:RebloggedFrom}{block:Quote}quote {/block:Quote}{block:Link}link {/block:Link}{block:Chat}chat {/block:Chat}{block:Audio}audio {/block:Audio}{block:Video}video {/block:Video}{block:Answer}answer {/block:Answer}{block:Date}not-page post-{PostID}{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="post_{PostID}"{/block:Date}>
<div class="post-wrapper clearfix">
{block:RebloggedFrom}
<header class="reblog-header">
<a class="reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a>
</header>
{/block:RebloggedFrom}
<section class="post">
{block:Text}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{block:Body}
<div class="body-text">
{Body}
</div>
{/block:Body}
{/block:Text}
{block:Photo}
<figure class="{block:HighRes}high-res{/block:HighRes}{block:Caption} with-caption{/block:Caption}" data-photo-width="{PhotoWidth-HighRes}">
<div class="photo-wrapper">
<div class="photo-wrapper-inner">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-HighRes}" height="{PhotoHeight-HighRes}">{LinkCloseTag}
</div>
</div>
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photo}
{block:Photoset}
<figure class="photoset {block:Caption}with-caption{/block:Caption}">
{Photoset}
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photoset}
{block:Quote}
<blockquote class="{Length}">
{Quote}
</blockquote>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<div class="link-wrapper">
<h2>
<a {Target} href="{URL}">
<span class="link-title">{Name}</span>
{block:Host}
<span class="link-host">{Host}</span>
{/block:Host}
</a>
</h2>
</div>
{block:Description}
<div class="caption">
{Description}
</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul class="conversation">
{block:Lines}
<li class="chat-{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Audio}
<div class="audio_container">
{block:AudioEmbed}
{AudioEmbed color="white"}
{/block:AudioEmbed}
</div>
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
{/block:Audio}
{block:Video}
<figure {block:Caption}class="with-caption"{/block:Caption}>
<div class="video-wrapper">
{Video-700}
</div>
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Video}
{block:Answer}
<div class="note-item note-item-asker">
<div class="text">
<p class="asker"><strong>{Asker}</strong> asked:</p>
<div class="asker-question">
{Question}
</div>
</div>
<div class="avatar">
<img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
</div>
</div>
{block:Answerer}
<div class="note-item note-item-answerer">
<div class="text">
<p class="answerer"><strong>{Answerer}</strong> answered:</p>
<div class="answerer-answer">
{Answer}
</div>
</div>
<div class="avatar">
<img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
</div>
</div>
{/block:Answerer}
<div class="replies">
{Replies}
</div>
{/block:Answer}
{block:RebloggedFrom}
<section class="attribution-tags clearfix">
<ul>
<li class="reblog">
<a class="reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a>
</li>
{block:ContentSource}
<li>
<a class="source-link" href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
</li>
{/block:ContentSource}
{block:HasTags}
{block:Tags}
<li>
<a href="{TagURL}" class="tag">{Tag}</a>
</li>
{/block:Tags}
{/block:HasTags}
</ul>
</section>
{/block:RebloggedFrom}
{block:NotReblog}
{block:HasTags}
<section class="attribution-tags clearfix">
<ul>
{block:ContentSource}
<li>
<a class="source-link" href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
</li>
{/block:ContentSource}
{block:Tags}
<li>
<a href="{TagURL}" class="tag">{Tag}</a>
</li>
{/block:Tags}
</ul>
</section>
{/block:HasTags}
{/block:NotReblog}
</section>
{block:Date}
<section class="panel">
<footer class="post-footer">
<section class="meta">
<ul class="date-notes">
{block:NoteCount}
<li class="post-notes">
<a href="{Permalink}#notes">{NoteCountWithLabel}</a>
</li>
{/block:NoteCount}
<li class="post-date">
<a href="{Permalink}" title="{TimeAgo}">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
</li>
</ul>
</section>
<section class="post-controls">
<ul>
<li class="share-control">
<nav class="pop">
<a href="#" class="share selector icon-export"></a>
<div class="pop-menu share-menu south" id="share_{PostID}">
<ul>
<li class="open-in-app"><a href="#" class="share-item open-in-app" data-post="{PostID}">Open in app</a></li>
<li><a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&amp;t={URLEncodedTitle}" class="share-item facebook" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" class="share-item twitter" target="_blank">Tweet</a></li>
<li><a href="mailto:?subject={URLEncodedShareString}&amp;body={URLEncodedMailSummary}" class="share-item mail">Mail</a></li>
<li><a href="{Permalink}" class="share-item permalink">{lang:Permalink} <i class="icon-arrow_carrot_right"></i></a></li>
</ul>
</div>
</nav>
</li>
<li class="reblog-control">{ReblogButton size="21" color="black"}</li>
<li class="like-control">{LikeButton size="20" color="black"}</li>
</ul>
</section>
</footer>
</section>
{/block:Date}
{block:PermalinkPage}
{block:PostNotes}
<section id="notes" class="notes-wrapper clearfix">
{PostNotes-64}
</section>
{/block:PostNotes}
{block:Date}
{block:IfDisqusShortname}
<section class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
{/block:IfDisqusShortname}
{/block:Date}
{/block:PermalinkPage}
</div>
</article>
{/block:Posts}
</div>
</section>
<footer id="footer" class="content clearfix">
{block:IndexPage}
{block:Pagination}
<div id="pagination">
{block:PreviousPage}
<a href="{PreviousPage}" class="previous" data-current-page="{CurrentPage}" data-total-pages="{TotalPages}">{lang:Previous}<span class="bg"></span></a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}" class="next" data-current-page="{CurrentPage}" data-total-pages="{TotalPages}">{lang:Next}<span class="bg"></span></a>
{/block:NextPage}
<div class="loader"><div class="loader-bar"></div><div class="loader-bar"></div><div class="loader-bar"></div></div>
</div>
{/block:Pagination}
{/block:IndexPage}
</footer>
</section>
<script>
var Optica = {};
Optica.ENDLESS_SCROLLING = {block:IfEndlessScrolling}true{/block:IfEndlessScrolling}{block:IfNotEndlessScrolling}false{/block:IfNotEndlessScrolling};
Optica.LAYOUT = "{select:Layout}";
Optica.GRID_LAYOUT = (Optica.LAYOUT === 'grid');
Optica.TITLE_COLOR = "{TitleColor}";
Optica.ACCENT_COLOR = "{AccentColor}";
Optica.BACKGROUND_COLOR = "{BackgroundColor}";
Optica.ENDLESS_NOTES_SCROLLING = {block:IfDisqusShortname}false{/block:IfDisqusShortname}{block:IfNotDisqusShortname}true{/block:IfNotDisqusShortname};
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="http://static.tumblr.com/vr9xgox/sBgmmjhyw/jquery-1.9.1.min.js"%3E%3C/script%3E'));</script>
<script src="http://static.tumblr.com/vr9xgox/Azhmnml1q/jquery.masonry.min.js"></script>
<script src="http://static.tumblr.com/vr9xgox/ihyn4svit/main-min.js"></script>
{block:IfGoogleAnalyticsID}
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{text:Google Analytics ID}', 'tumblr.com');
ga('send', 'pageview');
</script>
{/block:IfGoogleAnalyticsID}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment