Expand Mail/Cloud to include multiple options

This commit is contained in:
Bill Niblock 2017-04-04 18:01:16 -04:00
parent 66156b7a58
commit 5cb56e8e6e

View file

@ -6,25 +6,25 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>++ H O M E ++</title> <title>++ H O M E ++</title>
<style> <style>
html { html { background-color: #0e0e0e; color: #555555; }
background-color: #0e0e0e; color: #555555; } a { color: #555555; text-decoration: none; transition: color 1s; }
a { a:hover { color: #d4d454; text-decoration: none; transition: color 1s; }
color: #555555; text-decoration: none; transition: color 1s; }
a:hover {
color: #d4d454; text-decoration: none; transition: color 1s; }
body { body {
position: absolute; bottom: 0px; display: table; position: absolute; bottom: 0px; display: table;
width: 100%; height: 100%; margin: 0; padding: 0; } width: 100%; height: 100%; margin: 0; padding: 0; }
header { header { position: fixed; top: 3%; right: 3%; height: 50px; }
position: fixed; top: 5%; right: 5%; height: 50px; } #icons { display: table-cell; vertical-align: middle; }
#icon { #category {
display: table; float: left; margin: 0px; padding: 0px 20px; list-style: none; }
float: left; margin: 0 10px; height: 64px; width: 64px; #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%; background: #270e24; border: 1px solid #270e24; border-radius: 50%;
font-size: 30px; text-align: center; } vertical-align: middle; color: lightgray; }
#icon a { #category a:hover {
display: table-cell; vertical-align: middle; color: lightgray; }
#icon a:hover {
color: #d4d454; text-decoration: none; transition: color 1s; } color: #d4d454; text-decoration: none; transition: color 1s; }
#fence { #fence {
display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;
@ -50,9 +50,19 @@
</head> </head>
<body > <body >
<header> <header>
<div id="icon"><a href="https://mail.google.com">M</a></div> <ul id="icons">
<div id="icon"><a href="https://drive.google.com">D</a></div> <ul id="category">
<div id="icon"><a href="#">L</a></div> <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> </header>
<!-- Commonly visited links --> <!-- Commonly visited links -->
<section id="fence"> <section id="fence">
@ -75,6 +85,7 @@
</ul> </ul>
<ul id="links"> <ul id="links">
<li id="header">Read</li> <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://news.ycombinator.com/">Hacker News</a></li>
<li><a href="https://lobste.rs/">Lobsters</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">Reddit</a></li>