futuro 0.3.5 → 0.3.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5eb9020cee5d4dcaf7f60417b902837ff427a4c04fa66333dab12187386bcadd
-  data.tar.gz: 49aac11688df737589d9f372e745220e2822dd430add5304e05618427f3fb907
+  metadata.gz: 8b5d9e943fc450266667903cdc72d260142e41ee46b44da6c77de4761cdd0a40
+  data.tar.gz: cb64f907684df82c3e62dc407f1496b07bd938987539667a32fd9cc810050f5f
 SHA512:
-  metadata.gz: 13daae7950a152c137868773f6aa1c47cf9395297ae79251d2cfbf30d1596f9457dc98f1e3372792c28421732b211dc6f67ac7c58ab234a2d82eced648b83699
-  data.tar.gz: e7f594a4229b8ddf4fa6951fd531df733b0338bef1447503d927106331f25b54a5df9d8f72d4f299469f495ddb2a5a69cc37985ea53be852cb9c79af8ef77093
+  metadata.gz: 63ffedad469232b422f2b040a088fe9fa94e1cd32d2a411858e75ecb14004bfdf51ea9949ef794becf12a1066a6a6c9d1ba43a47f377fb9184bcb4e09b9d9e80
+  data.tar.gz: 88bd3bf5f5ecf967b0494726f043c61c5567999f43d078c61c2349e03cf372c1c16f6900a16e1d53604af97e43ff0dcfccb5ae9584f7d38b6f84bfe61c448985

data/_includes/html/head.liquid

@@ -3,10 +3,10 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="format-detection" content="telephone=no">
-  <link rel="icon" href="{{ "/assets/img/favicon.png?v=1579188852158" | relative_url }}">
+  <link rel="icon" href="{{ "/assets/img/favicon.png?v=1579568911237" | relative_url }}">
   {% seo %}
   {% feed_meta %}
-  <link rel="stylesheet" href="{{ "/assets/css/styles.css?v=1579188852158" | relative_url }}">
+  <link rel="stylesheet" href="{{ "/assets/css/styles.css?v=1579568911237" | relative_url }}">
   {% include html/analytics.liquid %}
-  <script src="{{ "/assets/js/header.min.js?v=1579188852158" | relative_url }}"></script>
+  <script src="{{ "/assets/js/header.min.js?v=1579568911237" | relative_url }}"></script>
 </head>

data/_includes/html/overlay/load.liquid

@@ -4,3 +4,50 @@
 <div class="box _load">
   <div class="bar _load"></div>
 </div>
+
+<script type="text/javascript">
+
+let SiteTl = gsap.timeline({repeat:-1,repeatDelay:0.3});
+
+function LoadAnim() {
+  let speed = 0.3,
+      title = '.title._overlay-load',
+      box   = '.box._load',
+      bar   = '.bar._load';
+
+      SiteTl
+      .set(title,{
+        fontFamily: "'FuturaBT-Bold', 'Helvetica Neue', sans-serif",
+        textTransform: "uppercase",
+        fontSize: "4.8rem",
+        color: "red"
+      })
+      .set(box,{borderColor: "red"})
+      .set(bar,{backgroundColor: "red"})
+      .set(title,{
+        fontFamily: "'FuturaBT-Book', 'Helvetica Neue', sans-serif",
+        textTransform: "none",
+        fontSize: "4.4rem",
+        color: "blue"
+      },"+=" + speed)
+      .set(box,{borderColor: "blue"})
+      .set(bar,{
+        backgroundColor: "blue",
+        width: "43%"
+      })
+      .set(title,{
+        fontFamily: "'FuturaBT-BookItalic', 'Helvetica Neue', sans-serif",
+        fontSize: "5.4rem",
+        color: "black"
+      },"+=" + speed)
+      .set(box,{borderColor: "black"})
+      .set(bar,{
+        backgroundColor: "black",
+        width: "93%"
+      })
+      ;
+}
+
+LoadAnim();
+
+</script>

data/_includes/html/overlay.liquid

@@ -1,6 +1,6 @@
 
 {% if include.state %}
-<div class="overlay{{ include.title | downcase | prepend: ' _' }}{{ include.state | downcase | prepend: ' --' }}{% if include.demo %} --demo{% endif %}">
+<div class="overlay{{ include.title | downcase | prepend: ' _' }}{% if include.demo %} --demo{% endif %}" style="display:grid;">
 {% else %}
 <div class="overlay{{ include.title | downcase | prepend: ' _' }}{% if include.demo %} --demo{% endif %}">
 {% endif %}

data/_includes/html/scripts.liquid

@@ -1,2 +1,2 @@
 
-<script src="{{ "/assets/js/footer.min.js?v=1579188852158" | relative_url }}"></script>
+<script src="{{ "/assets/js/footer.min.js?v=1579568911237" | relative_url }}"></script>

data/_layouts/single.html

@@ -2,12 +2,19 @@
 layout: mini
 ---
 
+{% assign setup   = site.setup | prepend: 'setup-' %}
+{% assign layout  = page.layout | prepend: ' layout-' %}
+{% assign type    = page.type | prepend: ' type-' %}
+{% assign book    = page.collection | prepend: ' book-' %}
+{% assign chapter = page.chapter | replace: ' ','-' | prepend: ' chapter-' | downcase %}
+{% assign title   = page.title | prepend: ' title-' | downcase %}
+
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: site.lang | default: "en" }}" class="no-js">
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}" class="no-js">
 
   {% include html/head.liquid %}
 
-  <body class="{{ page.layout | prepend: 'layout-' }}{{ page.type | prepend: ' type-' }}{% if page.collection %}{{ page.collection | prepend: ' book-' }}{% endif %}{% if page.chapter %}{{ page.chapter | replace: ' ','-' | prepend: ' chapter-' | downcase }}{% endif %}{{ page.title | prepend: ' title-' | downcase }}">
+  <body class="{{ setup }}{{ layout }}{{ type }}{% if page.collection %}{{ book }}{% endif %}{% if page.chapter %}{{ chapter }}{% endif %}{{ title }}">
 
     {% include html/overlay.liquid title='load' exit='false' state='open' %}
     {% include html/overlay.liquid title='mobile' exit='false' %}

data/_sass/_bar.scss

@@ -2,7 +2,7 @@
 .bar {
 
   &._load {
-    background-color: $gun;
+    background-color: red;
     height: 20px;
     width: 7%;
   }

data/_sass/_box.scss

@@ -3,7 +3,7 @@
 
   &._load {
     border: 3px solid;
-    border-color: $gun;
+    border-color: red;
   }
 
   &._mobile {

data/_sass/_lnk.scss

@@ -19,20 +19,10 @@
   &._browse {
 
     &-book {
-      &.active {
-        background-color: rgba(black,0.07);
-      }
-    }
-
-    &-chapter {
-      &.active {
-        background-color: rgba(black,0.07);
-      }
-    }
-
-    &-page {
-      &.active {
-        background-color: rgba(black,0.07);
+      &.--draft {
+        pointer-events: none;
+        user-select: none;
+        opacity: 0.5;
       }
     }
   }

data/_sass/_title.scss

@@ -14,6 +14,13 @@
     &-search {
       border-bottom: 2px solid $gun;
     }
+
+    &-load {
+      @extend %bold;
+      text-transform: uppercase;
+      font-size: 4.8rem;
+      color: red;
+    }
   }
 
   &._mobile {

data/_sass/_wrap.scss

@@ -56,7 +56,7 @@
     &.--load {
       text-align: center;
 
-      p + .box._load {
+      .title + .box {
         margin-top: 20px;
       }
     }

data/_sass/futuro.scss

@@ -20,7 +20,6 @@
 'form',
 'input',
 'lnk',
-'keyframes',
 'nav',
 'overlay',
 'site',

data/_sass/helpers/_mixins.scss

@@ -38,7 +38,7 @@
   display: grid;
 }
 
-@mixin rotatetitle($origin:bottomleft,$deg:-90deg){
+@mixin rotatetitle($origin:bottom left,$deg:-90deg){
   transform-origin: $origin;
   transform: rotate($deg);
   position: absolute;

data/assets/js/custom/CheckWidth.js

@@ -5,17 +5,16 @@ const PrintWidth = () => {
       percent = (100/width) * size + '%';
 
   $('.width').html(more);
-  TweenMax.set('.bar._mobile',{width:percent});
+  gsap.set('.bar._mobile',{width:percent});
 }
 
 const CheckWidth = () => {
   if (NoMobile) {
-    console.log('no mobile');
     if (IsMobile) {
-      TweenMax.set('.overlay._mobile',{className:'+=--open'});
+      gsap.set('.overlay._mobile',{display:open});
       PrintWidth();
     } else {
-      TweenMax.set('.overlay._mobile',{className:'-=--open'});
+      gsap.set('.overlay._mobile',{display:'none'});
     }
   }
 }
@@ -24,7 +23,7 @@ $(CheckWidth);
 
 $(window).resize(function() {
   if (NoMobile) {
-    IsMobile ? $(site).removeClass(open) : $(site).addClass(open);
+    IsMobile ? gsap.set('.overlay._mobile',{display:open}) : gsap.set('.overlay._mobile',{display:'none'}) ;
     CheckWidth();
   }
 });

data/assets/js/custom/ExpandBlock.js

@@ -0,0 +1,16 @@
+const ExpandBlock = (e) => {
+  let ting = $(e.target),
+      target = ting.parent().siblings('.area._page-artwork').children('.code-wrap');
+
+  if (target.css('display') == 'none') {
+    gsap.set(target,{display:open});
+    gsap.set(ting,{text:"Hide"});
+  } else {
+    gsap.set(target,{display:"none"});
+    gsap.set(ting,{text:"Show"});
+  }
+}
+
+$('.block._expand-block').click(function(e) {
+  ExpandBlock(e);
+});

data/assets/js/custom/Let.js

@@ -4,21 +4,8 @@ let body       = $('body'),
     page       = 560,
     half       = page * 0.5,
     site       = '.site',
-    load       = '.overlay._load',
-    open       = '--open',
+    open       = 'grid',
     NoMobile   = true,
     AboutOpen  = false,
     BrowseOpen = false,
     SearchOpen = false;
-
-$('.block._expand-block').click(function() {
-  let target = $(this).parent().siblings('.area._page-artwork').children('.code-wrap');
-
-  if (target.hasClass(open)) {
-    target.removeClass(open);
-    $(this).text('Show');
-  } else {
-    target.addClass(open);
-    $(this).text('Hide');
-  }
-});

data/assets/js/custom/OpenOverlay.js

@@ -3,13 +3,13 @@ const SearchInput   = $('.input.--search'),
       SearchResults = $('.block._results');
 
 const OpenOverlay = type => {
-  TweenMax.set(body,{className:'+=--overlay'});
-  TweenMax.set('.overlay._' + type,{className:'+=--open'});
+  gsap.set(body,{overflow:"hidden"});
+  gsap.set('.overlay._' + type,{display:open});
 }
 
 const CloseOverlay = type => {
-  TweenMax.set(body,{className:'-=--overlay'});
-  TweenMax.set('.overlay._' + type,{className:'-=--open'});
+  gsap.set(body,{clearProps:"overflow"});
+  gsap.set('.overlay._' + type,{display:"none"});
 }
 
 function KeyFunc(e) {

data/assets/js/custom/SetupHome.js

@@ -1,23 +1,28 @@
 
 const SetupHome = () => {
 
-  TweenMax.defaultEase = Sine.easeInOut;
+  if (body.hasClass('setup-library') &&
+      body.hasClass('layout-single')) {
 
-  let tl = new TimelineMax({repeat:-1,yoyo:true});
+    let tl = gsap.timeline({repeat:-1,yoyo:true,ease:"sine.inOut"});
 
-  tl.fromTo('.area._book',1,{y:-5},{y:5});
+    tl.fromTo(".area._book",{y:-5},{duration:1,y:5});
 
-  $('.wrap._home').slick({
-    slidesToScroll : 1,
-    slidesToShow : 5,
-    infinite : true,
-    arrows : false
-  });
+    $('.wrap._home').slick({
+      slidesToScroll : 1,
+      slidesToShow : 5,
+      infinite : true,
+      arrows : false
+    });
 
-  $('.wrap._book').hover(
-    function() { TweenMax.to(this,0.1,{ y : -20 }); },
-    function() { TweenMax.to(this,0.1,{ y : 0 }); }
-  );
+    $('.wrap._book').hover(
+    function() {
+      gsap.to(this,{duration:0.1,y:-20});
+    },
+    function() {
+      gsap.to(this,{duration:0.1,y:0});
+    });
+  }
 }
 
 $(SetupHome);

data/assets/js/custom/SiteFunc.js

@@ -3,14 +3,22 @@ const SiteFunc = () => {
 
   if (NoMobile) {
     if (!IsMobile) {
-      $(site).addClass(open);
+      if (body.hasClass('setup-library') &&
+          body.hasClass('layout-single')) {
+        gsap.set(site,{display:'block'});
+      } else {
+        gsap.set(site,{display:open});
+      }
     }
-  } else {
-    $(site).addClass(open);
+  }
+
+  else {
+    gsap.set(site,{display:open});
   }
 
   setTimeout(function() {
-    $(load).removeClass(open);
+    gsap.set('.overlay._load',{display:'none'});
+    SiteTl.pause();
   },1000);
 }
 

data/assets/js/custom/StartBrowse.js

@@ -3,7 +3,8 @@ let browsabl = $('.col._browse.--chapter').children('._browse-chunk').children()
     books    = $('.lnk._browse-book'),
     chapters = $('.lnk._browse-chapter'),
     pages    = $('.lnk._browse-page'),
-    chunk    = '._browse-chunk';
+    chunk    = '._browse-chunk',
+    shade    = 'rgba(0,0,0,0.07)';
 
 const StartBrowse = () => {
   let book    = $('.block._browse-lnk','.col._browse.--book')[0],
@@ -13,12 +14,12 @@ const StartBrowse = () => {
       bShade  = $(book)[0].children[0],
       cShade  = $(chapter)[0].children[0].children[0],
       pShade  = $(pChild)[0].children[0].children[0],
-      tl      = new TimelineMax();
+      tl      = gsap.timeline();
 
       tl
       .set(chunk,{display:'none'})
-      .set([chapter,page,pChild],{display:'block'})
-      .set([bShade,cShade,pShade],{className:'+=active'})
+      .set([chapter,page,pChild],{display:"block"})
+      .set([bShade,cShade,pShade],{backgroundColor:shade})
       ;
 }
 
@@ -30,13 +31,13 @@ const HoverBook = (e) => {
       pChild  = $(page)[0].children[0],
       cShade  = $(chapter)[0].children[0].children[0],
       pShade  = $(pChild)[0].children[0].children[0],
-      tl      = new TimelineMax();
+      tl      = gsap.timeline();
 
       tl
       .set(chunk,{display:'none'})
-      .set([chapter,page,pChild],{display:'block'})
-      .set([books,chapters,pages],{className:'-=active'})
-      .set([ting,cShade,pShade],{className:'+=active'})
+      .set([chapter,page,pChild],{display:"block"})
+      .set([books,chapters,pages],{clearProps:"backgroundColor"})
+      .set([ting,cShade,pShade],{backgroundColor:shade})
       ;
 }
 
@@ -48,23 +49,23 @@ const HoverChap = (e) => {
       pChunkA    = $(chunk + '.--' + aLabel, '.col._browse.--page'),
       pChunkB    = $(chunk + '.--' + bLabel, pChunkA),
       pChunkBKid = $(pChunkB)[0].children[0].children[0];
-      tl         = new TimelineMax();
+      tl         = gsap.timeline();
 
       tl
       .set(chunk,{display:'none'})
-      .set([cChunk,pChunkA,pChunkB],{display:'block'})
-      .set([chapters,pages],{className:'-=active'})
-      .set([ting,pChunkBKid],{className:'+=active'})
+      .set([cChunk,pChunkA,pChunkB],{display:"block"})
+      .set([chapters,pages],{clearProps:"backgroundColor"})
+      .set([ting,pChunkBKid],{backgroundColor:shade})
       ;
 }
 
 const HoverPage = (e) => {
   let ting = $(e.target),
-      tl   = new TimelineMax();
+      tl   = gsap.timeline();
 
       tl
-      .set(pages,{className:'-=active'})
-      .set(ting,{className:'+=active'})
+      .set(pages,{clearProps:"backgroundColor"})
+      .set(ting,{backgroundColor:shade})
       ;
 }
 

data/assets/js/custom/UtilShare.js

@@ -14,16 +14,17 @@ const UtilShare = e => {
       url   = $(ting).children('._util-url').text().replace('index',''),
       title = $(ting)[0].children[1],
       reset = '',
-      tl    = new TimelineMax();
+      tl    = gsap.timeline();
 
-      if (type == 'page') { reset = 'Copy page'; }
-      if (type == 'chapter') {}
+      if (type == 'page') {
+        reset = 'Copy page';
+      }
 
       UtilCopy(url);
 
       tl
       .set(title,{text:'Copied!'})
-      .to(title,0.3,{opacity:0},'+=0.6')
+      .to(title,{duration:0.3,opacity:0},'+=0.6')
       .set(title,{text:reset,clearProps:'all'},'+=0.3')
       ;
 }