0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

a much more modern navbar

Browse source
This commit is contained in:
Owen Versteeg 2014-02-16 02:29:53 -05:00
parent 6d0853cee8
commit 06f6d3d192
1 changed files with 62 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
less/navbar.less
View file

@ -16,14 +16,36 @@ nav {
.navbar-link {
padding: .5em;
color: #aaa;
top: -1px;
position: relative;
font-size: 14px;
&:hover {
color: #fff;
}
}
button.btn.close.small-btn {
background: #000;
visibility: hidden;
float: right;
margin-right: 4px;
margin-top: -45px;
font-size: 25px;
color: #fff;
border: 0;
}
.current {
color: #fff; /* make current page white */
}
.pagename {
color: #fff;
padding: 0 1em 0 0;
font-size: 22px;
line-height: 15px;
top: 1px;
position: relative;
}
.navbar input, .navbar .btn {
@ -31,8 +53,48 @@ nav {
/* This ensures that any buttons and inputs in the navbar will not mess up its vertical alignment */
}
/* Necessary for animations
.navbar {
max-height: 1.5em;
}
*/
@media (max-width:500px) {
button.btn.close.small-btn {
visibility: visible;
}
.navbar {
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
overflow: hidden;
}
.pagename {
margin-top: -11px;
}
.navbar:focus {
/* Necesary for animations
max-height: 500px;
height: 100%;
*/
height: auto;
overflow: visible;
}
.navbar:before {
content: "_";
font-weight: bold;
border-bottom: 10px double;
line-height: 0;
float: right;
font-size: 32px;
margin-top: -14px;
position: relative;
background: #000;
height: 21px;
font-family: "Arial-BoldMT", sans-serif;
}
.navbar a {
padding: .5em 0;
width: 50%;
display: block;
}
}