109 lines
4.6 KiB
HTML
109 lines
4.6 KiB
HTML
<!-- Custom HTML Homepage for niblock -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>++ H O M E ++</title>
|
|
<style>
|
|
html { background-color: #0e0e0e; color: #555555; }
|
|
a { color: #555555; text-decoration: none; transition: color 1s; }
|
|
a:hover { color: #d4d454; text-decoration: none; transition: color 1s; }
|
|
body {
|
|
position: absolute; bottom: 0px; display: table;
|
|
width: 100%; height: 100%; margin: 0; padding: 0; }
|
|
header { position: fixed; top: 3%; right: 3%; height: 50px; }
|
|
#icons { display: table-cell; vertical-align: middle; }
|
|
#category {
|
|
float: left; margin: 0px; padding: 0px 20px; list-style: none; }
|
|
#category li {
|
|
color: lightgray; font-weight: bold;
|
|
text-align: center; padding: 10px 0px; }
|
|
#category li:first-child { border-bottom: 2px solid #270e24; }
|
|
#category a {
|
|
display: table-cell; width: 50px; height: 50px;
|
|
background: #270e24; border: 1px solid #270e24; border-radius: 50%;
|
|
vertical-align: middle; color: lightgray; }
|
|
#category a:hover {
|
|
color: #d4d454; text-decoration: none; transition: color 1s; }
|
|
#fence {
|
|
display: table-cell; vertical-align: middle;
|
|
margin: 0px auto; width: 1000px; }
|
|
#links {
|
|
float: left; width: 150px;
|
|
margin: 25px 46px; padding: 0px 0px 12px 0px;
|
|
list-style: none; background: #270e24;
|
|
border: 2px solid #270e24; border-radius: 10px; }
|
|
#links #header {
|
|
background-color: #270e24;
|
|
color: lightgray; font-weight: bold;
|
|
border-top-right-radius: 10px; border-top-left-radius: 10px; }
|
|
#links li {
|
|
padding: 5px 10px; text-align: center; background-color: black; }
|
|
footer {
|
|
position: fixed; bottom: 0px; left: 0px; right: 0px; width: 75%;
|
|
margin: 0px auto; text-align: center; letter-spacing: 8px;
|
|
font-family: monospace; font-weight: bold; color: gray; }
|
|
</style>
|
|
<script type="text/javascript">
|
|
</script>
|
|
</head>
|
|
<body >
|
|
<header>
|
|
<ul id="icons">
|
|
<ul id="category">
|
|
<li>Mail</li>
|
|
<li><a href="https://mail.google.com">G</a></li>
|
|
<li><a href="https://www.yahoo.com/mail">Y</a></li>
|
|
</ul>
|
|
<ul id="category">
|
|
<li>Cloud</li>
|
|
<li><a href="https://drive.google.com">D</a></li>
|
|
<li><a href="https://cyberthunderdesigns.com/owncloud">L</a></li>
|
|
<li><a href="https://github.com">GH</a></li>
|
|
</ul>
|
|
</ul>
|
|
</header>
|
|
<!-- Commonly visited links -->
|
|
<section id="fence">
|
|
<ul id="links">
|
|
<li id="header">Watch</li>
|
|
<li><a href="https://www.youtube.com/feed/subscriptions">
|
|
YouTube</a></li>
|
|
<li><a href="https://www.twitch.tv/directory/following">
|
|
Twitch</a></li>
|
|
<li><a href="https://www.netflix.com">Netflix</a></li>
|
|
<li><a href="https://www.amazon.com/video">Amazon</a></li>
|
|
<li><a href="https://www.plex.tv">Plex</a></li>
|
|
</ul>
|
|
<ul id="links">
|
|
<li id="header">Listen</li>
|
|
<li><a href="https://bandcamp.com/azulien">Bandcamp</a></li>
|
|
<li><a href="https://www.pandora.com">Pandora</a></li>
|
|
<li><a href="http://audionoir.com">Audio Noir</a></li>
|
|
<li><a href="http://www.radio-kol.net/">Radio KoL</a></li>
|
|
</ul>
|
|
<ul id="links">
|
|
<li id="header">Read</li>
|
|
<li><a href="https://feedly.com">Feedly</a></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.reddit.com">Reddit</a></li>
|
|
<li><a href="https://www.reddit.com/r/vim">/r/vim</a></li>
|
|
<li><a href="https://www.reddit.com/r/unixporn">/r/unixporn</a></li>
|
|
<li><a href="https://www.reddit.com/r/stoicism">/r/stoicism</a></li>
|
|
</ul>
|
|
<ul id="links">
|
|
<li id="header">Play</li>
|
|
<li><a href="https://www.kingdomofloathing.com">
|
|
Kingdom of Loathing</a></li>
|
|
<li><a href="https://discordapp.com/channels/@me">Discord</a></li>
|
|
<li><a href="https://vghd.slack.com/">VGHD Slack</a></li>
|
|
</ul>
|
|
</section>
|
|
<footer>
|
|
<hr>
|
|
<p>ENDURE and RENOUNCE</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|