florent/pages
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #10 from monkeywithacupcake/master

Browse Source 
add collapsible menu and hamburger for mobile - closes #3
This commit is contained in:
Maruan 2018-01-19 14:50:24 +00:00 committed by GitHub
commit 0d48d01553
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 87 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
_includes/header.html
View File

@ -10,6 +10,16 @@
{% endif %}
<nav class="site-nav">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
<path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
<path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
</svg>
</span>
</label>
<div class="trigger">
<!-- About -->

75
_sass/_header.scss
View File

@ -18,6 +18,15 @@
.site-nav {
float: right;
line-height: $nav-height;
.nav-trigger {
display: none;
}
.menu-icon {
display: none;
}
.page-link{
line-height: $line-height;
// Gaps between nav items, but not on the first one
@ -25,19 +34,59 @@
margin-left: 10px;
}
}
// @include media-query($on-palm) {
// position: fixed;
// top: 0px;
// right: 10px;
// text-align: right;
// &:hover .trigger {
// display: block;
// padding-bottom: 5px;
// }
// .page-link {
// display: line;
// }
// }
// added for hamburger
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: $horizontal-spacing-unit / 2;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
label[for="nav-trigger"] {
display: block;
float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer;
}
.menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;
> svg path {
fill: $grey-color-dark;
}
}
input ~ .trigger {
clear: both;
display: none;
}
input:checked ~ .trigger {
display: block;
padding-bottom: 5px;
}
.page-link {
display: block;
padding: 5px 10px;
&:not(:last-child) {
margin-right: 0;
}
margin-left: 10px;
}
}
}
.header-bar{

12
_sass/_media-queries.scss
View File

@ -1,7 +1,13 @@
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
@media screen and (min-width: $viewport-small) {
html {
font-size: 16px;
}
html {
font-size: 16px;
}
h1,
.h1 {

4
_sass/_variables.scss
View File

@ -30,6 +30,7 @@ $abbr-border-bottom: 1px black dotted;
// Page width
$measure-width: 42rem !default;
// Viewport widths
$viewport-small: 32em;
$viewport-medium: 48em;
@ -158,3 +159,6 @@ $img_spacing: 5px;
$img-height: 275px;
$caption-font-size: 12px;
$caption-color: #aaa;
/* add on-palm to be consistent with other jekyll theme media queries */
$on-palm: 600px !default;

4
assets/css/main.scss
View File

@ -5,7 +5,7 @@
@import 'variables';
@import 'media-queries';
@import 'basscss';
@import 'base';
@ -28,7 +28,7 @@
@import 'gists';
@import 'links';
@import 'measure';
@import 'media-queries';
@import 'social-icons';
@import 'tables';
@import 'typography';