Skip to content

Instantly share code, notes, and snippets.

@taizooo

taizooo/gist:7715506

Created November 30, 2013 04:43
Show Gist options
  • Save taizooo/7715506 to your computer and use it in GitHub Desktop.
Save taizooo/7715506 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#666"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Header Background" content="#4AADF0"/>
<meta name="color:Title" content="#fff"/>
<meta name="color:Description" content="#094E7C"/>
<meta name="color:Date" content="#666"/>
<meta name="color:Permalinks" content="#4AADF0"/>
<meta name="color:Post Title" content="#222"/>
<meta name="color:Text" content="#222"/>
<meta name="color:Inline Link" content="#ff9900"/>
<meta name="color:Quote" content="#333"/>
<meta name="color:Quote Source" content="#666"/>
<meta name="color:Link Post" content="#ff9900"/>
<meta name="color:Conversation Background 1" content="#f4f4f4"/>
<meta name="color:Conversation Background 2" content="#e8e8e8"/>
<meta name="color:Conversation Border" content="#ccc"/>
<meta name="color:Conversation Text" content="#000"/>
<meta name="color:Photo Background" content="#ccc"/>
<meta name="color:Video Background" content="#eee"/>
<!-- END DEFAULT COLORS -->
<!-- DEFAULT SETTINGS -->
<meta name="image:Background" content="" />
<meta name="image:Header" content="" />
<meta name="font:Body" content="Helvetica" />
<meta name="if:Show Notes" content="1" />
<meta name="text:Disqus Shortname" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{Title}</title>
<link rel="icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<meta name="viewport" content="width=675"/> <!-- iPhone -->
{block:Description}<meta name="description" content="{MetaDescription}" />
{/block:Description}
<style type="text/css">
body {
color: {color:Text};
margin: 30px;
background-color: {color:Background};
background-image: url('{image:Background}') top left fixed repeat;
font-family: {font:Body};
}
#content {
width: 570px;
margin: auto;
padding: 35px;
background-color: {color:Content Background};
}
a {
color: {color:Inline Link};
}
h1 {
padding: 0px;
margin: 0px;
font: Normal 30px {font:Body};
line-height: 33px;
letter-spacing: -1px;
}
h1 a {
color: {color:Title};
text-decoration: none;
}
div#header {
background-color: {color:Header Background};
margin: -20px -20px 30px -20px;
padding: 20px 30px 10px 30px;
}
div#description {
font-size: 15px;
margin-top: 10px;
color: {color:Description};
}
div#description a {
color: {color:Description};
}
div#search {
text-align: right;
margin: 10px 0 0;
}
.date {
font: Normal 16px {font:Body};
color: {color:Date};
line-height: 32px;
height: 28px;
padding-top: 7px;
background: {color:Content Background} url
('/themes/3/stripes.gif') top repeat-x;
border-bottom: dotted 1px #bbb;
margin-bottom: 10px;
text-transform: uppercase;
}
.date a {
color: {color:Date};
text-decoration: none;
}
.post {
margin-bottom: 40px;
position: relative;
}
.post h2 {
font-weight: Normal;
font-size: 20px;
color: {color:Post Title};
margin: 0px 0px 10px 0px;
}
.post h2 a {
color: {color:Post Title};
text-decoration: none;
}
/* Regular Post */
.post .regular {
font-size: 12px;
line-height: 17px;
}
.post .regular blockquote {
font-style: italic;
}
.post img {
max-width: 500px;
}
.post blockquote img {
max-width: 150px;
}
/* Photo Post */
.post .photo {
padding: 18px;
background-color: {color:Photo Background};
}
.post .photo img {
border: solid 17px {color:Content Background};
}
.post .photo .caption {
font-size: 13px;
margin-top: 17px;
}
.post .photo .caption a {
color: {color:Text};
}
div.photo div.caption * {
display: inline;
margin: 0 2px 0 0;
padding: 0;
}
/* Quote Post */
.post div.quote {
padding: 0px 30px 0px 30px;
}
.post div.quote span.quote {
font-size: 28px;
letter-spacing: -1px;
color: {color:Quote};
}
.post div.quote span.quote a {
color: {color:Quote};
}
.post div.quote span.quote big.quote {
font-weight: bold;
font-size: 60px;
line-height: 0px;
vertical-align: -28px;
opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}
.post div.quote .source {
font-size: 16px;
color: {color:Quote Source};
}
.post div.quote .source a {
color: {color:Quote Source};
}
/* Link Post */
.post .link a.link {
font: Bold 30px {font:Body};
letter-spacing: -1px;
color: {color:Link Post};
text-decoration: none;
border-bottom: dotted 1px {color:Link Post};
line-height: 36px;
}
.post .link .description {
font-weight: normal;
font-size: 14px;
margin-top: 5px;
}
/* Conversation Post */
.post .conversation ul {
list-style-type: none;
margin: 0px 0px 5px 0px;
padding: 1px;
border: solid 5px {color:Conversation Border};
}
.post .conversation ul li {
font-size: 12px;
padding: 4px 0px 4px 8px;
color: {color:Conversation Text};
}
.post .conversation ul li span.label {
font-weight: bold;
}
.post .conversation ul li.odd {
background-color: {color:Conversation Background 1};
}
.post .conversation ul li.even {
background-color: {color:Conversation Background 2};
}
/* Audio Post */
.post .audio .caption {
margin-top: 5px;
font-size: 11px;
color: {color:Text};
}
.post .audio .caption a {
color: {color:Text};
}
/* Video Post */
.post .video {
width: 500px;
margin: auto;
padding: 35px;
background-color: {color:Video Background};
}
.post .video .caption {
margin-top: 15px;
font-size: 13px;
color: {color:Text};
}
.post .video .caption a {
color: {color:Text};
}
/* Footer */
#footer {
margin: 20px 0px 0px 0px;
text-align: center;
font-size: 18px;
}
#footer a {
text-decoration: none;
color: {color:Text};
}
#footer a:hover {
text-decoration: underline;
}
#footer p.tiny {
margin: 30px 0px 0px 0px;
font-size: 11px;
}
#footer p.tiny a {
text-decoration: underline;
color: {color:Text};
font-weight: bold;
}
#footer p.tiny .dim {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* Permalinks */
.post a.permalink,
.post .audio .caption a.permalink,
.post .quote .source a.permalink {
font-size: 10px;
font-weight: bold;
color: {color:Permalinks};
}
.searchresultcount {
text-align: center;
}
.query {
font-weight: bold;
}
ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #ccc;
}
ol.notes li.note {
border-top: 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 span.action {
font-weight: bold;
}
ol.notes li.note .answer_content {
font-weight: normal;
}
ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}
ol.notes li.note blockquote a {
text-decoration: none;
}
{CustomCSS}
</style>
</head>
<body>
<div id="content">
<div id="header">
<h1>
<a href="/">
{block:IfHeaderImage}
<img src="{image:Header}" />
{/block:IfHeaderImage}
{block:IfNotHeaderImage}
{Title}
{/block:IfNotHeaderImage}
</a>
</h1>
{block:Description}
<div id="description">
{Description}
</div>
{/block:Description}
<!--
<div id="search">
<form action="/search" method="get">
<input type="text" name="q"
value="{SearchQuery}"/>
<input type="submit" value="Search"/>
</form>
</div>
-->
</div>
{block:SearchPage}
<div class="searchresultcount">
<p>Your search for <span class="query">
{SearchQuery}</span> returned {SearchResultCount} result(s)</p>
</div>
{/block:SearchPage}
{block:Posts}
{block:NewDayDate}
<div class="date">
<a class="daylink" href="/day/{Year}/{MonthNumberWithZero}/{DayOfMonthWithZero}">{Month} {DayOfMonth}, {Year}</a>
</div>
{/block:NewDayDate}
<div class="post hentry">
{block:Regular}
<div class="regular">
{block:Title}<h2 class="entry-title"><a
href="{Permalink}">{Title}</a></h2>{/block:Title}
{Body}
<a href="{Permalink}" rel="bookmark" class="permalink">
{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}" class="permalink">
{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
{/block:Regular}
{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-500}"
alt="{PhotoAlt}"/>{LinkCloseTag}
<div class="caption entry-title">
{Caption}
<a href="{Permalink}" rel="bookmark"
class="permalink">{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}"
class="permalink">{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
</div>
{/block:Photo}
{block:Quote}
<div class="quote">
<span class="quote entry-title">
<big class="quote">&#147;</big> {Quote}
</span>
<div class="source">
{Source}
<a href="{Permalink}" rel="bookmark"
class="permalink">{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}"
class="permalink">{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
</div>
{/block:Quote}
{block:Link}
<div class="link">
<a href="{URL}" class="link" {Target}>{Name}</a>
<div class="description entry-title">
{Description}
<a href="{Permalink}" rel="bookmark"
class="permalink">{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}"
class="permalink">{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
</div>
{/block:Link}
{block:Conversation}
<div class="conversation">
{block:Title}<h2 class="entry-title"><a
href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul>
{block:Lines}
<li class="{Alt}">
{block:Label}<span class="label">{Label}
</span>{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
<a href="{Permalink}" rel="bookmark" class="permalink">
{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}" class="permalink">
{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
{/block:Conversation}
{block:Audio}
<div class="audio">
{AudioPlayerBlack}
<div class="caption entry-title">
{Caption}
<a href="{Permalink}" rel="bookmark"
class="permalink">{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}"
class="permalink">{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
</div>
{/block:Audio}
{block:Video}
<div class="video">
{Video-500}
<div class="caption entry-title">
{Caption}
<a href="{Permalink}" rel="bookmark"
class="permalink">{TimeAgo}</a>
{block:IfShowNotes}
&bull; <a href="{Permalink}"
class="permalink">{NoteCountWithLabel}</a>
{/block:IfShowNotes}
{block:IfDisqusShortname}
&bull; <a href="{Permalink}#disqus_thread"
class="permalink">view comments</a>
{/block:IfDisqusShortname}
</div>
</div>
{/block:Video}
{block:HasTags}
<div class="tags">
{block:Tags}
<span>
<a href="{TagURL}">{Tag}</a>
</span>
{/block:Tags}
</div>
{/block:HasTags}
</div>
{block:Permalink}
<div calss="rebloginfo">
{block:PostNotes}
<span>
{NoteCountWithLabel} :
</span>
{/block:PostNotes}
{block:RebloggedFrom}
<span>
reblog from <a href="{ReblogParentURL}">{ReblogParentName}</a>.
</span>
<span>
first post by <a href="{ReblogRootURL}">{ReblogRootName}</a>.
</span>
{/block:RebloggedFrom}
</div>
{/block:Permalink}
{block:IfShowNotes}{PostNotes}{/block:IfShowNotes}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus_thread"></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">View the discussion thread.</a></noscript>
<div style="text-align: right; margin-top: 5px">
<a href="http://disqus.com" class="dsq-brlink">blog
comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
{/block:Permalink}
{/block:IfDisqusShortname}
{/block:Posts}
<div id="footer">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}" rel="prev">&#171; Previous</a> &nbsp;&nbsp;
{/block:PreviousPage}
|
{block:NextPage}
<a href="{NextPage}" rel="next">Next &#187;</a>
{/block:NextPage}
{/block:Pagination}
{block:DayPagination}
{block:NextDayPage}
<a href="{NextDayPage}" rel="prev">&#171; {Month} {DayOfMonth}</a>
{/block:NextDayPage}
|
{block:PreviousDayPage}
<a href="{PreviousDayPage}" rel="next">{Month} {DayOfMonth} &#187;</a>
{/block:PreviousDayPage}
{/block:DayPagination}
<p class="tiny">
Browse the <a href="/archive">Archive</a>
&nbsp;<span class="dim">/</span>&nbsp;
Subscribe via <a href="{RSS}">RSS</a>
&nbsp;<span class="dim">/</span>&nbsp;
Powered by <a href="http://tumblr.com/">Tumblr</a><br />
<br />
All posts © their original owners.<br />
Writing is reusable solely under <a href="http://creativecommons.org/licenses/by/3.0/">the BY Creative Commons License.</a>
</p>
</div>
<div style="display:none">
<script type="text/javascript"><!--
hatena_counter_name = "taizooo";
hatena_counter_id = "12";
hatena_counter_ref = document.referrer+"";
hatena_counter_screen = screen.width + "x" + screen.height+","+screen.colorDepth;
//--></script>
<script type="text/javascript" src="http://counter.hatena.ne.jp/js/counter.js"></script>
<noscript><img src="http://counter.hatena.ne.jp/taizooo/12" border="0" alt="counter"></noscript>
</div>
</div>
{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}
</body>
</html>
Raw
gistfile2.css
::selection {
background: #00b4f5;
color: #f0f;
text-shadow: none;
}
a:hover {
background-color:#0f0 !important;
color: red !important;
}
h1 {
font-family: Georgia,"Times New Roman",Serif;
font-size: 3em;
}
div#description {
font-size: 0.6em;
text-align: right;
}
.post {
margin-top: 50px;
margin-bottom: 200px;
}
.post .regular blockquote {
border-left: 0.5em solid lightGrey;
padding-left: 0.5em;
margin-left: 0.0em;
margin-right: 0.5em;
}
.post .photo div.caption * {
}
.post .photo div.caption blockquote {
display: block;
margin: 1em 40px;
border-left: 0.5em solid lightGrey;
padding-left: 0.5em;
margin-left: 0.0em;
margin-right: 0.5em;
}
.post h2 {
font-weight: bold;
letter-spacing: -2px;
}
.post div.quote .source p {
font-size: 0.6em;
}
pre{
background-color: #000020 !important;
color: #00FF00 !important;
font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace !important;
font-size:12px !important;
padding: 5px !important;
line-height: 1.4 !important;
/* white-space: pre-wrap !important; */
}
ol.notes {
font-size: 0.4em;
}
.tags {
font-size: 10px;
}
.post .conversation ul {
border: solid 1px #CCC;
}
.post blockquote img {
max-width: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment