jekyll-theme-explosive-lab 0.1.2.2 → 0.1.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: dc10fe6d3c5b827544ba216f6b4590fdce1312e8
-  data.tar.gz: 6446c8fd4360cf8348f80883f8b5cb6f3e9e9adc
+  metadata.gz: 3ab67d0901c91b9811ee399204aadb3d868f35e5
+  data.tar.gz: 517e42fe3d77a503d919bb94e356bd7448f72ee9
 SHA512:
-  metadata.gz: 92f0e01933ed3bdaeadd5add04720e6bb3f8b4b2e24e88f7ab48b93a071744cd9bfafe29fa695b0badc15f16d947d960a016c1b0b931b28d6a3b5986472e65da
-  data.tar.gz: eac8938a9be41102b6a6f29ed48a13d1a16f25f2d9a164982758739e09cbb72070ea2c2958de74fd1bc21300c0f64926cd5b0812ab4b8fe3d38fc5c027ce52e9
+  metadata.gz: 9b74fc7a78510068e2af29bfe9ea7075fdcc320c895813d7e71d73df7fb53cd5611993025dd2b25bf4af22f8a8ad39d0ec4c836f1bf72ca2a690a89173ba2b62
+  data.tar.gz: bf8e6d1e4987f57a2fc5015f9b9064578a863e8f1c2c6e4f556a59060d970239e3c7ba954feba1e84785a1738267d019aaa8b0ed62258c51f5f96e9bc74d295b

data/_includes/header.html

@@ -1,22 +1,26 @@
 <header>
     <div class="header-logo">
         <span>
-            <a href="/" title="ExplosiveLab Home Page">{{page.title}}</a>
+            <a href="/" title="ExplosiveLab Home Page">{{site.title}}</a>
         </span>
     </div>
+</header>
 
-    <nav class="header-navigation">
-        <div class="header-navigation-icon">
-            <span>menu</span>
+<nav class="header-navigation">
+        <div class="header-navigation-icon no-select">
             <div class="card-1">
                 <i class="material-icons md-48">apps</i>
             </div>
         </div>
 
         <ul class="header-navigation-menu disabled">
-            <li><a href="">blog</a></li>
-             <li><a href="">chi siamo</a></li>
-             <li><a href="">contatti</a></li>
+            {% for item in site.data.menu.menuitems %}
+                <li>
+                    <a href="{{item.link}}">
+                        <span>{{item.text}}</span>
+                        <i class="material-icons md-48">{{item.icon-name}}</i>
+                    </a>
+                </li>
+            {% endfor %}
         </ul>
-    </nav>
-</header>
+    </nav>

data/_sass/main.scss

@@ -27,6 +27,33 @@ html {
   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 
+/* animation keyframes */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation-name: fadeInUp;
+}
+
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */
+}
+
 
 
 /* Google font */
@@ -78,11 +105,18 @@ body  {
 header {
     display: flex;
     justify-content: space-between;
-    background: $primary-700;
+    z-index: 10;
 
-    padding: 5px 10px;
 
+    position: fixed;
+    top: 0; left: 0;
 
+    width: 100%;
+    height: 60px;  
+
+    padding: 5px 10px;
+
+    background: $primary-700;
 
     .header-logo {
         display: flex;
@@ -101,84 +135,100 @@ header {
         }
     } 
 
-    .header-navigation {
-            position: absolute;
-            bottom: 10px;
-            right: 10px;
+ 
+}
 
-           display: flex;
-           flex-direction: row-reverse;
-           align-items: center;
+.header-navigation {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
 
-        &-icon {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: center;
 
-            display: flex;
-            flex-direction: column;
-            align-items: center;  
+    &-icon {
 
-            color: #ffffff;
-            cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;  
+        z-index: 10;
 
-            @include transition(opacity .3s ease-out);
-            opacity: .8;
+        color: #ffffff;
+        cursor: pointer;
 
-            &:hover {
-                opacity: 1;
-            }    
+        @include transition(all .3s ease-out);
 
-            div {
-                display: flex;
+        div {
+            display: flex;
 
-                border-radius: 50%;
-                padding: 5px;
+            border-radius: 50%;
+            padding: 5px;
 
-                background: $primary-700;
+            background: $primary-700;
+        }
+
+        &:hover {
+            div {
+                background: $primary-500;
             }
+        }    
 
-            span {
-                font-size: $font-small-x;
-                font-weight: bold;
-                text-transform: uppercase;
-                color: $primary-100;
-            }      
+        &.enabled {
 
-            @include media (">phone") {
-              
+            div {
+                background: #ffffff;
+                color: $primary-700;
+                transform: rotate(360deg);
             }
+        }    
+
+        @include media (">phone") {
+            
         }
+    }
 
-        &-menu {
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
+    &-menu {
+        display: flex;
+        flex-flow: column;
+        justify-content: space-around;
+        align-items: flex-start;
+        z-index: 8; 
 
-            list-style: none;
-            margin: 0;
+        animation: .3s ease-out fadeInUp;
 
-            min-width: 300px;
-            height: 60px;
+        list-style: none;
+        margin: 0;
 
-            &.disabled {
-                display: none;
-            }
+        &.disabled {
+            display: none;
+        }
 
-            &.enabled {
-                display: flex;
-            }
+        &.enabled {
+            display: flex;
+            position: fixed;
+            top: 60px; left: 0;
+            width: 100%;
+            height: 100%;
 
-            a {
-                font-weight: bold;
-                text-transform: uppercase;
-                text-decoration: none;
-                color: $primary-link;
-            }
+            background-color: rgba($primary-700, .9);
+        }
 
-             @include media (">phone") {
-                
-            }
+        a {
+            font-size: $font-large;
+
+            font-weight: bold;
+            text-transform: uppercase;
+            text-decoration: none;
+
+            color: $accent-100;
+        }
+
+            @include media (">phone") {
+            
         }
-      
     }
+    
 }
 
 main {

data/assets/js/main.js

@@ -1,11 +1,18 @@
 $(document).ready(function(){
     var hamburgerIcon = $('.header-navigation-icon');
+    var hamburgerIconName = $('.header-navigation-icon i');
     var menu = $('.header-navigation-menu');
 
     function changeMenuStatus() {
         if( menu.hasClass('enabled')) {
+            hamburgerIcon.removeClass('enabled').addClass('disabled');
+            hamburgerIconName.text('apps');
+
             menu.removeClass('enabled').addClass('disabled');
         } else {
+           hamburgerIcon.addClass('enabled').removeClass('disabled');
+           hamburgerIconName.text('close');
+
            menu.addClass('enabled').removeClass('disabled');
         }
     }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-explosive-lab
 version: !ruby/object:Gem::Version
-  version: 0.1.2.2
+  version: 0.1.2.3
 platform: ruby
 authors:
 - Andrea Castenetto
@@ -97,5 +97,5 @@ rubyforge_project:
 rubygems_version: 2.6.10
 signing_key: 
 specification_version: 4
-summary: Jekyll theme for http://explosivelab.it NOT READY YET FOR PRODUCTION.
+summary: Jekyll theme NOT READY YET FOR PRODUCTION. I\' working on it. '
 test_files: []