Last active
November 28, 2017 11:26
-
-
Save tjb0607/6127425c393affa403de to your computer and use it in GitHub Desktop.
i3-gaps theme for tumblr
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"/> | |
<title>{title}</title> | |
<link rel="shortcut icon" href="{Favicon}"> | |
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/bwey4ra/4Hynod13t/i3-numix-tumblr.css"> | |
<meta name="viewport" content="width=600px"/> | |
<script> | |
var cursorBlinker; | |
var cursorBlinking = false; | |
var minSidebarWinHeight = 65; /* including 10px margin */ | |
function MakeActive(win) { | |
if ( win.id != "active-window" ) { | |
try { | |
document.getElementById("active-window").id = ""; | |
} catch(e) {} | |
win.id = "active-window"; | |
cursorBlinking = false; | |
clearTimeout(cursorBlinker); | |
cursorBlink(); | |
} | |
} | |
function pad(n) { | |
return n<10 ? '0'+n : n; | |
} | |
function i3status() { | |
var d = new Date(); | |
dateString = d.getFullYear()+'-' | |
+ pad(d.getMonth()+1)+'-' | |
+ pad(d.getDate())+' ' | |
+ pad(d.getHours())+':' | |
+ pad(d.getMinutes())+':' | |
+ pad(d.getSeconds()); | |
document.getElementById("i3status-date").innerHTML = dateString; | |
setTimeout(i3status, 1000 - Date.now() % 1000); | |
} | |
function cursorBlink() { | |
var arr = document.getElementById("active-window").getElementsByClassName("cursor"); | |
if ( arr.length != 0 ) { | |
var elem = arr[0]; | |
if ( cursorBlinking == false || elem.innerHTML == "" ) { | |
elem.innerHTML = " " | |
} else { | |
elem.innerHTML = ""; | |
} | |
cursorBlinking = true; | |
cursorBlinker = setTimeout(cursorBlink, 500); | |
} | |
} | |
function doResize() { | |
var w = window.innerWidth; | |
var h = window.innerHeight; | |
if ( w <= 1000 ) { | |
document.getElementsByClassName("mobile-info")[0].style.display = "inherit"; | |
document.getElementById("sidebar").style.display = "none"; | |
document.getElementById("content").style.left = "35px"; | |
} else { | |
document.getElementsByClassName("mobile-info")[0].style.display = "none"; | |
document.getElementById("sidebar").style.display = "inherit"; | |
document.getElementById("content").style.left = "475px"; | |
} | |
/* and now for the tricky part - resizing the sidebar's windows to fit perfectly */ | |
var c = document.getElementById("sidebar").children; | |
var i = 1; | |
var l = c.length; | |
var done = false; | |
while (i < l - 1) { | |
if (c[i].parentNode.getBoundingClientRect().bottom < (c[i].getBoundingClientRect().top + c[i].scrollHeight + (l - i - 1) * minSidebarWinHeight) + 10) { | |
var newHeight = c[i].parentNode.getBoundingClientRect().bottom - c[i].getBoundingClientRect().top - (l - i - 1) * minSidebarWinHeight - 10; | |
if (newHeight > (minSidebarWinHeight - 10)) | |
c[i].style.height = newHeight + "px"; | |
else | |
c[i].style.height = minSidebarWinHeight - 10 + "px"; | |
} else { | |
c[i].style.height = ""; | |
} | |
i++; | |
} | |
c[i].style.height = c[i].parentNode.getBoundingClientRect().bottom - c[i].getBoundingClientRect().top - 14 + "px"; | |
} | |
/* http://stackoverflow.com/questions/641857/javascript-window-resize-event */ | |
function addEvent(elem, type, eventHandle) { | |
if (elem == null || typeof(elem) == 'undefined') return; | |
if ( elem.addEventListener ) { | |
elem.addEventListener( type, eventHandle, false ); | |
} else if ( elem.attachEvent ) { | |
elem.attachEvent( "on" + type, eventHandle ); | |
} else { | |
elem["on"+type]=eventHandle; | |
} | |
} | |
</script> | |
</head> | |
<body id="i3-gaps-tumblr"> | |
<div id="i3bar"> | |
<div class="left"> | |
{block:Pagination} | |
{block:JumpPagination length="5"} | |
{block:CurrentPage} | |
<div class="page-button page-button-active"> | |
{PageNumber} | |
</div> | |
{/block:CurrentPage} | |
{block:JumpPage} | |
<a href="{URL}"> | |
<div class="page-button"> | |
{PageNumber} | |
</div> | |
</a> | |
{/block:JumpPage} | |
{/block:JumpPagination} | |
{/block:Pagination} | |
</div> | |
<div class="right"> | |
<div id="i3status"> | |
<span class="i3status-block"><script language="JavaScript" src="http://tc.freehostedscripts.net/tcounter.php?url=CHANGEME&name=followers"></script></span> | |
<span class="i3status-block i3status-separator">|</span> | |
<span class="i3status-block"><script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=CHANGEME&name=visits"></script></span> | |
<span class="i3status-block i3status-separator">|</span> | |
<span class="i3status-block" style="color:#87ff00"><script language="JavaScript" src="http://s1.freehostedscripts.net/ocounter.php?site=CHANGEME&e1=online&e2=online"></script></span> | |
<span class="i3status-block i3status-separator">|</span> | |
<span id="i3status-date" class="i3status-block"></span> | |
<script type="text/javascript">i3status();</script> | |
</div> | |
</div> | |
</div> | |
<div id="workspace"> | |
<div id="confirm"> | |
<div id="confirm-window" class="window"> | |
<div class="urxvt"> | |
Are you at least 18 years old and willing to go here?<br/> | |
There's a bunch of giantess fetish porn and other shit. You've been warned.<br/> | |
<a href="http://nsfw0607.tumblr.com">yes</a> / <span class="jslink" onclick="this.parentNode.parentNode.parentNode.style.display = 'none'">no</span> | |
</div> | |
</div> | |
<div id="confirm-bg" onclick="this.parentNode.style.display = 'none'"></div> | |
</div> | |
<div id="sidebar"> | |
<div id="active-window" class="sidebar-child sidebar-top window" onmouseover="MakeActive(this);"> | |
<div class="blog-title urxvt"> | |
<a href="/"> | |
<p class="big" style="font-family: Braille; line-height: 12px"> | |
<br/> | |
⡗⡄⢸⢀⠤⢄⢠⠀⡠⡀⢠⠀⠀⡔⠉⠑⢀⠤⢄⢸⢸⢀⠤⢄⢀⠤⢄⢼⠄⡅⣇⠤⡀⡇⡠⠤⡀<br/> | |
⡇⠘⢼⠸⣉⡩⠀⢣⠃⢣⠃⠀⠀⠣⣀⡠⠸⣀⡸⢸⢸⠸⣉⡩⠸⣀⡠⢸⡀⡇⡧⣀⠇⡇⢏⣉⠅<br/> | |
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/> | |
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⠉⢢⢨⢀⠤⢄⢸⢀⠄⠀⠀⢰⢱⠀⢠⡠⢼⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/> | |
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⣀⠜⢸⠸⣀⡠⢸⠳⡀⠀⢠⠓⠒⢣⢸⠀⢸⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/> | |
<br/> | |
</p> | |
<p class="small"> | |
tjb0607's blog | |
</p> | |
</a> | |
<p class="short-info"> | |
<span class="info"> | |
Tyler | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
19 | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
Oregon | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
INTP | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
he/him/his | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
cishet | |
</span> | |
</p> | |
</div> | |
</div> | |
<div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
<div class="urxvt"> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> cat ~/.config/tumblr/blogdescription.txt<br/> | |
</p> | |
<p class="blogdescription"> | |
{block:Description} | |
{Description} | |
{/block:Description} | |
</p> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> | |
<span class="cursor"> </span> | |
</p> | |
</div> | |
</div> | |
<div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
<div class="urxvt"> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> cd links<br/> | |
</p> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~/links</span> <span style="color: #7e8e91; font-weight: 700">%</span> tree<br/> | |
</p> | |
<code class="tree"> | |
<span style="color: #17A4D6;font-weight: 700">.</span><br/> | |
├── <a href="/ask">ask</a><br/> | |
├── <a href="/submit">submit</a><br/> | |
├── <a href="/rss">rss</a><br/> | |
├── <span style="color: #17A4D6;font-weight: 700">pages</span><br/> | |
│ └── <a href="/about">about</a><br/> | |
├── <span style="color: #17A4D6;font-weight: 700">tags</span><br/> | |
│ ├── <a href="/tagged/stuff-i-did">stuff-i-did</a><br/> | |
│ └── <a href="/tagged/jade-harley">jade-harley</a><br/> | |
├── <span style="color: #17A4D6;font-weight: 700">external</span><br/> | |
│ ├── <span style="color: #17A4D6;font-weight: 700">my websites</span><br/> | |
│ │ ├── <a href="http://upd8.ninja">upd8.ninja</a><br/> | |
│ │ └── <a href="http://tjb0607.me">tjb0607.me</a><br/> | |
│ └── <span style="color: #17A4D6;font-weight: 700">other cool blogs</span><br/> | |
│ ├── <a href="http://chibigaia-art.tumblr.com/post/117449151861/anon-said-to-chibigaia-art-but-hear-me-out">icon credit</a><br/> | |
│ └── <a href="http://uptrex.tumblr.com">my moirail <></a><br/> | |
└── <span style="color: #17A4D6;font-weight: 700">misc</span><br/> | |
└── <span class="jslink" onclick="document.getElementById('confirm').style.display = 'inherit'">NSFW blog</a><br/> | |
</code> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~/links</span> <span style="color: #7e8e91; font-weight: 700">%</span> | |
<span class="cursor"> </span> | |
</p> | |
</div> | |
</div> | |
<div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
<div class="urxvt"> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> cat ~/.config/tumblr/following.txt<br/> | |
</p> | |
<p class="following"> | |
{block:Following} | |
{block:Followed} | |
<a href="{FollowedURL}">{FollowedName}</a><br/> | |
{/block:Followed} | |
{/block:Following} | |
</p> | |
<p class="prompt"> | |
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> | |
<span class="cursor"> </span> | |
</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div id="content"> | |
<div class="window mobile-info" onmouseover="MakeActive(this);"> | |
<div class="urxvt blog-title"> | |
<a href="/"> | |
<p class="small"> | |
tjb0607's blog | |
</p> | |
</a> | |
<p class="short-info"> | |
<span class="info"> | |
Tyler | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
19 | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
Oregon | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
INTP | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
he/him/his | |
</span> | |
<span class="separator">|</span> | |
<span class="info"> | |
cishet | |
</span> | |
</p> | |
</div> | |
</div> | |
<script type="text/javascript">doResize();</script> | |
{block:Posts} | |
<div class="window" onmouseover="MakeActive(this);"> | |
<div class="urxvt post"> | |
{block:Date} | |
<div class="post-header"> | |
<div class="left"> | |
{block:NotReblog} | |
<p> | |
<a href="{Permalink}" title="{DayOfWeek} {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}"> | |
posted {TimeAgo} | |
</a> | |
</p> | |
{/block:NotReblog} | |
{block:Reblog} | |
<p> | |
<a href="{Permalink}" title="{DayOfWeek} {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}">reblogged {TimeAgo}</a> | |
from | |
<a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> | |
</p> | |
{/block:Reblog} | |
</div> | |
<div class="right"> | |
{block:ContentSource} | |
<p> | |
(source: <a href="{SourceURL}">{SourceTitle}</a>) | |
</p> | |
{/block:ContentSource} | |
</div> | |
</div> | |
{/block:Date} | |
<div class="post-body"> | |
{block:Text} | |
{block:Title} | |
<h2 class="title"><a href="{Permalink}"> | |
{Title} | |
</a></h2> | |
{/block:Title} | |
{Body} | |
{block:Text} | |
{block:Photo} | |
<a href="{PhotoURL-HighRes}">{block:LinkURL}<a href="{LinkURL}">{/block:LinkURL}<img src="{PhotoURL-1280}" alt="{PhotoAlt}"/>{block:LinkURL}</a>{/block:LinkURL}</a> | |
{block:Caption} | |
{Caption} | |
{/block:Caption} | |
{/block:Photo} | |
{block:Panorama} | |
{LinkOpenTag} | |
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/> | |
{LinkCloseTag} | |
{block:Caption} | |
{Caption} | |
{/block:Caption} | |
{/block:Panorama} | |
{block:Photoset} | |
{Photoset} | |
{block:Caption} | |
{Caption} | |
{/block:Caption} | |
{/block:Photoset} | |
{block:Quote} | |
<div class="quote">{Quote}</div> | |
{block:Source} | |
{Source} | |
{/block:Source} | |
{/block:Quote} | |
{block:Link} | |
<h2 class="link"> | |
<a href="{URL}" {Target}>{Name}</a> | |
</h2> | |
{block:Description} | |
{Description} | |
{/block:Description} | |
{/block:Link} | |
{block:Chat} | |
{block:Title} | |
<h2 class="title"><a href="{Permalink}"> | |
{Title} | |
</a></h2> | |
{/block:Title} | |
{block:Lines} | |
<p> | |
{block:Label} | |
<span style="font-weight:700">{Label}</span> | |
{/block:Label} | |
{Line} | |
</p> | |
{/block:Lines} | |
{/block:Chat} | |
{block:Video} | |
{Video-500} | |
{block:Caption} | |
{Caption} | |
{/block:Caption} | |
{/block:Video} | |
{block:Audio} | |
{AudioEmbed} | |
{block:Caption} | |
{Caption} | |
{/block:Caption} | |
{/block:Audio} | |
</div> | |
{block:Date} | |
<div class="post-footer"> | |
<div class="left"> | |
<p><a href="{Permalink}">{NoteCountWithLabel}</a></p> | |
<p class="tags"> | |
{block:HasTags} | |
Tagged: | |
{block:Tags} | |
<a href="{TagURL}">#{Tag}</a> | |
{/block:Tags} | |
{/block:HasTags} | |
</p> | |
</div> | |
<div class="right"> | |
<div class="buttons"> | |
<div class="reblogbutton"> | |
{ReblogButton} | |
</div> | |
<div class="likebutton"> | |
{LikeButton} | |
</div> | |
</div> | |
</div> | |
</div> | |
{/block:Date} | |
{block:PostNotes} | |
<div class="PostNotes"> | |
{PostNotes} | |
</div> | |
{/block:PostNotes} | |
</div> | |
</div> | |
{/block:Posts} | |
{block:Pagination} | |
<div id="nav"> | |
{block:PreviousPage} | |
<div class="window prev-page-window" onmouseover="MakeActive(this);"> | |
<a href="{PreviousPage}"> | |
<div class="urxvt"> | |
<p> | |
<== | |
</p> | |
</div> | |
</a> | |
</div> | |
{/block:PreviousPage} | |
<div class="window current-page-window" onmouseover="MakeActive(this);"> | |
<div class="urxvt"> | |
<p> | |
Page {CurrentPage} of {TotalPages} | |
</p> | |
</div> | |
</div> | |
{block:NextPage} | |
<div class="window next-page-window" onmouseover="MakeActive(this);"> | |
<a href="{NextPage}"> | |
<div class="urxvt"> | |
<p> | |
==> | |
</p> | |
</div> | |
</a> | |
</div> | |
{/block:NextPage} | |
</div> | |
{/block:Pagination} | |
</div> | |
<script type="text/javascript"> | |
addEvent(window, "resize", doResize); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment