Expand Mail/Cloud to include multiple options
This commit is contained in:
parent
66156b7a58
commit
5cb56e8e6e
1 changed files with 30 additions and 19 deletions
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue