Skip to content

Instantly share code, notes, and snippets.

@andyinabox
Created April 23, 2010 04:38
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 andyinabox/376180 to your computer and use it in GitHub Desktop.
Save andyinabox/376180 to your computer and use it in GitHub Desktop.
Notion tumbr theme
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>{Title}{block:PostTitle} : {PostTitle}{/block:PostTitle}</title>
<meta name="Description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}" />
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#1a1a1a"/>
<meta name="color:Header" content="#1a1a1a"/>
<meta name="color:Link" content="#FFFFFF"/>
<meta name="color:Border" content="#FFFFFF"/>
<meta name="color:Title and Description" content="#FFFFFF"/>
<meta name="color:Footer" content="#777777"/>
<meta name="color:Title" content="#01B6BD"/>
<meta name="color:Text" content="#777777"/>
<meta name="color:Audio" content="#000000"/>
<meta name="color:Month" content="#FFFFFF"/>
<meta name="color:Date" content="#000000"/>
<meta name="image:Background" content="http://static.tumblr.com/..."/>
<meta name="image:Header" content="http://static.tumblr.com/..."/>
<style type="text/css">
a img { border: none }
a:link { color:{color:Link}; text-decoration: none; border:none;}
a:visited { color:{color:Link}; text-decoration: none; }
body {
background:{color:Background} url('{image:Background}') fixed;
font-family:Helvetica, Arial, Sans-serif;
font-size:12px;
text-align:left;
color: {color:Text};
line-height: 18px;
position: relative;
margin: 0 0 0 0;
}
h1 {
font-size: 90px;
margin-bottom: 20px;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
h1#pageHeader a {
color: #fff;
/* text-shadow: 2px 2px 2px #1a1a1a */
}
li { list-style:none;)
}
#side {
position:fixed;
top: 308px;
width: 270px;
margin-left: 700px;
}
#side .intro {
font-variant: normal;
padding-top: 5px;
border-bottom: 1px solid {color:Border};
margin: 5px;
padding: 5px;
font-color:{color:Text};
font-size:12px;
}
#photoCredit {
color: #6b6d7c;
margin-left: 50px;
}
#container {
position:relative;
margin-left:60px;
width:840px;
height: auto;
margin-top:30px;
margin-bottom: 40px;
font-family:Helvetica, Arial, sans-serif;
font-size:30px;
line-height:48px;
}
#contentcontainer {
position: relative;
width: auto;
height: 200px;
margin-right:auto;
margin-bottom: 0px;
padding-top: 55px;
background-repeat:no-repeat;
background-position:top;
background:{color:Header} url('{image:Header}') fixed;
/*border-bottom: 5px solid #fff;*/
}
#post {
position: relative;
width: 620px;
height: auto;
top: 30px;
left: 40px;
font-size:18px;
line-height: 16px;
padding-bottom: 35px;
border-bottom: 1px solid {color:Border};
margin-bottom: 10px;
}
#footer {
color:{color:Footer};
position: relative;
width: 620px;
height: auto;
left: 40px;
font-size:14px;
margin-top: 20px;
line-height: 20px;
padding-top: 15px;
}
ol.notes {
padding: 0px;
list-style-type: none;
width: 620px;
margin-left: 40px;
margin-top: 30px;
}
ol.notes li.note {
border-bottom: solid 1px #ccc;
padding: 10px;
}
ol.notes li.note img.avatar {
vertical-align: -4px;
margin-right: 10px;
width: 16px;
height: 16px;
}
ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}
{CustomCSS}
</style>
</head>
<body>
<a name="top"><div id='contentcontainer'>
<div id="container"><h1 id="pageHeader"><a href="/">{Title}</a></h1><br />{Description}
</div><div style="clear:both;"></div>
</div>
</div>
<div id="side">
{block:HasPages}{block:Pages}<p class="intro"><a href="{URL}">{Label}</a></p>{/block:Pages} {/block:HasPages}
<p class="intro"><a href="{RSS}">RSS</a></p>
<p class="intro"><a href="/mobile">Mobile</a></p>
<p class="intro"><a href="/archive">Archive</a></p>
<br />
<p class="intro"><small> {block:PreviousPage}
<a href="{PreviousPage}">&larr; Previous</a> {/block:PreviousPage}
★ {block:NextPage}
<a href="{NextPage}">Next &rarr;</a>{/block:NextPage}
</small></p>
</div>
</div>
<div id="photoCredit"><p>(photo: Frank Lloyd Wright's <em>Broadacre City</em>. Taliesen, Wisconsin)<p></div>
{block:Posts}{block:Text}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="text" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="text" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="text">{block:Title}<a href="{Permalink}" style="color:{color:Title}; font-size:22px;">{Title}</a>{/block:Title}
{Body}<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
<div style="clear:both;"></div>
</div></a>
{/block:Text}{block:Photo}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="photo" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="photo" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="photo">{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}<br />
{block:Caption}{Caption}{/block:Caption}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
{/block:Photo}{block:Audio}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="audio" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="audio" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px;">{block:AlbumArt}<img src="{AlbumArtURL}" /> {/block:AlbumArt}
<div class="audio"><div style="background-color:{color:Audio}">{AudioPlayerBlack}</div><br />
{block:Artist}{Artist}{/block:Artist}{block:TrackName} — {TrackName}{/block:TrackName}
{block:Caption}{Caption}{/block:Caption}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
{/block:Audio}{block:PhotoSet}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="photoset" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="photoset" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="photoset">{Photoset-500}<br />
{block:Caption}{Caption}{/block:Caption}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
{/block:PhotoSet}{block:Video}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="video" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="video" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="video">{Video-500}<br />
{block:Caption}{Caption}{/block:Caption}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
{/block:Video}{block:Chat}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="chat" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="chat" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div></div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="chat">{block:Title}
<a style="color:{color:Title}; font-size:22px;">{Title}</a><br /><br />{/block:Title} {block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
{/block:Chat}{block:Link}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="link" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="link" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="link"><a style="color:{color:Title}; font-size:22px;" href="{URL}" class="link" {Target}>{Name}</a><br />
{block:Description}{Description}{/block:Description}
<br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
<div style="clear:both;"></div>
</div></a>
{/block:Link}{block:Quote}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="qoute" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="qoute" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="qoute"><a style="color:{color:Title}; line-height: 30px; font-size:30px;">{Quote}</a> — {Source}<br /><br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
<div style="clear:both;"></div>
</div></a>
{/block:Quote}{block:Answer}
<div id="post"><br><br>
<div style="width:80px; float:left;">
<div class="answer" id="news month" style="text-align:right; font-size:14px; color:{color:Month}; margin-left:0px;">{Month}</div>
<div class="answer" id="news date" style="text-align:right; line-height: 60px; font-size:64px; font-family:'Helvetica-Bold', sans-serif; color:{color:Date}; margin-right:0px;">{DayOfMonthWithZero}</div>
</div>
<div style="position:relative; width:500px; margin-left:100px; padding-left: 20px; line-height: 18px; font-size:12px; color:{color:Text}">
<div class="answer"><a style="color:{color:Title}; line-height: 30px; font-size:30px;">{Question}</a> — {Asker}<br />{Answer} <br />
This post has <a href="{Permalink}">{NoteCountWithLabel}</a>{block:HasTags} and tag:
{block:Tags}
<a href="{TagURL}"># {Tag}</a>
{/block:Tags}
{/block:HasTags}.<br />
<br type="_moz" /></div>
</div>
</div>
<div style="clear:both;"></div>
</div></a>
{/block:Answer}{block:NoteCount}{PostNotes}{/block:NoteCount}{/block:Posts}
<div id="footer"><a class="job">{Title}. Theme by <a href="http://laacuks.tumblr.com">Laacuks</a>, modified by <a href="http://notioncollective.com">The Notion Collective</a>. <div style="float:right"><form action="/search" method="get">
<input type="text" style="opacity:0.6;filter:alpha(opacity=40)" name="q" value="{SearchQuery}"/>
</form></div><br />
&nbsp;</div>
<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("UA-11064995-1");
pageTracker._trackPageview();
} catch(err) {}</script> </body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment