alembic-jekyll-theme 3.0.10 → 3.0.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 69c0580d6c8c6caa8af4d803e8eaf400233e0d36
-  data.tar.gz: e9ce5c4d1deae8c4f12ed70769a8b8cc7e6c212a
+  metadata.gz: 96f8bf0b791d7e961bd4d3cd97e03d7ece509c68
+  data.tar.gz: 800d6d25ed3d39c5b9282c7ace66c81aeb354cd7
 SHA512:
-  metadata.gz: 041cc9b6daec0b34bf9b8332c9a1912e9f41d425438b81d9b199f73abd174cfc7d5e4dfe88cdb7671b526047e412a046e8a1360d5bd8a944aaf870dd77c7b185
-  data.tar.gz: ef0fc107e20d83468e07f8231621c33e5ba1db7716cac9f5c610afd20f55f4d4a0dd0296c421b715fd3183fe4f0c2c06b4a8ff1ecf7bd73a5e5bc5ceb1f309db
+  metadata.gz: 57d47b1836f1dc56f0068bef6141ac4d94c90a7ffe5efe9e27d37a6ae55fd3f01708e9db91d2421d2c3954cec5ef8a0e556f7f3c48e9f6d8018b0bc4c3d6a1ae
+  data.tar.gz: 3fb4420bd4c61c6938e4945d7ae66f3870b2e31314ee8b89757a380abbb9a6b03133d893bdb3e474bbfbf233f711e4c853c3b4ecf17a6c19c178bac1d0a7d9ce

data/_includes/nav-header.html

@@ -14,41 +14,41 @@
       </li>
     {% endfor %}
   </ul>
+  <button class="button  button--nav" aria-label="Menu toggle">
+    {% include icon.html id="nav" title="Menu" %}
+  </button>
 </nav>
 {% else %}
   {% include nav-default.html %}
 {% endif %}
 
-<template id="buttontoggle">
-  <button class="button  button--nav" aria-label="Menu toggle">
-    {% include icon.html id="nav" title="Menu" %}
-  </button>
-</template>
-
 <script type="text/javascript">
+  // Get list and button
+  const navList = document.querySelector('.header .list--nav')
+  const button  = document.querySelector('.header .button--nav')
+
+  // Hide nav and apply toggle
+  const collapseNav = () => {
+    if (document.body.clientWidth < 640) {
+      navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
+    } else {
+      navList.removeAttribute('style')
+    }
 
-const nav = document.querySelector('.nav')
-const buttonTemplate = document.querySelector('#buttontoggle')
-const button = document.importNode(buttonTemplate.content, true)
-nav.appendChild(button)
-
-const applyToggle = (list, button, breakpoint) => {
-  const navList = document.querySelector(list)
-  if (document.body.clientWidth < breakpoint) {
-    const navHeight = navList.clientHeight
-    const navButton = document.querySelector(button)
-    navList.style.maxHeight = '0px'
-
-    navButton.onclick = () => {
-      if (navList.style.maxHeight == '0px') {
-        navList.style.maxHeight = `${navHeight}px`
+    button.onclick = () => {
+      navList.style.setProperty('transition', `margin .1s`)
+      if (navList.style.getPropertyValue('--listHeight')) {
+        navList.style.removeProperty('--listHeight')
       } else {
-        navList.style.maxHeight = '0px'
+        navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
       }
     }
   }
-}
 
-applyToggle('.list--nav', '.button', 640)
+  collapseNav()
 
+  // Check on resize if to collapse nav
+  window.addEventListener('resize', () => {
+    collapseNav()
+  })
 </script>

data/_sass/_theme.scss

@@ -39,6 +39,8 @@ body {
   display: flex;
   flex-direction: column-reverse;
   align-items: flex-end;
+  justify-content: flex-end;
+  overflow: hidden;
 }
 
 .feature {
@@ -175,7 +177,7 @@ body {
   list-style: none;
   &--nav {
     overflow: hidden;
-    transition: .2s;
+    margin-bottom: var(--listHeight, 0);
   }
   .item--post,
   .item--result,

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: alembic-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 3.0.10
+  version: 3.0.11
 platform: ruby
 authors:
 - David Darnes
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-03-18 00:00:00.000000000 Z
+date: 2019-04-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll