Skip to content

Instantly share code, notes, and snippets.

@pvik
Last active September 12, 2018 12:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pvik/17a7989e3b842003fa330ae645a27211 to your computer and use it in GitHub Desktop.
Save pvik/17a7989e3b842003fa330ae645a27211 to your computer and use it in GitHub Desktop.
custom homepage
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.png" />
<title>elric's home</title>
<!--link rel="stylesheet" href="style.css"-->
<style media="screen" type="text/css">
html {
font-family: Hack;
font-size: 16px;
/*width: 100vw;
height: 100vh;*/
}
body {
width: 100%;
height: 100%;
margin: 0;
background-color: #282c34;
color: #bbc2cf;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.favorites {
display: flex;
flex-direction: row;
}
.favorites-list {
text-align: center;
width: 10rem;
margin: 2rem;
}
.search {
width: 30rem;
padding: 0.5rem;
border: 1px solid #bbc2cf;
}
.search-box {
width: 100%;
margin: auto;
padding: 0;
background-color: rgba(0, 0, 0, 0);
color: #bbc2cf;
border: none;
}
.search-box:focus {
outline: none;
}
ul {
list-style: none;
padding: 0;
}
ul > li > p {
font-weight: bold;
text-align: left;
border-bottom: 1px solid #bbc2cf;
padding-right: 100%;
}
ul > li > p > a {
color: #bbc2cf;
outline: none;
display: block;
text-decoration: none;
text-align: center;
padding: 0.5rem;
}
ul > li > a {
color: #bbc2cf;
outline: none;
display: block;
text-decoration: none;
text-align: center;
padding: 0.5rem;
}
ul > li > a:hover {
color: #222222;
background-color: #51afef;
}
/* webkit compat */
.container {
display: -webkit-flex;
-webkit-flex-direction: column;
-webkit-align-items: center;
-webkit-justify-content: center;
}
.favorites {
display: -webkit-flex;
-webkit-flex-direction: row;
}
</style>
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div>
<p>&nbsp;</p>
</div>
<div class="search">
<form method="get" action="https://duckduckgo.com/?">
<input class="search-box" name="q" type="text" placeholder="ddg search" autofocus/>
</form>
</div>
<div class="favorites">
<div class="favorites-list">
<ul>
<li><p>productivity</p></li>
<li><a href="https://mail.protonmail.com">protonmail</a></li>
<li><a href="https://seafile.-/">seafile</a></li>
<li><a href="https://www.safaribooksonline.com/">safari</a></li>
<li><p>vcs</p></li>
<li><a href="https://www.github.com">github</a></li>
<li><a href="https://www.gitlab.com">gitlab</a></li>
<li><a href="https://www.bitbucket.com">bitbucket</a></li>
</ul>
</div>
<div class="favorites-list">
<ul>
<li><p>news</p></li>
<li><a href="https://news.ycombinator.com">hacker news</a></li>
<li><a href="https://lobste.rs">lobsters</a></li>
<li><a href="https://www.nytimes.com/">nyt</a></li>
<li><a href="https://www.theverge.com/">verge</a></li>
<li><a href="https://techcrunch.com/">techcrunch</a></li>
<li><p>ctl</p></li>
<li><a href="https://myworkspace.-/">workspace</a></li>
</ul>
</div>
<div class="favorites-list">
<ul>
<li><p>crypto</p></li>
<li><a href="https://supportxmr.com/">supportxmr</a></li>
<li><a href="https://poloniex.com/">poloniex</a></li>
</ul>
<ul>
<li><p><a href="https://old.reddit.com">reddit</a></p></li>
<li><a href="https://old.reddit.com/me/m/fun/">fun</a></li>
<li><a href="https://old.reddit.com/me/m/android/">android</a></li>
<li><a href="https://old.reddit.com/me/m/compdev/">dev</a></li>
<li><a href="https://old.reddit.com/me/m/cryptocur/">crypto</a></li>
</ul>
</div>
<div class="favorites-list">
<ul>
<li><p>local</p></li>
<li><a href="https://arch-xeon.local:32400/web/index.html">plex</a></li>
<li><a href="http://arch-xeon.local:8989/">sonarr</a></li>
<li><a href="http://arch-xeon.local:7878/">radarr</a></li>
<li><a href="http://arch-xeon.local:8080/sabnzbd/login/">sabnzbd</a></li>
<li><a href="https://syno.local:5001/index.cgi">diskstation</a></li>
<li><a href="http://octopi.local/">octopi</a></li>
<li><a href="http://archbook.local/">zabbix</a></li>
</ul>
</div>
</div>
</div>
<!--script src="time.js"></script-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment