begin lang implementation

Gemfile.lock

@@ -104,4 +104,4 @@ DEPENDENCIES
   rake (~> 10.0)
 
 BUNDLED WITH
-   1.13.6
+   1.13.7

_config.yml

@@ -211,9 +211,6 @@ defaults:
 
 # Outputting
 permalink: /:categories/:title/
-paginate: 5 # amount of posts to show
-paginate_path: /page:num/
-timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 
 
 # Plugins

_includes/masthead.html

@@ -2,7 +2,6 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
-        <button><div class="navicon"></div></button>
         <ul class="visible-links">
           <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ '/' | absolute_url }}">{{ site.title }}</a></li>
           {% for link in site.data.navigation.main %}
@@ -14,7 +13,10 @@
             <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
           {% endfor %}
         </ul>
-        <ul class="hidden-links hidden"></ul>
+        <ul class="hidden-links links-menu hidden"></ul>
+        <ul class="hidden-links lang-menu hidden"></ul>
+        <button class="lang-selector"><div class="langicon"><i class="fa fa-language fa-lg" aria-hidden="true"></i></div></button>
+        <button class="nav-selector" id="toggle-nav"><div class="navicon"></div></button>
       </nav>
     </div>
   </div>

_sass/_navigation.scss

@@ -193,6 +193,7 @@
     position: absolute;
     height: 100%;
     right: 0;
+    top: 0;
     padding: 0 0.5rem;
     border: 0;
     outline: none;
@@ -201,6 +202,10 @@
     cursor: pointer;
   }
 
+  .nav-selector {
+    right: 3rem;
+  }
+
   .visible-links {
     display: table;
 
@@ -249,6 +254,10 @@
     }
   }
 
+  .links-menu {
+    right: 3rem !important;
+  }
+
   .hidden-links {
     position: absolute;
     top: 100%;

_sass/_utilities.scss

@@ -295,8 +295,6 @@ body:hover .visually-hidden button {
   height: $navicon-height;
   background: #fff;
   margin: auto;
-  -webkit-transition: 0.3s;
-  transition: 0.3s;
 
   &:before,
   &:after {
@@ -306,8 +304,6 @@ body:hover .visually-hidden button {
     width: $navicon-width;
     height: $navicon-height;
     background: #fff;
-    -webkit-transition: 0.3s;
-    transition: 0.3s;
   }
 
   &:before {
@@ -320,7 +316,6 @@ body:hover .visually-hidden button {
 }
 
 .close .navicon {
-  /* hide the middle line*/
   background: transparent;
 
   /* overlay the lines by setting both their top values to 0*/
@@ -343,6 +338,69 @@ body:hover .visually-hidden button {
   }
 }
 
+/*
+   Langicons
+   ========================================================================== */
+
+.langicon {
+  position: relative;
+  width: $navicon-width;
+  background: transparent;
+  margin: auto;
+
+  &:before,
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: $navicon-width;
+    height: $navicon-height;
+    background: #fff;
+    display: none;
+  }
+
+  /* overlay the lines by setting both their top values to 0*/
+  &:before, &:after{
+    -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    top: 0;
+    width: $navicon-width;
+  }
+
+  /* rotate the lines to form the x shape*/
+  &:before{
+    -webkit-transform: rotate3d(0,0,1,45deg);
+            transform: rotate3d(0,0,1,45deg);
+  }
+  &:after{
+    -webkit-transform: rotate3d(0,0,1,-45deg);
+            transform: rotate3d(0,0,1,-45deg);
+  }
+}
+
+.close .langicon {
+  /* hide the middle line*/
+  background: transparent;
+
+  .fa-language {
+    display: none;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+  }
+
+  /* overlay the lines by setting both their top values to 0*/
+  &:before, &:after{
+    -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    top: 0;
+    width: $navicon-width;
+    display: block;
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+  }
+}
 
 /*
    Sticky, fixed to top content

assets/js/_main.js

@@ -29,8 +29,8 @@ $(document).ready(function(){
   $(".sticky").Stickyfill();
 
   var stickySideBar = function(){
-    var show = $(".author__urls-wrapper button").length === 0 ? $(window).width() > 1024 : !$(".author__urls-wrapper button").is(":visible");
-    // console.log("has button: " + $(".author__urls-wrapper button").length === 0);
+    var show = $(".author__urls-wrapper #toggle-nav").length === 0 ? $(window).width() > 1024 : !$(".author__urls-wrapper #toggle-nav").is(":visible");
+    // console.log("has button: " + $(".author__urls-wrapper #toggle-nav").length === 0);
     // console.log("Window Width: " + windowWidth);
     // console.log("show: " + show);
     //old code was if($(window).width() > 1024)
@@ -54,9 +54,9 @@ $(document).ready(function(){
 
   // Follow menu drop down
 
-  $(".author__urls-wrapper button").on("click", function() {
+  $(".author__urls-wrapper #toggle-nav").on("click", function() {
     $(".author__urls").fadeToggle("fast", function() {});
-    $(".author__urls-wrapper button").toggleClass("open");
+    $(".author__urls-wrapper #toggle-nav").toggleClass("open");
   });
 
   // init smooth scroll

assets/js/plugins/jquery.greedy-navigation.js

@@ -6,15 +6,15 @@
 */
 
 var $nav = $('#site-nav');
-var $btn = $('#site-nav button');
+var $btn = $('#site-nav #toggle-nav');
 var $vlinks = $('#site-nav .visible-links');
-var $hlinks = $('#site-nav .hidden-links');
+var $hlinks = $('#site-nav .hidden-links.links-menu');
 
 var breaks = [];
 
 function updateNav() {
 
-  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
+  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 80;
 
   // The visible list is overflowing the nav
   if($vlinks.width() > availableSpace) {
@@ -65,8 +65,28 @@ $(window).resize(function() {
 });
 
 $btn.on('click', function() {
-  $hlinks.toggleClass('hidden');
-  $(this).toggleClass('close');
+  if($hlinks.is(":visible")){
+    $hlinks.addClass('hidden');
+    $btn.removeClass('close');
+  } else {
+    $hlinks.removeClass('hidden');
+    $('.lang-menu').addClass('hidden');
+    $btn.addClass('close');
+    $('.lang-selector').removeClass('close');
+  }
+});
+
+// Language selector button
+$('.lang-selector').on('click', function() {
+  if($('.lang-menu').is(":visible")){
+    $('.lang-menu').addClass('hidden');
+    $('.lang-selector').removeClass('close');
+  } else {
+    $('.lang-menu').removeClass('hidden');
+    $('.lang-selector').addClass('close');
+    $hlinks.addClass('hidden');
+    $btn.removeClass('close');
+  }
 });
 
 updateNav();