Skip to content

Instantly share code, notes, and snippets.

@desyncr

desyncr/homepage.html

Created December 5, 2013 06:49
Show Gist options
  • Save desyncr/7801175 to your computer and use it in GitHub Desktop.
Save desyncr/7801175 to your computer and use it in GitHub Desktop.
Download ZIP
Vimprobable custom start page
Raw
homepage.html
<html>
<head>
<title>Home</title>
<style>
body {
font-family: arial, sans-serif;
font-size: 13px;
background: black;
color: gray;
overflow: hidden;
}
a {
color: gray;
text-decoration: none;
display: inline-block;
margin-right: 10px;
}
a:focus, a:hover {
text-decoration: underline;
}
#centered {
margin: 23% auto;
}
ul {
list-style-type: none;
padding-left: 40px;
}
.category {
width: 70px;
display: inline-block;
}
.category span {
float: right;
font-size: 8px;
display: inline-block;
margin-top: 2px;
margin-right: 5px;
}
.links {
float: left;
}
.shortcuts {
float: right;
text-align: right;
padding-right: 40px;
}
.shortcuts span {
float: right;
display: inline-block;
width: 25px;
margin-left: 10px;
}
.links form input {
font-size: 13px;
color: gray;
margin-top: 10px;
background: 0;
border: 1px solid gray;
padding: 5px;
width: 400px;
}
</style>
</head>
<body>
<div id="centered">
<div class="links">
<ul>
<li>
<span class="category">social <span>&gt;</span></span>
<a href="http://www.reddit.com/r/unixporn/" title="">/r/unixporn</a>
<a href="http://forums.unixhub.net/" title="">unixhub</a>
<a href="https://github.com/desyncr/" title="">github</a>
</li>
<li>
<span class="category">reading <span>&gt;</span></span>
<a href="http://www.reddit.com/r/programming/" title="">/r/programming</a>
<a href="http://www.reddit.com/r/learnprogramming/" title="">/r/learnprogramming</a>
<a href="http://www.reddit.com/r/ruby/" title="">/r/ruby</a>
<a href="https://news.ycombinator.com/news" title="">hn</a>
</li>
<li>
<span class="category">learning <span>&gt;</span></span>
<a href="https://wiki.archlinux.org/" title="">arch wiki</a>
</li>
<li>
<span class="category">media <span>&gt;</span></span>
<a href="https://www.youtube.com/" title="">youtube</a>
<a href="https://www.tumblr.com/" title="">tumbr</a>
<a href="https://twitter.com/" title="">twitter</a>
</li>
<li>
<span class="category">tools <span>&gt;</span></span>
<a href="https://stackoverflow.com" title="">stackoverflow</a>
<a href="https://www.fastmail.fm" title="">fastmail</a>
<a href="https://gist.github.com" title="">gist</a>
</li>
<li>
<span class="category">search <span>&gt;</span></span>
<a href="https://duckduckgo.com/" title="">duckduckgo</a>
<a href="https://thepiratebay.se/" title="">thepiratebay</a>
<a href="https://www.google.com/" title="">google</a>
<a href="https://images.google.com/" title="">images</a>
<a href="https://www.wikipedia.org/" title="">wikipedia</a>
</li>
<form name="search" action="#">
<input tabindex=1 name="q" type="text" placeholder="Search...">
</form>
<script type="text/javascript">
var form = document.forms['search'];
form.action = "http://google.com";
function submitQuery(e) {
window.location.href = form.action + "#q=" + form.elements['q'].value;
e.preventDefault();
}
window.onload = function() {
form.onsubmit = submitQuery;
}
</script>
</ul>
</div>
<div class="shortcuts">
<ul>
<li>
<span>.</span> hinting
</li>
<li>
<span>,</span> hinting (new window)
</li>
<li>
<span>H</span> navigate back
</li>
<li>
<span>L</span> navigate forward
</li>
<li>
<span>;s</span> download
</li>
<li>
<span>C-t</span> home (background)
</li>
<li>
<span>C-w</span> close tab
</li>
<li>
<span>u</span> reopen tab
</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment