-
-
Save noirscape/70d02061dd1dc90e9204f38861b487b3 to your computer and use it in GitHub Desktop.
i3-gaps theme for tumblr - Modified for easier usage
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"/> | |
| <!-- Meta editable variables --> | |
| <meta name="text:Lunix username" content="untitled"/> | |
| <meta name="text:Title username" content="someone"/> | |
| <meta name="image:Background" content="http://static.tumblr.com/bwey4ra/Gzwno4oq5/sunset.jpg" /> | |
| <meta name="text:Title" content="REQUIRED"/> | |
| <meta name="text:Info tag 1" content=""/> | |
| <meta name="text:Info tag 2" content=""/> | |
| <meta name="text:Info tag 3" content=""/> | |
| <meta name="text:Info tag 4" content=""/> | |
| <meta name="if:Show Description" content="1"/> | |
| <meta name="if:Show Links" content="1"/> | |
| <meta name="if:Show Following" content="0"/> | |
| <meta name="if:Show Counter" content="0"/> | |
| <meta name="text:Additional Info" content=""/> | |
| <!-- end of Meta editable variables --> | |
| <!-- Overrides for i3-numix CSS --> | |
| <style> | |
| background-image: url({image:Background}) !important; | |
| {CustomCSS} | |
| </style> | |
| <!-- end of overrides for i3-numix CSS --> | |
| <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"> | |
| {block:ifShowCounter} | |
| <div id="i3status"> | |
| <span class="i3status-block"><script language="JavaScript" src="http://tc.freehostedscripts.net/tcounter.php?url={BlogURL}&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={BlogURL}&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={BlogURL}&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> | |
| {/block:ifShowCounter} | |
| </div> | |
| </div> | |
| <div id="workspace"> | |
| <div id="confirm"> | |
| <div id="confirm-window" class="window"> | |
| <div class="urxvt"> | |
| Weirdness warning -this is just temporary- shouldn't show up yet..<br/> | |
| <a href="http://ev1l0rd.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"> | |
| {text:Title} | |
| </p> | |
| <p class="small"> | |
| {text:Title username}'s blog | |
| </p> | |
| </a> | |
| <p class="short-info"> | |
| {block:IfInfotag1} | |
| <span class="info"> | |
| {text:Info tag 1} | |
| </span> | |
| {block:IfInfotag2}<span class="separator">|</span>{/block:IfInfotag2} | |
| {/block:IfInfotag1} | |
| {block:IfInfotag2} | |
| <span class="info"> | |
| {text:Info tag 2} | |
| </span> | |
| {block:IfInfotag3}<span class="separator">|</span>{/block:IfInfotag3} | |
| {/block:IfInfotag2} | |
| {block:IfInfotag3} | |
| <span class="info"> | |
| {text:Info tag 3} | |
| </span> | |
| {block:IfInfotag4}<span class="separator">|</span>{/block:IfInfotag4} | |
| {/block:IfInfotag3} | |
| {block:IfInfotag4} | |
| <span class="info"> | |
| {text:Info tag 4} | |
| </span> | |
| {/block:IfInfotag4} | |
| </p> | |
| </div> | |
| </div> | |
| {block:IfShowDescription} | |
| <div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
| <div class="urxvt"> | |
| <p class="prompt"> | |
| <span style="background-color: #107bcc"><a href="/">{text:Lunix Username}@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="/">{text:Lunix Username}@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> | |
| {block:IfShowDescription} | |
| {block:IfShowLinks} | |
| <div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
| <div class="urxvt"> | |
| <p class="prompt"> | |
| <span style="background-color: #107bcc"><a href="/">{text:Lunix Username}@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="/">{text:Lunix Username}@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/> | |
| {block:AskEnabled} ├── <a href="/ask">ask</a><br/>{/block:AskEnabled} | |
| {block:SubmitEnabled} ├── <a href="/submit">submit</a><br/>{/block:SubmitEnabled} | |
| ├── <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/example">example posts</a><br/> | |
| └── <span style="color: #17A4D6;font-weight: 700">misc</span><br/> | |
| └── Theme Credits: <a href="http://blog.tjb0607.me">@tjb0607</a> | |
| <!-- └── <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="/">{text:Lunix Username}@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> | |
| {/block:IfShowLinks} | |
| {block:IfShowFollowing} | |
| <div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
| <div class="urxvt"> | |
| <p class="prompt"> | |
| <span style="background-color: #107bcc"><a href="/">{text:Lunix Username}@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="/">{text:Lunix Username}@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> | |
| {/block:IfShowFollowing} | |
| {block:IfAdditionalInfo} | |
| <div class="sidebar-child sidebar-middle window" onmouseover="MakeActive(this);"> | |
| <div class="urxvt"> | |
| <p class="prompt"> | |
| <span style="background-color: #107bcc"><a href="/">{text:Lunix Username}@tumblr</a></span> <span style="color: #80ebff; font-weight: 700">~</span> <span style="color: #7e8e91; font-weight: 700">%</span> cat ~/info.txt<br/> | |
| </p> | |
| {text:Additional Info} | |
| <p class="prompt"> | |
| <span style="background-color: #107bcc"><a href="/">{text:Lunix Username}@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> | |
| {/block:IfAdditionalInfo} | |
| </div> | |
| </div> | |
| </div> | |
| <div id="content"> | |
| <div class="window mobile-info" onmouseover="MakeActive(this);"> | |
| <div class="urxvt blog-title"> | |
| <a href="/"> | |
| <p class="small"> | |
| {text:Title username}'s blog | |
| </p> | |
| </a> | |
| <p class="short-info"> | |
| {block:IfInfotag1} | |
| <span class="info"> | |
| {text:Info tag 1} | |
| </span> | |
| {block:IfInfotag2}<span class="separator">|</span>{/block:IfInfotag2} | |
| {/block:IfInfotag1} | |
| {block:IfInfotag2} | |
| <span class="info"> | |
| {text:Info tag 2} | |
| </span> | |
| {block:IfInfotag3}<span class="separator">|</span>{/block:IfInfotag3} | |
| {/block:IfInfotag2} | |
| {block:IfInfotag3} | |
| <span class="info"> | |
| {text:Info tag 3} | |
| </span> | |
| {block:IfInfotag4}<span class="separator">|</span>{/block:IfInfotag4} | |
| {/block:IfInfotag3} | |
| {block:IfInfotag4} | |
| <span class="info"> | |
| {text:Info tag 4} | |
| </span> | |
| {/block:IfInfotag4} | |
| </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