jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-28 11:47:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the menu collapse less aggresively

Browse Source
This commit is contained in:
Paulus Schoutsen 2014-12-23 23:49:44 -08:00
parent f19400796e
commit 0d9fb09ff2
2 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
sass/oscailte/base/_navigation.scss
View File

@ -14,7 +14,10 @@ body{ -webkit-animation: bugfix infinite 1s; }
#toggle, .toggle { display: none; }
.menu li { list-style: none; float:left; }
@media only screen and (max-width: $lap-end){
$menu-collapse: 790px;
// @media only screen and (max-width: $lap-end){
@media only screen and (max-width: $menu-collapse){
.menu { display: none; opacity: 0; width: 100%; position: absolute; right: 0; }
.menu li { display: block; width: 100%; margin: 0; }
.menu li a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
@ -90,7 +93,7 @@ header .grid {
z-index: 20;
}
@media only screen and (max-width: $lap-end){
@media only screen and (max-width: $menu-collapse){
.menu{
background: $white;
border-top: 1px solid $navigation-color;
@ -111,15 +114,21 @@ header .grid {
padding: 15px 15px 15px 25px;
}
.toggle {
position: absolute;
top: 17px;
right: 10px;
}
.toggle::after {
@include border-radius(2px);
@include box-sizing(border-box);
@include transition(all 0.5s linear);
content: attr(data-open);
display: block;
font-family: "FontAwesome";
content: "\f0c9";
display: inline-block;
width: 100%;
margin: 20px 0;
padding: 10px 50px;
padding: 10px 15px;
background: $navigation-color;
text-align: center;
font-size: 12px;
@ -142,17 +151,3 @@ header .grid {
top: 0;
}
}
@media only screen and (max-width: 479px){
.toggle {
display: inline-block;
position: absolute;
top: -3px;
right: 10px;
}
.toggle::after {
padding: 10px 15px;
font-family: "FontAwesome";
content: "\f0c9";
}
}

4
source/_includes/custom/header.html
View File

@ -1,10 +1,10 @@
<div class="grid__item three-tenths lap-four-sixths palm-one-whole ha-title">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="{{ root_url }}/" class="site-title">
<img width='40' src='{{ root_url }}/images/favicon-192x192.png'> {{ site.title }}
</a>
</div>
<div class="grid__item seven-tenths lap-two-sixths palm-one-whole">
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
{% include site/navigation.html %}
</nav>