Skip to content

Instantly share code, notes, and snippets.

@sherbondy

sherbondy/compatriot.html

Created March 12, 2010 01:54
Show Gist options
  • Save sherbondy/329962 to your computer and use it in GitHub Desktop.
Save sherbondy/329962 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
compatriot.html
<!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">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="if:Infinite scroll" content="1">
<!-- Default colors -->
<meta name="color:Primary" content="#af0000"/>
<meta name="color:Secondary" content="#000066"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Boxes" content="#e4e4e4"/>
<meta name="color:BoxesHover" content="#cccccc"/>
<meta name="color:Lines" content="#cccccc"/>
<meta name="color:Text" content="#000000"/>
<meta name="color:SubText" content="#666666"/>
<meta name="color:BoxText" content="#000000"/>
<title>{Title}
{block:DayPage}
// On {ShortMonth} {DayOfMonth}, {Year}
{/block:DayPage}
{block:TagPage}
// Tagged as &ldquo;{Tag}&rdquo;
{/block:TagPage}
{block:SearchPage}
// Searched for &ldquo;{SearchQuery}&rdquo;
{/block:SearchPage}
{block:PostSummary}
// {PostSummary}
{/block:PostSummary}
</title>
<link rel="shortcut icon" type="image/x-icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS"
href="{RSS}"/>
<style type="text/css">
/* @group Shared Elements */
* {
margin: 0;
padding: 0;
border: none;
font-size: inherit;
text-decoration: none;
font-weight: inherit;
font-style: inherit;
z-index: 0;
}
body {
font-family: Georgia;
border-top: 26px solid {color:Lines};
color: {color:Text};
}
b, strong {
font-weight: bold;
}
em {
font-style: italic;
}
strike {
text-decoration: line-through;
}
blockquote {
margin-left: 24px;
padding-left: 16px;
border-left: 1px dotted {color:Lines};
margin-bottom: 16px;
}
/* @end */
/* @group Colors */
h1 a:hover, #hlink:hover, h3 a, h3 a:visited, #footer a, #footer a:visited, #dropdown a, #pagination a, #alt_pagination a, .caption a, .notes a, .dropdown p a, .lquo, .tag_list a, div.reblog a, #following a, .notes blockquote a, .notes blockquote a:visited, #infinite_scroll span, a#toggle_notes {
color: {color:Secondary};
}
h1 a, h3 a:hover, #footer a:hover, #dropdown a:hover, #pagination a:hover, #alt_pagination a:hover, .caption a:visited, .rquo, div.reblog a:hover, div.reblog a:visited, #following a:hover, .notes blockquote a:hover, a#toggle_notes:hover, .tag_list a:visited {
color: {color:Primary};
}
.permalink, .audio, .tag_list a, .notes li {
background-color: {color:Boxes};
}
input#q:hover, input#q:focus, .permalink:hover, .current a.permalink, .tag_list a:hover {
background-color: {color:BoxesHover};
}
body, #dropdown, .post_info, #infinite_scroll, .follow_item, .follow_alt {
background-color: {color:Background};
}
.caption a, .notes a, #dropdown p a, .date:hover{
text-decoration: underline;
}
.caption a:hover, #dropdown p a:hover, .notes a:hover {
text-decoration: none;
}
/* @end */
/* @group Headers */
h1 {
text-align: center;
}
h1 a {
font-family: "Helvetica Neue", Helvetica, Arial;
font-weight: bold;
font-size: 80px;
text-transform: uppercase;
line-height: .8;
}
h2 {
font-size: 32px;
line-height: 2;
border-top: 1px solid {color:Lines};
color: {color:Text};
}
#term {
font-style: italic;
color: {color:SubText};
}
#following h2 {
border-top: none;
font-size: 24px;
}
h3 {
font-size: 32px;
margin-bottom: 16px;
}
/* @end */
/* @group Wrapper */
#wrapper {
width: 640px;
margin: 0 auto;
}
.caption p {
margin-bottom: 16px;
}
/* @end */
/* @group Head and Foot */
#header {
padding: 32px 0 16px 0;
text-align: center;
}
#footer {
text-align: center;
clear: both;
padding: 32px 0 64px;
}
/* @end */
/* @group Dropdown */
#dropdown {
display: none;
position: absolute;
width: 640px;
z-index: 1;
}
#description {
text-align: center;
color: {color:SubText};
margin-bottom: 16px;
font-style: italic;
}
#description p {
margin-bottom: 16px;
}
input#q {
border: none;
margin-bottom: 16px;
background: {color:Boxes} url('http://static.tumblr.com/3jc4ci5/4EUktfyyu/bsearch.png') no-repeat 8px 5px;
padding: 4px 32px;
outline: none;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
font-family: georgia;
width: 320px;
margin-top: 32px;
color: {color:BoxText};
}
#elsewhere {
border-top: 1px solid {color:Lines};
border-bottom: 1px solid {color:Lines};
padding: 16px 0;
clear: both;
}
#elsewhere li {
display: inline;
}
#elsewhere a {
padding: 16px;
}
/* @end */
/* @group Loader */
div#loader {
display: none;
text-align: center;
}
div#loader p {
display: inline;
font-size: 32px;
line-height: 2;
margin-left: 16px;
color: {color:SubText};
}
/* @end */
/* @group Pagination */
#pagination, #alt_pagination {
clear: both;
line-height: 2;
font-size: 32px;
text-align: center;
border-bottom: 1px solid {color:Lines};
margin-bottom: 32px;
overflow: hidden;
}
#pagination li, #alt_pagination li {
list-style: none;
float: left;
color: {color:SubText};
display: block;
width: 200px;
}
#alt_pagination li {
width: 320px;
}
#pagination li#curr_page {
width: 240px;
color: {color:Text};
}
a#older, a#newer{
display: block;
width: 200px;
}
#alt_pagination a#older, #alt_pagination a#newer {
width: 320px;
}
/* @end */
/* @group Post Info */
.post_info {
font-family: 'Lucida Grande', 'Lucida Sans';
clear: both;
float: right;
margin-left: 16px;
}
.datetime {
text-align: right;
float: left;
}
.date {
color: {color:Text};
font-size: 18px;
}
.time {
display: block;
font-size: 12px;
color: {color:SubText};
}
.permalink {
color: {color:BoxText};
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
width: 40px;
float: right;
margin-left: 8px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: hidden;
}
.permalink span.pound {
display: block;
font-size: 26px;
padding: 4px 0;
}
.permalink span.note_count {
display: block;
font-size: 16px;
padding: 10px 0;
}
.permalink.has_notes span.pound {
display: none;
}
/* @end */
/* @group Posts */
#content {
border-bottom: 1px solid {color:Lines};
padding-bottom: 16px;
}
.post {
padding: 16px;
padding-bottom: 0;
list-style: none;
border-top: 1px solid {color:Lines};
}
.caption ul, #content ol,
.player, .no_results {
margin-bottom: 16px;
}
.image {
margin-bottom: 16px;
}
.image a:hover img {
opacity: 0.75;
}
.caption {
line-height: 1.5;
margin-bottom: 16px;
margin-right: 32px;
}
.caption li {
margin-left: 24px;
}
.caption img {
max-width: 480px;
height: auto;
display: block;
margin-bottom: 16px;
}
/* @group Chat Post */
.convo {
margin-bottom: 16px;
list-style: none;
width: 480px;
}
.convo li {
line-height: 1.5;
border-bottom: 1px solid {color:Lines};
padding: 0 8px;
}
.convo span {
font-weight: bold;
}
.user_1 {
border-left: 8px solid {color:Secondary};
}
.user_2 {
border-left: 8px solid {color:Primary};
}
/* @end */
/* @group Quote Post */
.lquo {
margin-left: -16px;
}
.the_quote{
font-size: 32px;
margin-bottom: 16px;
font-family: 'Baskerville', 'Palatino Linotype';
}
.quote {
margin-left: 16px;
}
/* @end */
/* @group Audio Post */
.audio {
width: 400px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.audio .meta img {
display: block;
padding: 16px 16px 0;
width: 368px;
height: auto;
}
.audio .meta p {
padding: 8px 16px;
margin: 0;
border-bottom: 1px solid {color:Background};
}
.audio .player {
overflow: hidden;
padding: 4px 16px 4px 4px;
}
.audio .player .plays {
float: right;
display: block;
padding-top: 6px;
font-size: 16px;
font-family: 'Lucida Grande', 'Lucida Sans';
color: {color:BoxText};
}
.audio_player {
float: left;
height: 27px;
}
a.download {
display: block;
float: right;
width: 19px;
height: 24px;
text-indent: -9000px;
background: url('http://static.tumblr.com/3jc4ci5/dtEktfywn/bdownload.png') no-repeat;
margin: 2px 0 1px 16px;
opacity: 0.75;
}
a.download:hover {
opacity: 1.0;
}
a.download:active {
margin: 3px 0 2px 16px;
}
/* @end */
/* @end */
/* @group Post Bottom */
.post_bottom {
clear: both;
padding-bottom: 16px;
line-height: 2;
}
.tag_list {
margin-left: 32px;
}
.tag_title {
font-variant: small-caps;
color: {color:SubText};
}
.tag_list a {
margin-left: 8px;
padding: 4px 8px;
font-variant: small-caps;
border-bottom: 2px solid {color:Secondary};
}
.tag_list a:visited {
border-color: {color:Primary};
}
.tag_list a:hover {
color: {color:Text};
border-color: {color:Text};
}
div.reblog img {
display: block;
margin-top: 8px;
float: left;
width: 16px;
height: 16px;
}
div.reblog span {
margin-left: 16px;
color: {color:SubText};
font-variant: small-caps;
}
div.reblog a {
font-variant: normal;
}
/* @end */
/* @group Following */
#following h2:hover {
cursor: pointer;
}
.follow_item {
list-style: none;
float: left;
width: 160px;
border-bottom: 1px solid {color:Lines};
height: 24px;
overflow: hidden;
}
.follow_item span {
line-height: 1.5;
padding-left: 8px;
text-transform: capitalize;
float: left;
width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}
.follow_item img {
width: 24px;
height: 24px;
display: block;
float: left;
}
.follow_alt {
list-style: none;
float: left;
width: 32px;
height: 32px;
border: none;
padding: 0;
}
.follow_alt span {
display: none;
}
.follow_alt img {
width: 32px;
height: 32px;
float: left;
background: {color:Background};
}
.follow_alt img:hover {
z-index: 1;
position: absolute;
width: 40px;
height: 40px;
margin-left: -6px;
margin-top: -6px;
border: 2px solid {color:Secondary};
}
.follow_alt img:active {
border-color: {color:Primary};
}
/* @end */
/* @group Notes */
div.post h4 {
font-size: 20px;
margin-bottom: 16px;
text-align:center;
}
.notes {
list-style: none;
margin-bottom: 32px;
}
.notes li {
padding: 8px 16px;
line-height: 1.5;
margin-bottom: 8px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
}
.notes blockquote {
margin: 8px 16px;
border-color: {color:Text};
}
.notes a img.avatar {
width: 16px;
height: 16px;
vertical-align: -2px;
}
.notes li.reblog.without_commentary, .notes li.like.without_commentary {
display: none;
}
/* @end */
/* @group Code Snippets */
pre {
overflow: auto;
margin: 16px;
margin-right: 0;
background: #efefef;
padding: 8px 0;
}
code {
padding: 8px;
background: #efefef;
font-family: "Courier New", Courier, mono;
font-size: 14px;
}
/* @end */
/* @group Infinte Scroll Toggle */
#infinite_scroll {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
font-size: 24px;
padding: 16px 0;
opacity: 0;
display: none;
}
#infinite_scroll span {
font-weight: bold;
padding: 0 16px;
}
/* @end */
{CustomCSS}
</style>
<script src="http://static.tumblr.com/3jc4ci5/VLYkz5b9x/jqueries.js"
type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>
<a href="#">{Title}</a>
</h1>
<div id="dropdown">
<form action="/search" method="get">
<div>
<input type="text" id="q"
name="q" value="{SearchQuery}"/>
</div>
</form>
{block:Description}
<div id="description">
{Description}
</div>
{/block:Description}
<ul id="elsewhere">
<li><a href="/">Home</a></li>
<li><a href="{RSS}">Feed</a></li>
<li><a href="/archive">Archive</a></li>
{block:HasPages}
{block:Pages}
<li><a href="{URL}">{Label}</a></li>
{/block:Pages}
{/block:HasPages}
</ul>
</div>
</div>
{block:SearchPage}
<h2>{SearchResultCount} result<span id="plural">s</span>
for &ldquo;<span id="term">{SearchQuery}</span>&rdquo;</h2>
{/block:SearchPage}
{block:DayPage}
<h2>{DayOfWeek}, {Month} {DayOfMonth}, {Year}</h2>
{/block:DayPage}
{block:TagPage}
<h2>Tagged as &ldquo;<span id="term">{Tag}</span>&rdquo;</h2>
{/block:TagPage}
<div id="content">
{block:NoSearchResults}
<div class="post">
<div class="no_results">Sorry. I couldn't find what you were looking for.</div>
</div>
{/block:NoSearchResults}
<!--POSTS-->
{block:Posts}
<div class="post">
<div class="post_info">
{block:NewDayDate}
<div class="datetime">
<a class="new date" href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">
{ShortMonth} {DayOfMonth}</a>
<span class="time">{12Hour}:{Minutes} {AmPM}</span>
</div>
{/block:NewDayDate}
{block:SameDayDate}
<div class="datetime">
<a class="date" href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">
{ShortMonth} {DayOfMonth}</a>
<span class="time">{12Hour}:{Minutes} {AmPM}</span>
</div>
{/block:SameDayDate}
<a class="permalink {block:NoteCount}has_notes{/block:NoteCount}"
{block:PermalinkPage}href="#{block:NoteCount}toggle_notes{/block:NoteCount}"{/block:PermalinkPage}
{block:IndexPage}href="{Permalink}"{/block:IndexPage}>
<span class="pound">#</span>
{block:NoteCount}
<span class="note_count">{NoteCount}</span>
{/block:NoteCount}
</a>
</div>
{block:Text}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<div class="caption">{Body}</div>
{/block:Text}
{block:Photo}
<div class="image">
{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
</div>
{block:Caption}
<div class="caption">{caption}</div>
{/block:Caption}
{/block:Photo}
{block:Quote}
<div class="the_quote">
<big class="lquo">&ldquo;</big>{Quote}<big class="rquo">&rdquo;</big>
</div>
{block:Source}
<div class="quote caption">{Source}</div>
{/block:Source}
{/block:Quote}
{block:Link}
<h3><a href="{URL}" {target}>{Name}&raquo;</a></h3>
{block:Description}
<div class="caption">{Description}</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<h3><a href="{Permalink}">{Title}</a></h3>
{/block:Title}
<ul class="convo">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span>{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Video}
<div class="player">{Video-400}</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Video}
{block:Audio}
<div class="audio">
{block:Artist}
<div class="meta">
{block:AlbumArt}
<img src="{AlbumArtURL}" alt="{Artist}"/>
{/block:AlbumArt}
<p>
{block:TrackName}
<strong>{TrackName}</strong>
{/block:TrackName}
by <em>{Artist}</em>
</p>
</div>
{/block:Artist}
<div class="player">
{AudioPlayerGrey}
{block:ExternalAudio}
<a href="{ExternalAudioURL}" class="download">Download?</a>
{/block:ExternalAudio}
<span class="plays">
<strong>{FormattedPlayCount}</strong> Plays
</span>
</div>
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Audio}
<div class="post_bottom">
{block:RebloggedFrom}
<div class="reblog">
<img src="{ReblogParentPortraitURL-48}" alt="{ReblogParentName}"/>
<span>Via: <a href="{ReblogParentURL}">{ReblogParentTitle}</a></span>
</div>
{/block:RebloggedFrom}
{block:HasTags}
<div class="tag_list">
<span class="tag_title">Tagged as:</span>
{block:Tags}
<a href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
{block:PostNotes}
<h4>{NoteCountWithLabel}, <a href="#" id="toggle_notes">show trivial?</a></h4>
{PostNotes}
{/block:PostNotes}
</div>
{/block:Posts}
<!--POSTS-->
</div>
{block:IfInfiniteScroll}
<div id="loader">
<img src="http://static.tumblr.com/3jc4ci5/8EFktjh1o/ajax-loader.gif"
alt="loading"/>
<p>Loading more posts...</p>
</div>
{/block:IfInfiniteScroll}
{block:Pagination}
<ul id="pagination">
<!--PAGES-->
<li>
{block:NextPage}
<a id="older" href="{NextPage}">
{/block:NextPage}
&laquo; Older
{block:NextPage}</a>{/block:NextPage}
</li>
<li id="curr_page">
Page <a href="/page/{CurrentPage}">{CurrentPage}</a> of
<a href="/page/{TotalPages}">{TotalPages}</a>
</li>
<li>
{block:PreviousPage}
<a id="newer" href="{PreviousPage}">
{/block:PreviousPage}
Newer &raquo;
{block:PreviousPage}</a>{/block:PreviousPage}
</li>
<!--PAGES-->
</ul>
{/block:Pagination}
{block:PermalinkPagination}
<ul id="alt_pagination">
<li>
{block:PreviousPost}
<a id="older" href="{PreviousPost}">
{/block:PreviousPost}
&laquo; Older
{block:PreviousPost}</a>{/block:PreviousPost}
</li>
<li>
{block:NextPost}
<a id="newer" href="{NextPost}">
{/block:NextPost}
Newer &raquo;
{block:NextPost}</a>{/block:NextPost}
</li>
</ul>
{/block:PermalinkPagination}
{block:DayPagination}
<ul id="alt_pagination">
<li>
{block:PreviousDayPage}
<a id="older" href="{PreviousDayPage}">&laquo; {ShortMonth} {DayOfMonth}</a>
{/block:PreviousDayPage}
</li>
<li>
{block:NextDayPage}
<a id="newer" href="{NextDayPage}">{ShortMonth} {DayOfMonth} &raquo;</a>
{/block:NextDayPage}
</li>
</ul>
{/block:DayPagination}
{block:Following}
<div id="following">
<h2><a href="#following">Following</a>:</h2>
<ul>
{block:Followed}
<li class="follow_alt">
<a href="{FollowedURL}">
<img src="{FollowedPortraitURL-48}" alt="{FollowedName}"/>
<span>{FollowedName}</span>
</a>
</li>
{/block:Followed}
</ul>
</div>
{/block:Following}
<div id="footer">
<a href="http://www.tumblr.com/theme/171">Compatriot Theme</a>
by <a href="http://iam.tooepic.com">Ethan Sherbondy</a> /
Powered by <a href="http://tumblr.com">Tumblr</a>
</div>
</div>
{block:IfInfiniteScroll}
<div id="infinite_scroll">
<p>
<label for="scroll_toggle">Infinite Scrolling:
<span id="on_off"></span>
</label>
<input name="scroll_toggle"
id="scroll_toggle" type="checkbox" />
</p>
</div>
{/block:IfInfiniteScroll}
<script src="http://static.tumblr.com/3jc4ci5/w2Yktl7ph/cofunctions.js"
type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment