Skip to content

Instantly share code, notes, and snippets.

@Wunkolo

Wunkolo/Pin-Dark.html

Last active August 29, 2015 14:22
Show Gist options
  • Save Wunkolo/4b2748fe78d15dafdac3 to your computer and use it in GitHub Desktop.
Save Wunkolo/4b2748fe78d15dafdac3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pin-Dark.html
<!DOCTYPE html>
<head>
<title>{Title}{block:PostTitle} | {PostTitle}{/block:PostTitle}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<meta charset="utf-8">
<meta name="color:Text" content="#ddd" />
<meta name="color:Background" content="#111" />
<meta name="color:ContentBackground" content="#151515" />
<meta name="color:Trims" content="#444" />
<meta name="color:TrimsSecondary" content="#555" />
<meta name="color:Links" content="#fef248" />
<meta name="color:AltLinks" content="#ff73ff" />
<meta name="color:Accents" content="#2e9930" />
<meta name="color:HeadlineLinks" content="#fc5a55" />
<meta name="color:PostInfo" content="#2d99d4" />
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
body
{
font-size: 14px;
font-family: "MS UI Gothic",
"Meiryo UI",
"MS PGothic",
"HiraKakuProN-W3";
color: {color:Text};
background-color: {color:Background};
margin:20px auto 0;
padding: 0;
width: 550px;
letter-spacing: 1px;
}
a
{
text-decoration:none;
color: {color:Links};
text-shadow: -1px 0 0 {color:Trims},0 -1px 0 {color:Trims}, 1px 0 0 {color:Trims},0 1px 0 {color:Trims};
letter-spacing: 1px;
}
blockquote
{
border-left: 1px dashed #666;
padding-left: 8px;
}
.block
{
border: 1px dotted {color:Trims};
background-color: {color:ContentBackground};
border-radius: 2px;
padding: 4px;
margin: 4px;
box-shadow: 0 0 8px black;
}
.fulljustify
{
text-align:justify;
}
.fulljustify:after
{
content: "";
display: inline-block;
width: 100%;
}
#footer
{
text-align: center;
}
#navi
{
font-size:16px;
height:18px;
}
.avi
{
width:64px;
border-radius: 4px;
border: 4px double {color:TrimsSecondary};
margin-left: 0px;
}
.avidesc
{
word-wrap: break-word;
border-radius: 4px;
border: 4px double {color:TrimsSecondary};
margin-bottom: 5px;
margin-top: -88px;
margin-left: 76px;
min-height: 64px;
padding: 4px;
text-align: left;
display: block;
}
.postinfo
{
font-size: 10px;
margin-bottom: 2px;
min-height:24px;
}
.postinfo a
{
color: {color:PostInfo};
}
.headline
{
font-size:36px;text-align:center;
}
.headline a
{
color: {color:HeadlineLinks};
}
.accent
{
color: {color:Accents};
}
.tags
{
text-align: left;
}
/*Post styles*/
.photo
{
display: block;
margin-left: auto;
margin-right: auto;
}
.chatline
{
font-size: 16px;
border-left: 1px dashed {color:TrimsSecondary};
border-bottom: 1px dashed #333333;
padding-left: 5px;
padding-bottom: 2px;
}
.chatline.odd
{
background-color: #222222;
}
.video
{
text-align: center;
}
.tumblr_video_container
{
margin-right: auto;
margin-left: auto;
}
.tmblr-full
{
text-align: center;
}
.source_tumblelog
{
color: {color:PostInfo};
}
.read_more_container
{
text-align: center;
padding: 4px;
border: 1px dotted {color:Trims};
border-radius: 4px;
box-shadow: 0 0 6px black;
}
.audio
{
text-align: center;
}
.player
{
margin:2px 2px 0px 2px;
border: 1px dotted {color:Trims};
background-color: {color:ContentBackground};
border-radius: 4px;
padding: 4px;
min-height:138px;
}
.songdetails
{
border-radius: 4px;
border: 4px double {color:TrimsSecondary};
overflow:auto;
min-height: 130px;
}
.imageset
{
text-align: center;
}
.speech
{
border-radius: 4px;
border: 4px double {color:TrimsSecondary};
overflow:auto;
margin-bottom: 8px;
min-height: 96px;
padding: 8px;
font-size:16px;
}
hr
{
overflow: hidden;
font-size: 1px;
margin-top: 5px;
margin-bottom: 1px;
border-color: {color:Trims};
}
.tumblr_audio_player
{
height: 50px;
width: 100%;
border-bottom: 4px double {color:TrimsSecondary};
}
.tumblr_video_container
{
width:100%;
}
ol.notes
{
padding:0;
list-style-type:none;
overflow:auto;
}
ol.notes li.note
{
display: list-item;
text-align:left;
padding:5px;
}
ol.notes li.note img.avatar
{
margin-right: 8px;
}
#tooltip
{
border: 1px dotted {color:Trims};
background-color: {color:ContentBackground};
border-radius: 2px;
padding: 4px;
position: absolute;
z-index:1000;
visibility: hidden;
display:none;
box-shadow: 2px 2px 4px black;
font-size: 10px;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<div id="Header" class="block">
{block:ShowAvatar}
<div >
<a title="{Title}" href="{BlogURL}">
<img src={PortraitURL-64} class="avi"></img
</a>
</div>
{/block:ShowAvatar}
<br>
<div class="avidesc">
<a style="font-size:22px;color:{color:HeadlineLinks}" title="{Title}" href="{BlogURL}">{Title}</a>
<hr>
{block:Description}
<span style="font-size:12px;">
{Description}
</span>
<hr>
{/block:Description}
<div style="font-size:12px;float:right;" class="accent">
{block:AskEnabled}
<a title="{AskLabel}" style="color:{color:HeadlineLinks}" href="/ask">Ask</a> |
{/block:AskEnabled}
{block:SubmissionsEnabled}
<a title="{SubmitLabel}" style="color:{color:AltLinks}" href="/submit">{SubmitLabel}</a> |
{/block:SubmissionsEnabled}
{block:HasPages}
{block:Pages}
<a title="{Label}" href="{URL}">{Label}</a> |
{/block:Pages}
{/block:HasPages}
</div>
</div>
</div>
{block:Posts}
<div class="block">
{block:Text}
{block:Title}
<div class="headline">
<a href="{Permalink}">
{Title}
</a>
</div>
<br>
<div style="font-size:14px;float:right;">
&mdash;
</div>
<hr>
{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<a title="{PhotoAlt}" {block:LinkURL}href="{LinkURL}"{/block:LinkURL}>
<img class="photo" src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
<br>
<div style="font-size:14px;float:right;">
&mdash;
</div>
<hr>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photo}
{block:Photoset}
<div class="imageset">
{Photoset-500}
</div>
<hr>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<div class="headline fulljustify">
<q>{Quote}</q>
<br>
<div style="font-size:14px;float:right;">
&mdash;
{block:Source}
{Source}
{/block:Source}
</div>
<hr>
</div>
{/block:Quote}
{block:Link}
<div class="headline" {block:Thumbnail}style="background: linear-gradient(to bottom, rgba({RGBcolor:ContentBackground},0.75) 0%,rgba({RGBcolor:ContentBackground},1) 100%), url('{Thumbnail}') no-repeat;background-size:100%;"{/block:Thumbnail}>
<a href="{URL}" {Target} >
{Name}
</a>
<br>
{block:Excerpt}
<span style="font-size:14px;">{Excerpt}</span>
{/block:Excerpt}
<br>
<div style="font-size:14px;float:right;">
&mdash;
{block:Author}
{Author}
{/block:Author}
{block:Host}
{Host}
{/block:Host}
</div>
</div>
<hr>
{block:Description}
<div class="description">{Description}</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<div class="headline">
<a href="{Permalink}">{Title}</a>
</div>
{/block:Title}
{block:Lines}
<div class="chatline {Alt}"><strong>{Name}</strong> : {Line}</div>
{/block:Lines}
{/block:Chat}
{block:Video}
<div class="video">
{Video-500}
</div>
<div style="font-size:11px;float:right;">
<span style="font-size:14px;">&mdash;</span>
{PlayCountWithLabel}
</div>
<hr>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Video}
{block:Audio}
<div class="audio">
{block:AudioEmbed}
{AudioEmbed-500}
{/block:AudioEmbed}
{block:AudioPlayer}
<div class="player">
<div class="avi" style="width:128px;float:left;margin-right:4px;">
{block:AlbumArt}
<img src="{AlbumArtURL}" width="128">
{/block:AlbumArt}
</div>
<div class="songdetails">
{AudioPlayerBlack}
{block:TrackName}{TrackName}</p>{/block:TrackName}
{block:Artist}{Artist}</p>{/block:Artist}
{block:Album}{Album}</p>{block:Album}
</div>
</div>
{/block:AudioPlayer}
</div>
<div style="font-size:11px;float:right;">
<span style="font-size:14px;">&mdash;</span>
{block:PlayCount}{PlayCountWithLabel}{/block:PlayCount}
</div>
<hr>
{block:Caption}
{Caption}
{/block:Caption}
{/block:Audio}
{block:Answer}
<div style="float:left;margin-right:4px;">
<img class="avi" src="{AskerPortraitURL-64}">
</div>
<div class="speech">
<a href="">{Asker}</a>: {Question}
</div>
<hr><br>
<div>
{block:Answerer}
<br>
<div style="float:left;margin-right:4px;">
<img class="avi" src="{AnswererPortraitURL-64}">
</div>
<div class="speech">
<a href="">{Answerer}</a>: {Answer}
</div>
<hr><br>
{/block:Answerer}
{Replies}
</div>
{/block:Answer}
<br>
<div style="font-size:11px;float:right;" class="postinfo">
<span style="font-size:14px;">&mdash;</span>
{block:RebloggedFrom}
via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
src: <a href="{SourceURL}">{SourceTitle}</a>
{/block:ContentSource}
{block:Date}
<br>
<div style="text-align:right;">
<a href="{Permalink}">
{MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear}<br>
{24HourWithZero}:{Minutes}:{Seconds}
</a>
</div>
{/block:Date}
</div>
<hr>
<div class="postinfo">
{block:NoteCount}
<a style="color:{color:AltLinks};" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
<br>
{block:HasTags}
{block:Tags}
#<a href="{TagURL}">{Tag}</a>
{/block:Tags}
{/block:HasTags}
</div>
</div>
{/block:Posts}
<div>
{block:PostNotes}
<div id="notes" class="block">
{PostNotes-16}
</div>
{/block:PostNotes}
</div>
{block:Pagination}
<div id="navi" class="block" style="text-align: center;">
{block:PreviousPage}
<a href={PreviousPage} style="float:left">&lt;Newer</a>
{/block:PreviousPage}
{block:NextPage}
<a href={NextPage} style="float:right">Older&gt;</a>
{/block:NextPage}
</div>
{/block:Pagination}
</div>
<script type="text/javascript">
// Minimum distance from edges the tooltip will be
const TipMargin = 8;
$(document).ready(function()
{
var TouchEnabled = 'ontouchstart' in window;
var ToolTipElm = $('#tooltip');
$('a,span').each(function()
{
var CurElm = $(this);
var TipText = "";
if(CurElm.attr('title'))
{
TipText += $("<span/>",{html: CurElm.attr('title'),style:'color:{color:PostInfo}'}).get(0).outerHTML;
if(CurElm.attr('href'))
{
TipText += " <span class=\"accent\">|</span> " + $("<a/>",{ html: CurElm.attr('href')}).get(0).outerHTML;
}
}
else if(CurElm.attr('href'))
{
TipText += $("<a/>",{ html: CurElm.attr('href')}).get(0).outerHTML;
}
else
{
return;
}
if(TouchEnabled && CurElm.is('a'))
{
return;
}
CurElm.removeAttr('title');
CurElm.mousemove(function(e)
{
var DocElm = document.documentElement;
DocElm =
{
x: e ? e.pageX : DocElm.scrollLeft + event.clientX,
y: e ? e.pageY : DocElm.scrollTop + event.clientY,
};
var DocSize = document.body;
DocSize =
{
w: DocSize.clientWidth || window.innerWidth,
h: DocSize.clientHeight || window.innerHeight
};
var TipSize =
{
w:ToolTipElm.outerWidth(),
h:ToolTipElm.outerHeight()
};
var Vis = ToolTipElm.css('visibility') != 'visible';
if(Vis)
{
ToolTipElm.html(TipText).show();
}
ToolTipElm.offset(
{
left: DocElm.x + TipSize.w + TipMargin < DocSize.w ?
DocElm.x + TipMargin : Math.max(TipMargin, DocElm.x - TipSize.w - TipMargin),
top: DocElm.y + TipSize.h + TipMargin < DocSize.h ?
DocElm.y + TipMargin : DocSize.h - TipSize.h - TipMargin
});
if(Vis)
{
ToolTipElm.css('visibility','visible');
}
})
CurElm.mouseout(function()
{
ToolTipElm.css('visibility','hidden').hide();
})
})
})
</script>
<!--Don't be a rude dude and remove the credit yo-->
<span title="Theme made by Wunkolo!👌👌👌" style="float:right;font-size:11px;color:#444">{BlogURL} {CopyrightYears}</span>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment