main navigation redesign
This commit is contained in:
parent
485e72a9d1
commit
99f101306b
4 changed files with 54 additions and 35 deletions
|
|
@ -62,26 +62,30 @@ a:hover{color:#62c5cd}
|
|||
header{background:#0f373c;margin-bottom:19px;position:fixed;width:100%;z-index:99}
|
||||
header nav{z-index:99;margin:0 5%}
|
||||
|
||||
header a{display:block;margin-left:5%;color:#d9e5e7;font-family:Georgia,serif;text-transform:uppercase}
|
||||
header a:hover{color:#fff}
|
||||
header .fa{color:#5e9499}
|
||||
header a:hover .fa{color:#7fb0b4}
|
||||
|
||||
menu{display:none;opacity:0;position:absolute;margin:0;padding:0 0 15px;background:#0f373c;right:0;left:0}
|
||||
menu li{display:block;margin:0 5%}
|
||||
|
||||
menu a,#profile{display:block;padding:15px 0;color:#d9e5e7}
|
||||
menu a:hover,#profile:hover{color:#fff}
|
||||
|
||||
menu .active{color:#fff}
|
||||
menu .active .fa,.crewards .unlocked .fa{color:#bcd75e}
|
||||
|
||||
menu .smnry{font-size:0.875em;padding:8px 0 8px 12px;background:#0c2e32;border-bottom:2px solid #0f373c;border-radius:3px}
|
||||
|
||||
#home{display:none;opacity:0}
|
||||
#home a{line-height:93px;font-size:22px;letter-spacing:8px}
|
||||
#profile{float:right}
|
||||
.circlenote{margin-left:15px;background:#bcd75e;border-radius:0.8em;display:inline-block;color:#0f373c;font-weight:bold;line-height:1.6em;text-align:center;width:1.6em;font-size:.8em}
|
||||
#profile a{padding-top:10px;font-size:.875em;font-family:"Open sans",sans-serif;text-transform:none;margin-left:0}
|
||||
#profile img{float:left;width:36px;height:36px;margin-right:15px;border-radius:18px}
|
||||
#profile span{display:inline-block}
|
||||
#profile .lvlname{font-size:.875em;color:#889da0;margin-top:-4px;display:block}
|
||||
|
||||
#mainmenu{display:none;opacity:0;position:absolute;background:#0f373c;margin:0;left:0;right:0}
|
||||
#mainmenu a{padding:6px 0;letter-spacing:1px}
|
||||
#mainmenu .active{color:#fff}
|
||||
#mainmenu .active .fa,.crewards .unlocked .fa{color:#bcd75e}
|
||||
#smnry a{font-size:0.875em;font-family:"Open sans",sans-serif;text-transform:none;letter-spacing:0;margin:0 5% 2px;padding:8px 0 8px 12px;background:#0c2e32;border-radius:3px}
|
||||
#smnry li:first-child{margin-top:10px}
|
||||
#smnry li:last-child{margin-bottom:10px}
|
||||
|
||||
#toggle,.toggle{display:none}
|
||||
.toggle{color:#d9e5e7;display:inline-block;padding:15px 15px 15px 0;position:relative;cursor:pointer;-webkit-touch-callout:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}
|
||||
#toggle:checked ~ menu{display:block;position:fixed;left:0;top:54px;bottom:0;overflow-y:auto;opacity:1}
|
||||
#toggle:checked ~ #mainmenu{display:block;position:fixed;top:56px;bottom:0;overflow-y:auto;opacity:1}
|
||||
|
||||
article{padding:70px 0 30px}
|
||||
aside{display:none}
|
||||
|
|
@ -377,10 +381,18 @@ input[type="submit"][disabled]{text-shadow:1px 2px #d48c4e;background:#f9ac69;bo
|
|||
|
||||
@media only screen and (min-width:1024px){
|
||||
header{position:fixed;left:0;top:0;bottom:0;width:300px;margin:0}
|
||||
header nav{margin:30px 10% 0}
|
||||
menu{display:block;opacity:1;position:relative}
|
||||
menu a{padding:10px 0}
|
||||
#profile{float:none;margin:0 0 15px 12px}
|
||||
header nav{margin:0}
|
||||
header a{margin-left:40px}
|
||||
#home{display:block;opacity:1}
|
||||
#profile{float:none;height:94px;margin-bottom:28px;background:#0c2e32}
|
||||
#profile a{margin-top:15px;margin-left:40px}
|
||||
#profile img{width:44px;height:44px;border-radius:22px}
|
||||
#profile span{display:block}
|
||||
#profile .lvlname{margin-top:0}
|
||||
#mainmenu{display:block;opacity:1;position:relative}
|
||||
#mainmenu li:first-child{display:none;opacity:0}
|
||||
#smnry li:first-child{display:block;opacity:1}
|
||||
#smnry a{margin:0 40px 2px}
|
||||
#toggle,.toggle{display:none}
|
||||
.wrap{margin:0 0 0 300px}
|
||||
article{padding:20px 40px 80px 40px}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue