Last active
May 6, 2017 21:20
-
-
Save Wunkolo/bf4268ba321a1f7564b0deab33814688 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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}"/> ©{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>🔗</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> {/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