Skip to content

Instantly share code, notes, and snippets.

@Wunkolo

Wunkolo/aphelion.html

Last active May 6, 2017 21:20
Show Gist options
  • Save Wunkolo/bf4268ba321a1f7564b0deab33814688 to your computer and use it in GitHub Desktop.
Save Wunkolo/bf4268ba321a1f7564b0deab33814688 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
aphelion.html
<html>
<head>
<title>{Title}{block:PostTitle} | {PostTitle}{/block:PostTitle}{block:PostSummary} | {PostSummary}{/block:PostSummary}</title>
<meta charset="utf-8">
<meta name="color:Text" content="#a2a2a2" />
<meta name="color:Trim" content="#313032" />
<meta name="color:Background" content="#0e0e0f" />
<meta name="color:BackLight" content="#1f1e21" />
<meta name="color:Posts" content="#19181a" />
<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="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style type="text/css">
body
{
font-size:12px;
font-family:"MS UI Gothic","Meiryo UI","MS PGothic","HiraKakuProN-W3",monospace;
margin: 3em auto 0;
padding: 0;
letter-spacing: 1px;
color: {color:Text};
background-color: {color:Background};
}
#tooltip
{
background-color: {color:BackLight};
border: 1px solid {color:Trims};
z-index: 1000;
display:none;
position: absolute;
padding: 2px;
font-size: 10px;
box-shadow: 2px 2px 4px black;
max-width:500px;
overflow: hidden;
text-overflow: ellipsis;
}
strong, b
{
color: white;
font-weight: 300;
}
hr
{
border: 0;
height: 1px;
color: {color:Trim};
/*background-color: {color:Trim}*/
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), {color:Trim}, rgba(0,0,0,0));
}
pre
{
display: block;
font-size: 12px;
font-family: courier, monospace;
line-height: 16px;
word-wrap: normal;
word-break: normal;
white-space: pre;
letter-spacing: 1px;
vertical-align: baseline;
box-sizing: border-box;
overflow: auto;
border: 1px dashed {color:Trim};
margin: 0;
padding: 10px;
background-color: {color:Background};
box-shadow: inset 0px 0px 10px 0px rgba(1,1,1,1);
}
code
{
margin: 0;
padding: 2px;
border: 0;
display: inline;
font-size: 12px;
width: 100%;
color: {color:text};
border-radius: 5px;
}
::-webkit-scrollbar
{
width: 4px;
height: 4px;
}
::-webkit-scrollbar-thumb
{
background: {color:Text};
border-radius: 3px;
}
::-webkit-scrollbar-track {
background: {color:Trim};
}
a
{
color: inherit;
text-decoration: none;
}
h1
{
margin: 0;
padding: 8px;
font-size: 24px;
}
.info
{
padding: 4px;
font-size: 18px;
}
.post
{
border: 1px solid {color:Trim};
border-radius: 0 0 2px 2px;
margin-top: 1.5em;
background-color: {color:Posts};
}
.post a
{
border-bottom: dotted 1px white;
}
.post .caption
{
padding: 4px 8px 4px 8px;
}
.post .caption blockquote
{
border-left: solid 4px {color:Trim};
margin: 0 0 1em 0;
padding: 0.5em 0 0.5em 1em;
overflow: hidden;
}
.post .foot
{
font-size: 10px;
border-top: 1px solid {color:Trim};
background: {color:BackLight};
line-height: 16px;
word-wrap:break-word;
min-height: 2px;
}
.post .photo
{
max-width: 540px;
display: block;
margin-left: auto;
margin-right: auto;
}
.html_photoset
{
margin: auto;
width: 500px;
}
.post .media
{
background: {color:BackLight};
display: block;
max-width: 540px;
margin-left: auto;
margin-right: auto;
border-bottom: 1px solid {color:Trim};
}
.media iframe
{
width: 540px;
}
.media .audioplayer iframe
{
height: 90px;
opacity: .4;
}
.post .chat
{
display: list-item;
list-style-type: none;
text-align:left;
padding:5px;
border-top: 1px dotted {color:Trim};
}
.post .link
{
text-decoration: underline;
}
#content
{
margin-left: auto;
margin-right: auto;
margin-bottom: 4em;
max-width: 542px;
}
.tabs
{
margin-top: -1px;
font-size: 10px;
}
.tabs span
{
background: {color:BackLight};
border: 1px solid {color:Trim};
border-width: 0 1px 1px;
border-radius: 0 0 2px 2px;
display: block;
float: left;
padding: 2px;
margin: 0 2px 0 2px;
vertical-align: middle;
}
.tabs .right
{
float:right;
}
ol.notes
{
padding:0;
list-style-type:none;
overflow:auto;
}
ol.notes a
{
border: 0;
}
ol.notes li.note
{
display: list-item;
text-align:left;
padding:5px;
border-top: 1px dotted {color:Trim};
}
ol.notes li.note img.avatar
{
margin-right: 8px;
}
</style>
</head>
<body>
<div id="tooltip"></div>
<div id="content">
<header class="post">
<h1><a href="{BlogURL}">{Title}</a></h1>
<div class="foot info">
{Description}
</div>
</header>
<div class="tabs">
{block:AskEnabled}
<span><a href="/ask">{AskLabel}</a></span>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<span><a href="/submit">{SubmitLabel}</a></span>
{/block:SubmissionsEnabled}
{block:HasPages}
{block:Pages}
<span><a href="{URL}">{Label}</a></span>
{/block:Pages}
{/block:HasPages}
<span class="right"><img src="{PortraitURL-16}"/> &copy;{CopyrightYears}</span>
</div>
<hr>
<div style="clear:both;"></div>
{block:Posts}
<section class="post">
{block:Text}
<div class="caption">
{block:Title}<h1><b>{Title}</b></h1>{/block:Title}
{Body}
</div>
{/block:Text}
{block:Photo}
<div class="media">
<img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
</div>
<div class="tabs">
{block:Exif}
{block:Camera}
<span class="right">{Camera}</span>
{/block:Camera}
{block:Aperture}
<span class="right">{Aperture}</span>
{/block:Aperture}
{block:Exposure}
<span class="right">{Exposure}</span>
{/block:Exposure}
{block:FocalLength}
<span class="right">{FocalLength}</span>
{/block:FocalLength}
{/block:Exif}
{block:LinkURL}
<span class="right"><a href="{LinkURL}">{LinkURL}</a></span>
{/block:LinkURL}
</div>
{/block:Photo}
{block:Photoset}
{Photoset-500}
{/block:Photoset}
{block:Answer}
<div class="media caption" style="background: linear-gradient(to bottom, rgba({RGBcolor:BackLight},0.75) 0%,rgba({RGBcolor:BackLight},1) 100%), url('{AskerPortraitURL-128}') no-repeat center center;background-size:100%;">
<h3>{Asker} asked:</h3>
<blockquote>{Question}</blockquote>
</div>
<div class="tabs">
<span class="right"><img src="{AskerPortraitURL-24}"></span>
</div>
{block:Answerer}{Answerer}{/block:Answerer}
<div class="caption">
{Answer}
</div>
{/block:Answer}
{block:Quote}
<div class="media">
<h1>{Quote}</h1>
</div>
{block:Source}
<div class="tabs">
<span class="right"><h3>{Source}</h3></span>
</div>
{/block:Source}
<div style="clear:both;"></div>
{/block:Quote}
{block:Video}
<div class="media">
{Video-500}
</div>
<div class="tabs">
<span class="right">{PlayCountWithLabel}</span>
</div>
{/block:Video}
{block:Audio}
<div class="media" {block:AlbumArt}style="background: linear-gradient(to bottom, rgba({RGBcolor:BackLight},0.75) 0%,rgba({RGBcolor:BackLight},1) 100%), url('{AlbumArtURL}') no-repeat center center;background-size:100%;"{/block:AlbumArt}>
<div style="font-size:14px">
<div class="audioplayer">
{block:AudioPlayer}
{AudioPlayerBlack}
{/block:AudioPlayer}
</div>
{block:TrackName}
<div class="chat">
{TrackName}
</div>
{/block:TrackName}
{block:Album}
<div class="chat">
{Album}
</div>
{/block:Album}
{block:Artist}
<div class="chat">
{Artist}
</div>
{/block:Artist}
</div>
<div style="clear:both;"></div>
</div>
<div class="tabs">
{block:PlayCount}
<span class="right">{PlayCountWithLabel}</span>
{/block:PlayCount}
{block:ExternalAudio}
<span class="right"><a href="{ExternalAudioURL}" target="_blank">Download</a></span>
{/block:ExternalAudio}
</div>
<div style="clear:both;"></div>
{/block:Audio}
{block:Link}
<div class="media" {block:Thumbnail}style="background: linear-gradient(to bottom, rgba({RGBcolor:BackLight},0.75) 0%,rgba({RGBcolor:BackLight},1) 100%), url('{Thumbnail}') no-repeat center;background-size:100%;"{/block:Thumbnail} >
<a href="{URL}" {Target}>
<h1><span class="link">{Name}</span>&#128279;</h1>
<h3 class="caption">{Excerpt}</h3>
</a>
</div>
<div class="tabs">
{block:Author}
<span>{Author}</span>
{/block:Author}
{block:Host}
<span class="right">{Host}</span>
{/block:Host}
</div>
<div style="clear:both;"></div>
{block:Description}
<div class="caption">
{Description}
</div>
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<div class="media">
<h1>{Title}</h1>
</div>
{/block:Title}
{block:Lines}
<div class="chat">
{Line}
</div>
{/block:Lines}
{/block:Chat}
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
<section class="foot">
{block:HasTags}
<span style="display:inline-block;width:250px;padding:2px">
{block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
</span>
{/block:HasTags}
</section>
</section>
<div class="tabs">
{block:RebloggedFrom}
<span>
ori:<a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-16}" alt="{ReblogRootTitle}"/></a>
via:<a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-16}" alt="{ReblogParentTitle}"/></a>
</span>
{/block:RebloggedFrom}
{block:Date}
<span class="right">
<a href="{Permalink}">{MonthNumberWithZero}/{DayOfMonthWithZero}/{ShortYear}</a>
</span>
{/block:Date}
{block:NoteCount}
<span class="right">
<a href="{Permalink}#notes">{NoteCountWithLabel}</a>
</span>
{/block:NoteCount}
</div>
<div style="clear:both;"></div>
{/block:Posts}
{block:PermalinkPage}
<section class="post">
{block:PostNotes}
<div id="notes">
{PostNotes-16}
</div>
{/block:PostNotes}
</section>
{/block:PermalinkPage}
{block:Pagination}
<section class="post">
<hr>
<section class=foot>
<br>
</section>
</section>
<div class="tabs" style="font-size:16px;">
{block:PreviousPage}
<span><a href="{PreviousPage}">Newer</a></span>
{/block:PreviousPage}
{block:JumpPagination length="15"}
{block:CurrentPage}
<span><b>{PageNumber}</b></span>
{/block:CurrentPage}
{block:JumpPage}
<span><a href="{URL}">{PageNumber}</a></span>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<span><a href="{NextPage}">Older</a></span>
{/block:NextPage}
</div>
<div style="clear:both"></div>
{/block:Pagination}
</div>
<script type="text/javascript">
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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment