Skip to content

Instantly share code, notes, and snippets.

@tjb0607

tjb0607/i3tumblr

Last active August 29, 2015 14:15
Show Gist options
  • Save tjb0607/c7dcc08c2a9fb24d3119 to your computer and use it in GitHub Desktop.
Save tjb0607/c7dcc08c2a9fb24d3119 to your computer and use it in GitHub Desktop.
Download ZIP
i3 tumblr theme
Raw
i3tumblr
<!DOCTYPE html>
<html>
<head>
<title>{title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<style>
/* @font-face {
font-family: 'Tewi';
font-style: normal;
font-weight: 400;
src: local('Tewi'), url(http://tjb0607.me/i3_tumblr_theme/font/Tewimedium.ttf) format(ttf);
}
@font-face {
font-family: 'Tewi';
font-style: normal;
font-weight: 700;
src: local('Tewi Bold'), url(http://tjb0607.me/i3_tumblr_theme/font/Tewibold.ttf) format(ttf);
}
The vectorization looks like shit with subpixel rendering. Chrome doesn't allow bitmap fonts, so it's not worth using this font. */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function doResize() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var infoWidth = $('#bloginfo').width();
$('#i3root').height(windowHeight - 19);
var windowWidth = $(window).width();
if (windowWidth >= 1090) {
infoWidth = 540;
} else if (windowWidth >= 750) {
infoWidth = windowWidth - 565;
} else {
infoWidth = 200;
}
if (windowWidth < 920) {
$('#arch-logo').hide();
} else {
$('#arch-logo').show();
}
$('#bloginfo').width(infoWidth);
$('#main-window').width(windowWidth - infoWidth);
$('#i3workspace').width(windowWidth + 5);
resizeHeight();
setTimeout(resizeHeight, 500); // do it again in a half second just in case it gets screwed up by word wrapping and stuff
}
function resizeHeight() {
var windowHeight = $(window).height();
$('#posts').height(windowHeight - $('#posts').offset().top - 4);
$('#following').height(windowHeight - $('#following').offset().top - 6);
}
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());
$('#i3status-date').html(dateString)
setTimeout(i3status, 1000);
}
$(window).bind('resize orientationchange',doResize);
</script>
<style>
body {
background-color: #191919;
color: #ffffff;
font-family: Inconsolata, monospace;
font-size: 11px;
margin: 0px;
padding: 0px;
border: 0px;
word-wrap:break-word;
overflow-x: auto;
}
#i3root {
overflow: hidden;
}
a {
color: inherit;
text-decoration: inherit;
}
a:hover {
text-decoration: underline;
}
td {
padding: 0px;
}
table {
border-spacing: 0px;
}
tr, td {
text-align: left;
vertical-align: top;
}
div.i3window {
width: 100%;
}
div.window-title {
font-weight: 400;
background-color: #222222;
border-top: 1px solid #333333;
color: #888888;
font-size: 13px;
padding-bottom: 2px;
padding-left: 2px;
}
div.window-body-outer {
border-left: 2px solid #222222;
border-right: 2px solid #222222;
border-bottom: 2px solid #222222;
padding: 0px;
}
div.window-body-inner {
border-top: 1px solid #333333;
padding: 1px 2px 2px 2px;
overflow-x: hidden;
font-family: Tewi, Inconsolata, monospace;
}
.i3window-active div.window-title {
color: #ffffff;
background-color: #285577;
border-top: 1px solid #4c7899;
}
.i3window-active div.window-body-outer {
border-left: 2px solid #285577;
border-right: 2px solid #285577;
border-bottom: 2px solid #285577;
}
.i3window-active div.window-body-inner {
border-top: 1px solid #4c7899;
}
#posts .post-number {
background-color: #303030;
color: #bcbcbc;
text-align: right;
width: 19px;
padding-right: 6px;
}
p, ul {
margin: 0px;
}
blockquote {
margin: 0px;
padding-left: 4px;
border-left: 2px solid #5f5f5f;
}
ul {
padding-left: 11px;
}
.vim {
counter-reset: line-number-counter
}
dl {
margin: 0px;
}
.post {
border-left: 25px solid #303030;
}
.post:before {
content: counter(line-number-counter);
position: relative;
display: block;
color: #bcbcbc;
counter-increment: line-number-counter;
width: 19px;
height: 0px;
margin-left: -25px;
margin-right: 6px;
text-align: right;
}
.vim .comment {
color: #5f5f5f;
}
.vim .title {
font-weight: bold;
text-decoration: underline;
}
.vim .post a {
text-decoration: underline;
}
#posts, #following {
overflow-y: auto;
}
#i3bar {
position: fixed;
width: 100%;
height: 19px;
background-color: #000;
font-size: 13px;
}
#i3bar .button {
background-color: #222;
border: 1px solid #333;
color: #888;
height: 15px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
float: left;
padding-left: 4px;
padding-right: 4px;
}
#i3bar .button-active {
background-color: #285577;
border: 1px solid #4c7899;
color: #fff;
}
#i3bar #i3status, .i3status-block {
float: right;
}
#i3bar #i3status .i3status-separator {
color: #666;
margin-left: 6px;
margin-right: 6px;
}
#i3bar #i3status #i3status-date {
margin-right: 6px;
}
#tumblr_controls {
top: 19px !important;
}
.post img{
max-width: 100%;
}
#posts {
}
.i3splitv {
word-wrap: normal;
}
.i3splitv > .i3item {
float: left;
}
#bloginfo .prompt {
word-break: break-all;
}
/* i3gaps urxvt configured
background-color: rgba(28,28,28,0.9);
box-shadow: 0px 0px 11px #000;
border: 2px solid #D64937;
font-family: inconsolata;
color: #fff;
font-size: 11px;
padding: 2px;
*/
</style>
</head>
<body>
<div id="i3bar">
{block:Pagination}
{block:PreviousPage}
<a href="{PreviousPage}"><div class="button">
&lt;
</div></a>
{block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}
<div class="button button-active">
{PageNumber}
</div>
{/block:CurrentPage}
{block:JumpPage}
<a href="{URL}"><div class="button">{PageNumber}</div></a>
{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}
<a href="{NextPage}"><div class="button">
&gt;
</div></a>
{block:NextPage}
{/block:Pagination}
<div id="i3status">
<div id="i3status-date" class="i3status-block">0000-00-00 00:00:00</div>
<div class="i3status-block i3status-separator">|</div>
<div class="i3status-block"><span style="color:#0F0"><script language="JavaScript" src="http://s1.freehostedscripts.net/ocounter.php?site=XXXXXXXXX&e1=Online&e2=Online"></script></span></div>
<div class="i3status-block i3status-separator">|</div>
<div class="i3status-block"><script language="JavaScript" src="http://s1.freehostedscripts.net/ocount.php?site=XXXXXXXXX&name=Visits"></script></div>
<div class="i3status-block i3status-separator">|</div>
<div class="i3status-block"><script language="JavaScript" src="http://tc.freehostedscripts.net/tcounter.php?url=XXXXXXXXX&name=following"></script></div>
</div>
</div>
<div id="i3root" style="position: relative; top: 19px; float:left">
<div class="i3workspace">
<div class="i3item i3container i3splitv">
<div id="bloginfo" class="i3item i3container i3splith" style="width:500px; overflow: none; height: 100%;">
<div id="screenfetch-window" class="i3item i3window i3window-inactive">
<div class="window-title">
<p>urxvt</p>
</div>
<div class="window-body-outer"><div class="window-body-inner">
<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> screenfetch<br/>
</p>
<table>
<tr>
<td id="arch-logo" style="padding-right: 11px;">
<span style="color: #80ebff; font-weight: 700;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-`<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.o+`<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`ooo/<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`+oooo:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`+oooooo:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-+oooooo+:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`/:-:++oooo+:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`/++++/+++++++:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`/++++++++++++++:<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`/+++o<span style="color: #66d9ef; font-weight: 400;">oooooooo<span style="color: #80ebff; font-weight: 700;">oooo/`<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;./<span style="color: #66d9ef; font-weight: 400;">ooosssso++osssssso<span style="color: #80ebff; font-weight: 700;">+`<br/>
<span style="color: #66d9ef; font-weight: 400;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.oossssso-````/ossssss+`<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-osssssso.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:ssssssso.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:osssssss/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;osssso+++.<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/ossssssss/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ssssooo/-<br/>
&nbsp;&nbsp;&nbsp;`/ossssso+/:-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-:/+osssso+-<br/>
&nbsp;&nbsp;`+sso+:-`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`.-/+oso:<br/>
&nbsp;`++:.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`-/+/<br/>
&nbsp;.`&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`/
</td>
<td style="padding-right: 11px; overflow: hidden; word-wrap: break-word;">
<span style="color: #80ebff; font-weight: 700;"><a href="/">tjb0607<span style="color: #d7d7d7">@</span>tumblr</a></span><br/><br/>
<span style="color: #80ebff; font-weight: 700;">Name:</span> Tyler<br/>
<span style="color: #80ebff; font-weight: 700;">Age:</span> 19<br/>
<span style="color: #80ebff; font-weight: 700;">Location:</span> Klamath Falls, OR, US<br/>
<span style="color: #80ebff; font-weight: 700;">MBTI:</span> INTP<br/>
<span style="color: #80ebff; font-weight: 700;">Pronouns:</span> he/him/his<br/>
<span style="color: #80ebff; font-weight: 700;">Gender identity/sexuality:</span> cishet<br/>
<span style="color: #80ebff; font-weight: 700;">WARNING:</span> This blog contains untagged Homestuck spoilers.<br/>
<span style="color: #80ebff; font-weight: 700;">About:</span> #1 at being depressed and ignoring responsibilities<br/><br/>
I like Homestuck, Gravity Falls, Prequel, Music, Paranatural, Welcome to Night Vale, Ava's Demon, Avatar: the Last Airbender, the Legend of Korra, Supernatural, Sherlock, Homestuck, Karezi, and other shit.<br/>
</td>
</tr>
</table>
<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>
</p>
</div></div>
</div>
<div id="links-window" class="i3item i3window i3window-inactive">
<div class="window-title">
<p>urxvt</p>
</div>
<div class="window-body-outer"><div class="window-body-inner">
<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 /var/www
</p> <p class="prompt">
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">/var/www</span> <span style="color: #7e8e91; font-weight: 700">%</span> ls --color -1 | grep -v "^(page\|post\|tagged\|search\)$|\."
</p>
<span style="color: #17a4d6; font-weight: 700">
<p><a href="/about">about</a></p>
<p><a href="/archive">archive</a></p>
<p><a href="/ask">ask</a></p>
<p><a href="http://uptrex.tumblr.com/">moirail</a></p>
<p><a href="/rss">rss</a></p>
<p><a href="/tagged/stuff-I-did">stuff I did</a>
<p><a href="/submit">submit</a></p>
</span>
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span>
<span style="color: #80ebff">/var/www</span>
<span style="color: #7e8e91; font-weight: 700">%</span>
</div></div>
</div>
<div id="following-window" class="i3item i3window i3window-inactive">
<div class="window-title">
<p>urxvt</p>
</div>
<div class="window-body-outer"><div id="following" class="window-body-inner">
<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>
{block:Following}
{block:Followed}
<p><a href="{FollowedURL}">{FollowedName}</a></p>
{/block:Followed}
{/block:Following}
<p class="prompt">
<span style="background-color: #107bcc"><a href="/">tjb0607@tumblr</a></span>&nbsp;<span style="color: #80ebff; font-weight: 700">~</span>&nbsp;<span style="color: #7e8e91; font-weight: 700">%</span>
</p>
</div></div>
</div>
</div>
<div id="main-window" class="i3item i3window i3window-inactive" style="">
<div class="window-title">
<p>urxvt</p>
</div>
<div class="window-body-outer"><div id="posts-window" class="window-body-inner">
<dl id="posts" class="vim autopagerize_page_element">
{block:Posts}
<dt class="post">
{block:Date}
<div class="post-header">
{block:Reblog}
<div style="float:left;">
<p class="comment">
//
<a href="{Permalink}" title="{DayOfWeek} {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}">Reblogged {TimeAgo}</a>
from
<a href="{ReblogParentURL}" title="{ReblogParentTitle}">
{ReblogParentName}
</a>
</p>
</div>
{/block:Reblog}
{block:NotReblog}
<div style="float:left;">
<p class="comment">
//
<a href="{Permalink}" title="{DayOfWeek} {Year}-{MonthNumberWithZero}-{DayOfMonthWithZero} {24HourWithZero}:{Minutes}:{Seconds}">Posted {TimeAgo}</a>
</p>
</div>
{/block:NotReblog}
{block:ContentSource}
<div class="comment" style="float:right">(Source: <a href="{SourceURL}">{SourceTitle}</a>)</div>
{/block:ContentSource}
</div>
<br/>
{/block:Date}
{block:Text}
{block:Title}
<p class="title"><a href="{Permalink}">
{Title}
</a></p>
{/block:Title}
{Body}
{block:Text}
{block:Photo}
<a href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></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-500}
{block:Caption}
{Caption}
{/block:Caption}
{/block:Photoset}
{block:Quote}
<p style="font-weight:700;">"{Quote}"</p>
{block:Source}
{Source}
{/block:Source}
{/block:Quote}
{block:Link}
<p style="color: #17a4d6; font-weight: 700; text-decoration: underline;">
<a href="{URL}" {Target}>{Name}</a>
</p>
{block:Description}
{Description}
{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}
<p class="title"><a href="{Permalink}">
{Title}
</a></p>
{/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}
{block:Date}
<p class="comment">
//
{block:HasTags}
Tagged: {block:Tags}<a href="{TagURL}">#{Tag}</a> {/block:Tags} |
{/block:HasTags}
{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a> | {block:NoteCount}
<a href="{ReblogURL}">reblog</a>
</p>
{/block:Date}
<br/><br/>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</dt>
{/block:Posts}
</dl>
</div>
</div>
</div>
</div>
</body>
<script>
doResize();
i3status();
$( ".i3window-inactive" ).mouseenter(
function() {
$( ".i3window-active" ).each(
function() {
$( this ).removeClass( "i3window-active" );
$( this ).addClass( "i3window-inactive" );
});
$( this ).removeClass( "i3window-inactive" );
$( this ).addClass( "i3window-active" );
}
);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment