futuro 0.2.8 → 0.2.9

data/_sass/_slick.scss

@@ -0,0 +1,125 @@
+
+.slick {
+
+  &-slide {
+    margin-right: 10px;
+    margin-left: 10px;
+    height: 100%;
+    float: left;
+
+    > div {
+      height: 100%;
+    }
+  }
+
+  &-list {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    margin: 0 auto;
+    width: 650px;
+    height: 100%;
+    z-index: 2;
+    padding: 0;
+  }
+
+  &-arrow {
+    transition: opacity 200ms ease;
+    background-color: transparent;
+    text-indent: -9999px;
+    position: absolute;
+    border-radius: 0;
+    height: 100%;
+    width: 50%;
+    z-index: 1;
+    padding: 0;
+    top: 0;
+  }
+
+  &-prev {
+    background: url('/assets/svg/arrow-left.svg') no-repeat center right 310px;
+    left: 0;
+  }
+
+  &-next {
+    background: url('/assets/svg/arrow-right.svg') no-repeat center left 310px;
+    right: 0;
+  }
+
+  &-slider {
+    -webkit-tap-highlight-color: transparent;
+    touch-action: pan-y;
+    position: relative;
+    user-select: none;
+    display: block;
+  }
+
+  &-slide {
+    min-height: 1px;
+    display: none;
+
+    &.slick-loading img {
+      display: none;
+    }
+
+    &.dragging img {
+      pointer-events: none;
+    }
+
+    img {
+      display: block;
+    }
+  }
+
+  &-list {
+
+    &:focus {
+      outline: none;
+    }
+
+    &.dragging {
+      cursor: pointer;
+      cursor: hand;
+    }
+  }
+
+  &-track {
+    position: relative;
+    margin-right: auto;
+    margin-left: auto;
+    display: block;
+    height: 100%;
+    @include cf;
+    left: 0;
+    top: 0;
+  }
+
+  &-slider &-track,
+  &-slider &-list {
+    transform: translate3d(0, 0, 0);
+  }
+
+  &-arrow {
+    &.slick-hidden {
+      display: none;
+    }
+  }
+
+  &-initialized &-slide {
+    display: block;
+  }
+
+  &-loading &-slide {
+    visibility: hidden;
+  }
+
+  [dir='rtl'] &-slide {
+    float: right;
+  }
+
+  &-vertical &-slide {
+    border: 1px solid transparent;
+    display: block;
+    height: auto;
+  }
+}

data/_sass/_split.scss

@@ -0,0 +1,15 @@
+
+.split {
+
+  &-chapter {
+    &.--right {
+      padding: 112px 0 0 56px;
+    }
+  }
+
+  &-page {
+    &.--left {
+      padding: 56px 0 0 180px;
+    }
+  }
+}

data/_sass/_title.scss

@@ -27,45 +27,56 @@
     }
   }
 
-  &._overlay {
-
-
-  }
-
   &._mobile {
     text-align: center;
-    font-size: 48px;
+    font-size: 4.8rem;
     line-height: 1;
   }
 
   &._chapter {
+
     &-title {
-      @include RotateTitle();
-      bottom: 56px;
-      left: 128px;
+
+      &:not(.--docs) {
+        @include RotateTitle();
+        bottom: 5.6rem;
+        left: 12.8rem;
+      }
+
+      &.--docs {
+        color: $smoke;
+      }
     }
   }
 
   &._page {
+
     &-title {
-      @include RotateTitle();
-      bottom: 56px;
-      left: 128px;
+
+      &:not(.--docs) {
+        @include RotateTitle();
+        bottom: 5.6rem;
+        left: 12.8rem;
+      }
+
+      &.--docs {
+        align-self: center;
+      }
     }
 
     &-chapter {
       @include RotateTitle( $origin : top right );
       text-transform: capitalize;
-      right: 78px;
-      top: 56px;
+      right: 7.8rem;
+      top: 5.6rem;
     }
 
     &-weight {
       @include RotateTitle();
       transform-origin: bottom left;
-      left: calc(100% - 58px);
+      left: calc(100% - 5.8rem);
       text-align: right;
-      bottom: 56px;
+      bottom: 5.6rem;
     }
   }
 }

data/_sass/_wrap.scss

@@ -1,10 +1,4 @@
 
-%text {
-  p + p, p + ul, ul + p, ul + form {
-    margin-top: 20px;
-  }
-}
-
 .wrap {
 
   &._book {
@@ -18,24 +12,34 @@
     width: 100%;
   }
 
+  &._scroller {
+    @extend %wrap_grid;
+    grid-gap: 10px;
+  }
+
   &.type {
 
     &-page {
       @extend %wrap_grid;
-      @extend %text;
-      grid-column: 2 / 3;
-      display: grid;
 
       + .wrap.type-page {
-        margin-top: 20px;
+
+        &:not(.setup-docs) {
+          margin-top: 20px;
+        }
+
+        &.setup-docs {
+          margin-top: 1px;
+        }
+      }
+
+      + .wrap.type-chapter {
+        margin-top: 100px;
       }
     }
 
     &-chapter {
       @extend %wrap_grid;
-      @extend %text;
-      grid-column: 2 / 3;
-      display: grid;
 
       + .wrap.type-page {
         margin-top: 20px;
@@ -43,11 +47,6 @@
     }
   }
 
-  &._hero.--demo {
-    @extend %wrap_grid;
-    @extend %text;
-  }
-
   &._overlay {
     @extend %wrap_grid;
     align-self: center;
@@ -64,10 +63,6 @@
       grid-gap: 10px;
     }
 
-    &.--demo {
-      align-self: center;
-    }
-
     &.--search {
       grid-gap: 5px;
     }

data/_sass/futuro.scss

@@ -2,10 +2,12 @@
 @charset 'utf-8';
 
 @import
+'normalize',
 'fonts',
 'helpers',
 'base',
 'area',
+'artwork',
 'bar',
 'block',
 'box',
@@ -30,3 +32,56 @@
   position: relative;
   top: -80px;
 }
+
+.code {
+
+  &-wrap {
+    grid-template-columns: repeat(2,1fr);
+    border-bottom: 1px solid $gun;
+    border-right: 1px solid $gun;
+    border-left: 1px solid $gun;
+    background-color: $smoke;
+    display: none;
+    color: $gun;
+
+    &.--open {
+      display: grid;
+    }
+
+    + .output-html {
+      margin-top: 20px;
+    }
+
+    span {
+      @include ib;
+      border-radius: 2px;
+      padding: 2px 4px 0;
+      font-size: 1.6rem;
+      color: white;
+    }
+
+    > div {
+      padding: 10px;
+
+      + div {
+        border-left: 1px solid $gun;
+      }
+    }
+  }
+}
+
+.new-rule {
+
+  .new-rule {
+    margin-left: 10px;
+    margin-top: 10px;
+  }
+
+  + .new-rule {
+    margin-top: 10px;
+  }
+}
+
+.indent {
+  margin-left: 10px;
+}

data/assets/img/search.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="26" height="26" viewBox="0 0 26 26" xml:space="preserve" enable-background="new 0 0 26 26"><path d="M6,6.1c-1.3,1.3-2.1,3.2-2.1,5.1s0.8,3.7,2.1,5.1	c1.3,1.3,3.2,2.1,5.1,2.1s3.7-0.8,5.1-2.1c1.3-1.3,2.1-3.2,2.1-5.1s-0.8-3.8-2.1-5.1C14.8,4.6,13,4,11.1,4S7.3,4.7,6,6.1z M22.6,25.5L17,19.9c-1.7,1.2-3.7,1.8-5.9,1.8c-2.9,0-5.5-1.1-7.5-3.1S0.5,14,0.5,11.2s1.1-5.5,3.1-7.5s4.7-3.2,7.5-3.2	s5.5,1.1,7.5,3.1s3.2,4.6,3.2,7.5c0,2.1-0.6,4.2-1.8,6l5.6,5.6L22.6,25.5z" fill-rule="evenodd" clip-rule="evenodd" fill="#737373"/></svg>

data/assets/js/custom/_CheckWidth.js

@@ -0,0 +1,21 @@
+
+const PrintWidth = () => {
+  var size = $(document)[0].documentElement.clientWidth,
+      more = width - size + 'px',
+      percent = (100/width) * size + '%';
+
+  $('.width').html(more);
+  TweenMax.set('.bar._mobile',{width:percent});
+}
+
+const CheckWidth = () => {
+  if (isMobile) {
+    TweenMax.set('.overlay._mobile',{className:'+=--open'});
+    PrintWidth();
+  } else {
+    TweenMax.set('.overlay._mobile',{className:'-=--open'});
+  }
+}
+
+$(CheckWidth);
+$(window).resize(CheckWidth);

data/assets/js/custom/_OpenOverlay.js

@@ -0,0 +1,87 @@
+
+const SearchInput   = $('.input.--search'),
+      SearchResults = $('.block._results');
+
+const OpenOverlay = type => {
+  TweenMax.set(body,{className:'+=--overlay'});
+  TweenMax.set('.overlay._' + type,{className:'+=--open'});
+}
+
+const CloseOverlay = type => {
+  TweenMax.set(body,{className:'-=--overlay'});
+  TweenMax.set('.overlay._' + type,{className:'-=--open'});
+}
+
+function KeyFunc(e) {
+  let code = e.keyCode;
+
+  if (code == 27) {
+    if (AboutOpen) {
+      CloseOverlay('about');
+      AboutOpen = false;
+    }
+    if (BrowseOpen) {
+      CloseOverlay('browse');
+      BrowseOpen = false;
+    }
+    if (SearchOpen) {
+      CloseOverlay('search');
+      SearchInput.val('');
+      SearchResults.html('');
+      SearchOpen = false;
+    }
+  }
+
+  if (AboutOpen == false && BrowseOpen == false && SearchOpen == false) {
+    if (code == 65) {
+      OpenOverlay('about');
+      AboutOpen = true;
+    }
+    if (code == 66) {
+      OpenOverlay('browse');
+      BrowseOpen = true;
+    }
+    if (code == 83) {
+      OpenOverlay('search');
+      SearchInput.focus();
+      SearchOpen = true;
+    }
+  }
+}
+
+$('.btn._nav.--about').click(function() {
+  OpenOverlay('about');
+  AboutOpen = true;
+});
+
+$('.btn._nav.--browse').click(function() {
+  OpenOverlay('browse');
+  BrowseOpen = true;
+});
+
+$('.btn._nav.--search').click(function() {
+  OpenOverlay('search');
+  SearchInput.focus();
+  SearchOpen = true;
+});
+
+$('.exit._about').click(function() {
+  CloseOverlay('about');
+  AboutOpen = false;
+});
+
+$('.exit._browse').click(function() {
+  CloseOverlay('browse');
+  BrowseOpen = false;
+});
+
+$('.exit._search').click(function() {
+  CloseOverlay('search');
+  SearchInput.val('');
+  SearchResults.html('');
+  SearchOpen = false;
+});
+
+$(document).keyup(function(e){
+  KeyFunc(e);
+});

data/assets/js/custom/_ScrollFunc.js

@@ -0,0 +1,42 @@
+
+const ScrollerUpdate = () => {
+  let set = $('.lnk._scroller'),
+      length = set.length;
+
+  if (length > 1) {
+    set.each(function() {
+      let ting = $(this)[0].classList[2],
+          tween = TweenMax.to('.lnk._scroller.' + ting,0.1,{className:'+=active'}),
+          scene = new ScrollMagic.Scene({triggerElement:'#' + ting}).setTween(tween).addTo(controller);
+    });
+  }
+}
+
+const ScrollFunc = chaps => {
+  let SiteFeed = $('.site._feed'),
+      Scroller = '<div class="area _scroller"><div class="wrap _scroller">';
+
+  chaps.each(function(i,val){
+    let id = $(val)[0].children[0].id;
+
+    if(i == 0) {
+      Scroller += `<a class="lnk _scroller ${id}" href="#${id}" style=""><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="26" height="26" viewBox="0 0 26 26" xml:space="preserve" enable-background="new 0 0 26 26"><path d="M13,5l9,14H4L13,5z"/></svg></a>`;
+    } else if(i == chaps.length - 1) {
+      Scroller += `<a class="lnk _scroller ${id}" href="#${id}"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="26" height="26" viewBox="0 0 26 26" xml:space="preserve" enable-background="new 0 0 26 26"><path d="M13,21L4,7h18L13,21z"/></svg></a>`;
+    } else {
+      Scroller += `<a class="lnk _scroller ${id}" href="#${id}"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="26" height="26" viewBox="0 0 26 26" xml:space="preserve" enable-background="new 0 0 26 26"><circle cx="13" cy="13" r="9"/></svg></a>`;
+    }
+  });
+
+  Scroller += '</div></div>';
+  SiteFeed.append(Scroller);
+  ScrollerUpdate();
+  SmoothScroll();
+}
+
+$(function() {
+  let chaps = $('.wrap.type-chapter');
+  if (chaps.length > 1) {
+    ScrollFunc(chaps);
+  }
+});

data/assets/js/custom/_SetupHome.js

@@ -0,0 +1,23 @@
+
+const SetupHome = () => {
+
+  TweenMax.defaultEase = Sine.easeInOut;
+
+  let tl = new TimelineMax({repeat:-1,yoyo:true});
+
+  tl.fromTo('.area._book',1,{y:-5},{y:5});
+
+  $('.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 }); }
+  );
+}
+
+$(SetupHome);

data/assets/js/custom/_SiteFunc.js

@@ -0,0 +1,13 @@
+
+const SiteFunc = () => {
+
+  let open = '--open';
+
+  $('.site').addClass(open);
+
+  setTimeout(function() {
+    $('.overlay._load').removeClass(open);
+  },1000);
+}
+
+$(SiteFunc);

data/assets/js/custom/_SmoothScroll.js

@@ -0,0 +1,42 @@
+
+const SmoothScroll = () => {
+  // Select all links with hashes
+  $('a[href*="#"]')
+    // Remove links that don't actually link to anything
+    .not('[href="#"]')
+    .not('[href="#0"]')
+    .click(function(event) {
+      // On-page links
+      if (
+        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
+        &&
+        location.hostname == this.hostname
+      ) {
+        // Figure out element to scroll to
+        var target = $(this.hash);
+        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+        // Does a scroll target exist?
+        if (target.length) {
+          // Only prevent default if animation is actually gonna happen
+          event.preventDefault();
+          $('html, body').animate({
+            scrollTop: target.offset().top
+          }, 500, function() {
+            // Callback after animation
+            // Must change focus!
+            var $target = $(target);
+            $target.focus();
+            if ($target.is(":focus")) { // Checking if the target was focused
+              return false;
+            } else {
+              $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
+              $target.focus(); // Set focus again
+            };
+          });
+        }
+      }
+    }
+  );
+}
+
+$(SmoothScroll);

data/assets/js/custom/_SplitCode.js

@@ -0,0 +1,33 @@
+
+const SplitCode = () => {
+
+  $('.code-scss').each(function(i,val) {
+    let string  = $(this).text().split(' ');
+
+    $(string).each(function(i,val) {
+      let letters = val.length,
+          last    = letters - 1;
+
+      if (val.indexOf('.') >= 0 || val.indexOf('&') >= 0) {
+        string.splice( i , 1 , val);
+      }
+
+      if ($(this)[last] == '}') {
+        string.splice( i , 1 , val);
+      }
+
+    });
+
+    let newString = string.join(' ');
+
+    $(this).text(newString);
+
+  });
+
+  let htmlstring = $('.code-html').html();
+
+  $('.code-html').text(htmlstring);
+
+}
+
+$(SplitCode);