Skip to content

Instantly share code, notes, and snippets.

@andrewfulton

andrewfulton/minimalist_plus_disqus

Created December 13, 2011 12:13
Show Gist options
  • Save andrewfulton/1471922 to your computer and use it in GitHub Desktop.
Save andrewfulton/1471922 to your computer and use it in GitHub Desktop.
Download ZIP
Tumblr's minimalist theme WITH a disqus block
Raw
minimalist_plus_disqus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Theme: The Minimalist v1.
Design: The Minimalist (http://minimalist.co)
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>{Title}{block:PostSummary} | {PostSummary}{/block:PostSummary}{block:SearchPage} | {lang:Search results for SearchQuery}{/block:SearchPage}</title>
<meta name="description" content="{MetaDescription}" />
<meta name="if:Show description" content="1" />
<meta name="if:Show search" content="1" />
<meta name="text:Twitter name" content="" />
<meta name="text:Disqus Shortname" content="" />
<meta name="text:Google Analytics ID" content="" />
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
<!-- Styles -->
<link rel="stylesheet" href="http://static.tumblr.com/f1whv92/Mp9l6ewcg/reset.css" />
<style type="text/css">
/*----- GENERAL -----*/
header, footer, section, article, nav, aside {
display: block;
}
body {
background: #ffffff;
color: #222;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
padding-top: 25px;
text-align: center;
width:500px;
margin: 0 auto;
}
h1, h2, h3, hQ {
font-family: Cufon;
}
h1 {
font-size: 50px;
line-height: 50px;
}
h2 {
font-size: 31px;
line-height: 37px;
}
h3 {
font-size: 21px;
line-height: 27px;
}
a:link, a:visited {
color: #222222;
font-weight: bold;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
hr{
border:0 #ccc solid;
border-top-width:1px;
clear:both;
height:0;
}
ol{list-style:decimal}
ul{list-style:disc}
li{margin-left:30px}
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:15px}
#main {
padding: 0px;
}
/*----- MASTHEAD -----*/
.noMeta > div {
padding: 0px;
}
#masthead {
margin-bottom: 0px;
}
#masthead h1 {
margin-bottom: 0;
}
#masthead h1 a:link, #masthead h1 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}
#masthead h1 a:active {
outline: 0;
}
#masthead p {
font-family: Georgia, serif;
font-size: 20px;
color: #fff;
margin-bottom: 0;
}
#masthead a:link, #masthead a:visited {
color: #fff;
}
#siteDescription{
font-size: 13px;
color: #222;
text-transform: Uppercase;
border-top: 1px solid #222;
margin-top: 20px;
margin-bottom: -5px;
padding: 15px 0 0 0;
font-family: Cufon;
}
/*----- SEARCH FORM -----*/
#frmSearch {
padding-top: 20px;
display: none;
}
#txtSearch {
background: url(http://static.tumblr.com/bpryy0m/6lRl6gmys/search.jpg) left no-repeat;
width: 225px;
padding: 2px 0 0 20px;
font: 12px/12px Georgia, "Times New Roman", Times, serif;
color: #222;
border: 0px;
}
/*----- MAIN HEADER NAV STRIP -----*/
#mainNav {
border-top: 1px solid #222;
border-bottom: 2px solid #222;
margin-top: 20px;
padding: 15px;
font-family: Cufon;
}
#mainNav ul {
list-style: none;
margin: 0;
padding: 0;
}
#mainNav li {
margin: 5px;
display: inline;
padding: 0;
}
#mainNav a:link, #mainNav a:visited {
padding: 0;
font-size: 14px;
line-height: 14px;
margin: 0 2px;
text-decoration: none;
color: #222;
text-transform: Uppercase;
}
#mainNav a:hover, #mainNav a:active {
outline: none;
text-decoration: none;
border-bottom: 1px solid #222;
}
#mainNav a.active {
text-decoration: none;
border-bottom: 1px solid #222;
}
/*----- ARTICLE META INFO -----*/
#designline {
margin-top: 50px;
}
h5{
position: relative;
top: -35px;
margin-bottom: 0px;
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
border-bottom: 1px solid #bca474;
background: #fff;
}
h5 a:link, .line a:visited{
font-family: Georgia, serif;
font-size: 10px;
color: #bca474;
text-decoration: none;
text-transform: Uppercase;
font-weight: bold;
}
h5 a:hover{
text-decoration: underline;
}
h5 abbr{
display: inline-block;
position: relative;
margin: 0 auto;
padding: 0 8px;
background: #fff;
top: 10px;
}
h5.postDate a{
color: #bca474;
}
/*----- ARTICLE -----*/
article {
background: #fff;
margin-bottom: 20px;
text-align: left;
position: relative;
}
article img {
border: none;
margin-bottom: 15px;
max-width: 500px;
}
article p img {
margin: 0;
}
article > div {
padding: 0px;
overflow: hidden;
}
article .searchPage {
margin: 35px 0 0 0;
}
.searchPageText {
margin: 0 0 30px 0;
}
article .meta a:link, article .meta a:visited {
text-decoration: none;
}
article .meta a:hover, article .meta a:active {
text-decoration: underline;
}
article h2 {
text-align: center;
color: #222222;
}
article h2 a:link, article h2 a:visited {
text-transform: Uppercase;
color: #222;
text-decoration: none;
}
article h2 a:hover, article h2 a:active {
text-decoration: none;
border-bottom: 1px solid #222;
}
blockquote {
border-left: 2px solid #bca474;
margin-left: 0;
padding-left: 1em;
}
#quoteSource{
margin: 0 auto;
text-align: left;
}
#quoteText h2 {
text-align: left;
color: #222222;
}
article .chat {
list-style: none;
padding: 0;
margin: 0;
}
article .chat li {
margin: 0 0 2px;
padding: 2px 0 2px 0;
}
.photoCaption {
text-align: center;
}
/*----- AUDIO PLAYER -----*/
.audio {
height: 28px;
width: 26px;
overflow: hidden;
margin: auto;
padding-top: 7px;
}
.audioc {
background-image:url('http://static.tumblr.com/f1whv92/9iCl6bfgp/audiocircle.png');
background-repeat: no-repeat;
height: 41px;
width: 41px;
}
.audioCaption {
margin-top: 1px;
}
.audioleft {
width: 41px;
float: left;
}
.audioright {
width: 444px;
float: right;
}
.audioContainer {
margin-top: 5px;
}
.audioClear {
clear:both;
}
/*----- ARTICLE NOTES -----*/
.notes {
border-top: 1px solid #bca474;
list-style: none;
padding: 20px 0 5px 0;
margin: 30px 0 0 0;
}
.notes li {
margin: 0;
}
.notes .avatar {
margin: 0 5px 0 0;
position: relative;
top: 5px;
}
.notes blockquote {
margin: 10px 0 0 35px;
padding-left: 10px;
border-left: 2px solid #222222;
}
.media {
width: 500px;
margin-bottom: 20px;
}
/*----- PAGE NAVIGATION -----*/
#pageNav {
margin-top: 20px;
border-top: 1px solid #222;
}
#pageNav ul {
list-style: none;
padding: 10px 15px;
margin: 10px 0;
}
#pageNav li {
margin: 0;
display: inline;
}
#pageNav a:link, #pageNav a:visited {
font: 11px Georgia, "Times New Roman", Times, serif;
padding: 0;
margin: 0 2px;
background: #34hdf5;
color: #222;
text-decoration: none;
}
#pageNav a:hover, #pageNav a:active, #pageNav a.active:link, #pageNav a.active:visited {
text-decoration: underline;
}
#pageNavOlder:after {
content: " »";
font-size: 10px;
}
#pageNavNewer:before {
content: "« ";
}
/*----- FOOTER META -----*/
#sitemeta {
border-top: 2px solid #222;
color: #222;
padding: 20px 0 32px 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
}
#sitemeta p {
margin: 0;
}
#sitemeta a:link, #sitemeta a:visited {
color: #222;
font-weight: bold;
}
{CustomCSS}
</style>
<!-- Scripts -->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://static.tumblr.com/q9z1v7k/dgEkijh8r/cufon-yui.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/f1whv92/fgIl65bo1/cufon_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ fontFamily: "Cufon" });
Cufon.replace('h2',{ fontFamily: "Cufon" });
Cufon.replace('h3',{ fontFamily: "Cufon" });
Cufon.replace('#mainNav',{ fontFamily: "Cufon" });
Cufon.replace('#siteDescription',{ fontFamily: "Cufon" });
</script>
<script>
$(function() {
var search = $("#txtSearch").val();
var placeholder = "Search...";
var fadeToOpacity = 0.4;
$("#txtSearch").fadeTo("normal", fadeToOpacity);
if (search == "") {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").blur(function() {
search = $("#txtSearch").val();
if (!(search != "" && search != placeholder)) {
$("#txtSearch").val(placeholder);
}
$("#txtSearch").fadeTo("normal", fadeToOpacity);
});
$("#txtSearch").focus(function() {
search = $("#txtSearch").val();
if (search == placeholder) {
$("#txtSearch").val("");
}
$("#txtSearch").fadeTo("normal", 1);
});
$("#btnSearch").click(function() {
$("#frmSearch").slideToggle("normal");
$(this).toggleClass("active");
// $("#txtSearch").focus();
});
});
</script>
</head>
<body>
<header id="masthead" class="clearfix">
<div id="thehead">
<h1 class="cufon"><a href="/">{Title}</a></h1>
<form action="/search" method="get" id="frmSearch">
<input type="text" id="txtSearch" name="q" value="{SearchQuery}" />
</form>
{block:Description}
<div id="siteDescription">{Description}</div>
{block:Description}
<nav id="mainNav">
{block:HasPages}
{block:Pages}<li><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="/random">Random</a></li>
<li><a href="{RSS}">RSS</a></li>
<li><a href="javascript:;" id="btnSearch">Search</a></li>
{block:IfTwitterName}
<li><a href="http://twitter.com/{text:Twitter name}">Twitter</a></li>
{/block:IfTwitterName}
</nav>
</div>
</header>
<section id="main" class="clearfix">
<div class="layout">
{block:SearchPage}
<article>
<div>
<div class="searchPage">
<h2>Search results for <a href="{URLSafeSearchQuery}">{SearchQuery}</a></h2>
</div>
{block:NoSearchResults}
<div class="searchPageText">
<p>I’m sorry, but we couldn't find anything matching "<b>{SearchQuery}</b>". Suggestions:</p>
<ul>
<li>Make sure all words are spelled correctly.</li>
<li>Try different keywords.</li>
<li>Try more general keywords.</li>
</ul>
</div>
{/block:NoSearchResults}
</div>
</article>
{/block:SearchPage}
{block:TagPage}
<article>
<div>
<div class="searchPage">
<h2>Posts tagged <a href="{TagURL}">{Tag}</a></h2>
</div>
</div>
</article>
{/block:TagPage}
{block:Posts}
<div id="designline">
<h5 class="postDate">
<abbr>{block:Date}<a href="{Permalink}">{DayOfMOnth}{DayOfMonthSuffix} {ShortMonth} {Year}</a>{/block:Date}{block:NoteCount} | <a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}
</abbr>
</h5>
</div>
<article>
<div>
{block:Text}
{block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
{/block:Text}
{block:Photo}
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}<div class="photoCaption">{Caption}</div>{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="media">{Photoset-500}</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
{/block:Photoset}
{block:Quote}
<div id="quoteText"><h2>{Quote}</h2></div>
{block:Source}<div id="quoteSource"><p>&mdash;{Source}</p></div>{/block:Source}
{/block:Quote}
{block:Link}
<h2><a href="{URL}" {Target}>{Name}</a></h2>
{block:Description}
<div>{Description}</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h2>{Title}</h2>{/block:Title}
<ul class="chat">
{block:Lines}
<li>{block:Label}<strong>{Label}</strong>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Audio}
<div class="audioleft">
<div class="audioc">
<div class="audio">{AudioPlayerBlack}</div>
</div>
</div>
<div class="audioright">
<div class="audioCaption">{block:Artist}<b>{Artist}</b>{/block:Artist}
<p>&mdash;{block:TrackName}{TrackName}{/block:TrackName}</p>
</div>
</div>
<div class="audioClear"></div>
<div class="audioContainer">
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="media">{Video-500}</div>
{block:Caption}<div>{Caption}</div>{/block:Caption}
{/block:Video}
{block:Answer}
<h3>{Asker} asked: {Question}</h3>
{Answer}
{/block:Answer}
{block:Date}
{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}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{block:Date}
</div>
</article>
{/block:Posts}
{block:PermalinkPage}
<section>
<div id="disqus_thread" class="content"></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">{lang:View the discussion thread}</a></noscript></section>
{/block:PermalinkPage}
{block:PermalinkPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPost}<li><a href="{PreviousPost}" id="pageNavNewer">Previous</a></li>{/block:PreviousPost}
{block:NextPost}<li><a href="{NextPost}" id="pageNavOlder">Next</a></li>{/block:NextPost}
</ul>
</nav>
{/block:PermalinkPagination}
{block:Pagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousPage}<li><a href="{PreviousPage}" id="pageNavNewer">Newer</a></li>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<li><a href="{URL}" class="active">{PageNumber}</a></li>{/block:CurrentPage}
{block:JumpPage}<li><a href="{URL}">{PageNumber}</a></li>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<li><a href="{NextPage}" id="pageNavOlder">Older</a></li>{/block:NextPage}
</ul>
</nav>
{/block:Pagination}
{block:DayPagination}
<nav id="pageNav">
<ul class="clearfix">
{block:PreviousDayPage}<li><a href="{PreviousDayPage}">&laquo; {DayOfMonth} {ShortMonth}</a></li>{/block:PreviousDayPage}{block:NextDayPage}|<li><a href="{NextDayPage}">{DayOfMonth} {ShortMonth} &raquo;</a></li>{block:NextDayPage}
</ul>
</nav>
{/block:DayPagination}
</div><!-- END layout -->
</section>
<footer id="sitemeta">
<div class="clearfix">
<div class="thefooter">
<p><a href="http://www.tumblr.com/theme/12051">The Minimalist Theme</a> designed by <a href="http://minimalist.co">The Minimalist</a> | Powered by <a href="http://tumblr.com">Tumblr</a></p>
</div>
</div>
</footer>
{block:IfGoogleAnalyticsID}
<script type="text/javascript">var gaJsHost=(("https:"==document.location.protocol)?"https://ssl.":"http://www.");document.write(unescape("%3Cscript src='"+gaJsHost+"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker=_gat._getTracker("{text:Google Analytics ID}");pageTracker._trackPageview()}catch(err){}</script>
{block:IfGoogleAnalyticsID}
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment