Add a header in the navbar

Signed-off-by: Valentin Popov <info@valentineus.link>
This commit is contained in:
Valentin Popov 2019-03-24 22:10:30 +04:00
parent 9f1e42d525
commit 949f289d3c
Signed by: Valentin Popov
GPG Key ID: 269A00ACA90A8EA3
2 changed files with 27 additions and 20 deletions

View File

@ -1,6 +1,8 @@
{% assign pages = site.pages | where: "show", true %} {% assign pages = site.pages | where: "show", true %}
<div class="navigation-container"> <div class="navigation-container">
<h1 class="navigation-header">Header</h1>
<input id="toggle-button" class="toggle-button" type="checkbox" /> <input id="toggle-button" class="toggle-button" type="checkbox" />
<label class="toggle-label" for="toggle-button"> <label class="toggle-label" for="toggle-button">

View File

@ -13,6 +13,30 @@
width: 100%; width: 100%;
} }
.navigation {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100%;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
position: fixed;
right: 0;
top: 100px;
transform: scale(.1, 0);
transform-origin: 100% 0%;
transition: none;
width: 100%;
}
.navigation-header {
margin: 30px;
position: fixed;
text-transform: uppercase;
}
.toggle-button { .toggle-button {
display: none; display: none;
@ -42,9 +66,8 @@
.toggle-label { .toggle-label {
float: right; float: right;
height: 20px; height: 20px;
margin: 40px;
position: relative; position: relative;
right: 40px;
top: 40px;
width: 15px; width: 15px;
&:hover { &:hover {
@ -67,21 +90,3 @@
} }
} }
} }
.navigation {
background: $color-bg;
border-left: 1px solid $color-bg-alt;
border-right: 1px solid $color-bg-alt;
height: 100%;
left: 0;
margin: auto;
max-width: 52em;
padding: 0;
position: fixed;
right: 0;
top: 100px;
transform: scale(.1, 0);
transform-origin: 100% 0%;
transition: none;
width: 100%;
}