tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added menu panel.

Browse Source
This commit is contained in:
kor 2018-07-16 16:30:40 +12:00
parent 01717a5ce6
commit 162927592e
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
asset/style.css
View File

@ -14,13 +14,40 @@ body {
* { box-sizing: border-box; }
.grid {
/* center */
margin: 0 auto;
margin-top: 20px;
.optionsPanel {
width: 100px;
height: 100%;
background:#000;
position:fixed;
left: 0px;
top: 0px;
z-index: 100;
/*-webkit-transition: width 0.05s ease-in-out;
transition: width 0.05s ease-in-out;*/
}
.optionsPanel:hover {
width: 370px;
/*-webkit-transition: width 0.05s ease-in-out;
transition: width 0.05s ease-in-out;*/
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, .1);
}
.container {
margin-left: 120px;
}
.optionsPanel:hover + .container{
/*transition: 0.05s -webkit-filter ease-in;*/
filter: blur(3px);
}
.grid {
border: 1px;
filter: blur(0px);
margin: 20px auto;
transition: 0.05s -webkit-filter ease-out;
}
/* clearfix */
.grid:after {
/* clearfix */
content: '';
display: block;
clear: both;

4
index.html
View File

@ -15,7 +15,9 @@
<title>memex</title>
</head>
<body>
<div class="grid" id="grid">
<div class="optionsPanel"></div>
<div class="container">
<div class="grid" id="grid"></div>
</div>
<script>