Skip to content

N
node-slate
Commit b5419b1e authored by Robert Lord's avatar Robert Lord
Browse files
Options

Add background to nav button

parent 3a91faa8
Hide whitespace changes
Inline Side-by-side
Showing with 15 additions and 11 deletions
source/layouts/layout.erb
View file @ b5419b1e
......@@ -42,8 +42,10 @@ under the License.
<body class="<%= page_classes %>">
<a href="#" id="nav-button">
<%= image_tag('navbar.png') %>
<span>NAV</span>
<span>
NAV
<%= image_tag('navbar.png') %>
</span>
</a>
<div class="tocify-wrapper">
<%= image_tag "logo.png" %>
......
source/stylesheets/screen.css.scss
View file @ b5419b1e
......@@ -197,12 +197,20 @@ html, body {
// button to show navigation on mobile devices
#nav-button {
span {
display: block;
$side-pad: $main-padding / 2 - 8px;
padding: $side-pad $side-pad $side-pad;
background-color: rgba($main-bg, 0.7);
@include transform-origin(0, 0);
@include transform(rotate(-90deg) translate(-100%, 0));
border-radius: 0 0 0 5px;
}
padding: 0 1.5em 5em 0; // increase touch size area
display: none;
position: fixed;
top: 0;
left: 0;
$side-pad: $main-padding / 2 - 8px;
padding: $side-pad 1.5em 5em $side-pad; // increase touch area size
z-index: 100;
color: #000;
text-decoration: none;
......@@ -211,13 +219,7 @@ html, body {
line-height: 16px;
img {
height: 16px;
}
span {
position: absolute;
top: 35px;
left: 1px;
line-height: 1;
@include transform(rotate(-90deg));
vertical-align: bottom;
}
@include transition(left ease-in-out 0.3s);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment