futuro 0.4.6 → 0.4.7

data/_sass/fonts/_max.scss

@@ -0,0 +1,41 @@
+
+@font-face {
+  font-family: 'FuturaBT-Book';
+  src: url('../fonts/230883_0_0.eot');
+  src: url('../fonts/230883_0_0.eot?#iefix') format('embedded-opentype'), url('../fonts/230883_0_0.woff') format('woff'), url('../fonts/230883_0_0.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'FuturaBT-BookItalic';
+  src: url('../fonts/230883_1_0.eot');
+  src: url('../fonts/230883_1_0.eot?#iefix') format('embedded-opentype'), url('../fonts/230883_1_0.woff') format('woff'), url('../fonts/230883_1_0.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'FuturaBT-Bold';
+  src: url('../fonts/230883_2_0.eot');
+  src: url('../fonts/230883_2_0.eot?#iefix') format('embedded-opentype'), url('../fonts/230883_2_0.woff') format('woff'), url('../fonts/230883_2_0.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'FuturaBT-BoldItalic';
+  src: url('../fonts/230883_3_0.eot');
+  src: url('../fonts/230883_3_0.eot?#iefix') format('embedded-opentype'), url('../fonts/230883_3_0.woff') format('woff'), url('../fonts/230883_3_0.ttf') format('truetype');
+}
+
+%book {
+  font-family: 'FuturaBT-Book', 'Helvetica Neue', sans-serif;
+  font-weight: normal;
+}
+
+%book-italic {
+  font-family: 'FuturaBT-BookItalic', 'Helvetica Neue', sans-serif;
+  font-weight: normal;
+}
+
+%bold {
+  font-family: 'FuturaBT-Bold', 'Helvetica Neue', sans-serif;
+  font-weight: normal;
+}
+
+%bold-italic {
+  font-family: 'FuturaBT-BoldItalic', 'Helvetica Neue', sans-serif;
+  font-weight: normal;
+}

data/_sass/futuro.lite.scss

@@ -0,0 +1,37 @@
+
+@charset 'utf-8';
+
+@import
+'normalize',
+'fonts/lite',
+'helpers/variables',
+'helpers/mixins',
+'helpers/extends',
+'base',
+'base.lite',
+'area',
+'area/overlay',
+'area/topbar',
+'artwork',
+'bar',
+'block',
+'block/results',
+'block/browse',
+'block/util',
+'box',
+'btn',
+'col',
+'exit',
+'form',
+'input',
+'lnk',
+'nav',
+'site',
+'slick',
+'split',
+'task',
+'textarea',
+'title',
+'title/overlay',
+'wrap',
+'wrap/overlay';

data/_sass/futuro.scss

@@ -3,71 +3,69 @@
 
 @import
 'normalize',
-'fonts',
-'helpers',
+'fonts/max', 
+'helpers/variables',
 'helpers/mixins',
 'helpers/extends',
 'base',
 'area',
+'area/overlay',
+'area/topbar',
 'artwork',
 'bar',
 'block',
+'block/results',
+'block/browse',
+'block/util',
 'box',
 'btn',
 'col',
-'copy',
 'exit',
 'form',
 'input',
 'lnk',
 'nav',
-'overlay',
 'site',
 'slick',
 'split',
 'task',
 'textarea',
 'title',
-'wrap';
+'title/overlay',
+'wrap',
+'wrap/overlay';
 
 .stop {
   position: relative;
   top: -80px;
 }
 
-.code {
+.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;
 
-  &-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;
-    }
+  + .output-html {
+    margin-top: 20px;
+  }
 
-    span {
-      @include ib;
-      border-radius: 2px;
-      padding: 2px 4px 0;
-      font-size: 1.6rem;
-      color: white;
-    }
+  span {
+    @include ib;
+    border-radius: 2px;
+    padding: 2px 4px 0;
+    font-size: 1.6rem;
+    color: white;
+  }
 
-    > div {
-      padding: 10px;
+  > div {
+    padding: 10px;
 
-      + div {
-        border-left: 1px solid $gun;
-      }
+    + div {
+      border-left: 1px solid $gun;
     }
   }
 }

data/_sass/helpers/_extends.scss

@@ -1,63 +1,37 @@
 
-%grid {
-
-  &_default {
-    grid-template-columns: 20px minmax(280px,1000px) 20px;
-  }
-
-  &_overlay {
-    grid-template-columns: 20px minmax(280px,560px) 20px;
-  }
-
-  &_search {
-    grid-template-columns: 20px minmax(280px,480px) 20px;
-  }
-
-  &_load {
-    grid-template-columns: 20px minmax(280px,320px) 20px;
-  }
+%grid_default {
+  grid-template-columns: 20px minmax(280px,1000px) 20px;
 }
 
-%wrap {
-
-  &_grid {
-    grid-column: 2 / 3;
-    display: grid;
-  }
-
-  &_block {
-    margin-right: auto;
-    margin-left: auto;
-  }
+%grid_overlay {
+  grid-template-columns: 20px minmax(280px,560px) 20px;
+}
 
-  &_overlay {
-    min-width: 280px;
-    @include ib;
-  }
+%grid_search {
+  grid-template-columns: 20px minmax(280px,480px) 20px;
 }
 
-:focus {
-  outline: rgba(0,0,0,0);
+%grid_load {
+  grid-template-columns: 20px minmax(280px,320px) 20px;
 }
 
-%book {
-  font-family: 'FuturaBT-Book', 'Helvetica Neue', sans-serif;
-  font-weight: normal;
+%wrap_grid {
+  grid-column: 2 / 3;
+  display: grid;
+}
 
-  &-italic {
-    font-family: 'FuturaBT-BookItalic', 'Helvetica Neue', sans-serif;
-    font-weight: normal;
-  }
+%wrap_block {
+  margin-right: auto;
+  margin-left: auto;
 }
 
-%bold {
-  font-family: 'FuturaBT-Bold', 'Helvetica Neue', sans-serif;
-  font-weight: normal;
+%wrap_overlay {
+  min-width: 280px;
+  @include ib;
+}
 
-  &-italic {
-    font-family: 'FuturaBT-BoldItalic', 'Helvetica Neue', sans-serif;
-    font-weight: normal;
-  }
+:focus {
+  outline: rgba(0,0,0,0);
 }
 
 %siblings {
@@ -69,7 +43,7 @@
     margin-top: 20px;
   }
 
-  p + p, p + ul, p + .block._util {
+  p + p, p + ul, p + div {
     margin-top: 20px;
   }
 
@@ -77,3 +51,46 @@
     margin-top: 20px;
   }
 }
+
+%util-grid {
+  justify-content: flex-start;
+  grid-auto-flow: column;
+  grid-column-gap: 10px;
+  align-items: center;
+  display: grid;
+}
+
+%site-setup {
+  grid-template-columns: 1fr 1000px 1fr;
+  padding-bottom: 100px;
+  padding-top: 100px;
+}
+
+%area-page {
+  background-color: white;
+  position: relative;
+  overflow: hidden;
+  display: grid;
+
+  &:not(.setup-docs) {
+    grid-template-columns: repeat(2,1fr);
+    height: 560px;
+  }
+
+  &.setup-docs {
+    padding: 20px;
+  }
+
+  &.tag-tree {
+    grid-template-rows: 60px 500px;
+    grid-template-columns: auto;
+  }
+
+  &.tag-new {
+    grid-template-columns: 860px 140px;
+  }
+
+  &.tag-custom {
+    grid-template-columns: 860px 140px;
+  }
+}

data/_sass/helpers/_mixins.scss

@@ -1,10 +1,10 @@
 
-@mixin zeros($pos:fixed) {
+@mixin zeros($pos:fixed,$val:0) {
   position: $pos;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  top: 0;
+  bottom: $val;
+  right: $val;
+  left: $val;
+  top: $val;
 }
 
 @mixin ib($align : middle) {
@@ -43,3 +43,11 @@
   transform: rotate($deg);
   position: absolute;
 }
+
+@mixin ThemeResults($col) {
+  color: $col;
+
+  .block.results-dot {
+    background-color: $col;
+  }
+}

data/_sass/title/_overlay.scss

@@ -0,0 +1,22 @@
+
+.title.overlay {
+
+  &.about {
+    border-bottom: 2px solid $gun;
+  }
+
+  &.browse {
+    border-bottom: 2px solid $gun;
+  }
+
+  &.search {
+    border-bottom: 2px solid $gun;
+  }
+
+  &.load {
+    @extend %bold;
+    text-transform: uppercase;
+    font-size: 4.8rem;
+    color: red;
+  }
+}

data/_sass/wrap/_overlay.scss

@@ -0,0 +1,28 @@
+
+.wrap.overlay {
+  @extend %wrap_grid;
+  align-self: center;
+  position: relative;
+  z-index: 2;
+
+  &.load {
+    text-align: center;
+
+    .title + .box {
+      margin-top: 20px;
+    }
+  }
+
+  &.mobile {
+    text-align: center;
+    font-size: 2.1rem;
+
+    p + .box.mobile {
+      margin-top: 20px;
+    }
+  }
+
+  &.search {
+    grid-gap: 5px;
+  }
+}

data/assets/css/styles.lite.scss

@@ -0,0 +1,4 @@
+---
+---
+
+@import "futuro.lite";

data/assets/css/styles.scss

@@ -1,5 +1,4 @@
 ---
 ---
 
-@import "normalize.css";
 @import "futuro";

data/assets/js/footer/custom/CheckWidth.js

@@ -1,24 +1,26 @@
 
 const PrintWidth = () => {
   var size = $(document)[0].documentElement.clientWidth,
-      more = Site.width - size + 'px',
-      percent = (100/Site.width) * size + '%';
+      more = Site.width - size + "px",
+      percent = (100/Site.width) * size + "%";
 
-  $('.width').html(more);
-  gsap.set('.bar._mobile',{width:percent});
+  $(".width").html(more);
+  gsap.set(Overlay.mobile.bar,{width:percent});
 }
 
 const CheckWidth = () => {
-  if (!Site.mobile) {
-    if (IsMobile) {
-      gsap.set(overMobi,{display:open});
+
+  if (!Site.respond) {
+    if (Site.mobile) {
+      gsap.set(Overlay.mobile.screen,{display:Site.open});
       PrintWidth();
     } else {
-      gsap.set(overMobi,{clearProps:"display"});
+      gsap.set(Overlay.mobile.screen,{clearProps:"display"});
     }
   }
 }
 
-$(CheckWidth);
-
-$(window).resize(CheckWidth);
+if (Overlay.mobile.active) {
+  $(CheckWidth);
+  $(window).resize(CheckWidth);
+}

data/assets/js/footer/custom/ExpandBlock.js

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

data/assets/js/footer/custom/OpenOverlay.js

@@ -1,95 +1,120 @@
 
-const SearchInput   = $(".input.--search"),
-      SearchResults = $(".block._results");
-
 const OpenOverlay = type => {
   gsap.set(body,{overflow:"hidden"});
-  gsap.set(".overlay._" + type,{display:open});
-  console.log(open);
+  gsap.set(".overlay." + type,{display:Site.open});
 }
 
 const CloseOverlay = type => {
-  gsap.set([body,".overlay._" + type],{clearProps:"all"});
+  gsap.set([body,".overlay." + type],{clearProps:"all"});
 }
 
 function KeyFunc(e) {
   let code = e.keyCode;
 
   if (code == 27) {
-    if (AboutOpen) {
-      CloseOverlay('about');
-      AboutOpen = false;
+
+    if (Overlay.about.active) {
+
+      if (Overlay.about.open) {
+        CloseOverlay("about");
+        Overlay.about.open = false;
+      }
     }
-    if (BrowseOpen) {
-      CloseOverlay('browse');
-      BrowseOpen = false;
+
+    if (Overlay.browse.active) {
+
+      if (Overlay.browse.open) {
+        CloseOverlay("browse");
+        Overlay.browse.open = false;
+      }
     }
-    if (SearchOpen) {
-      CloseOverlay('search');
-      SearchInput.val('');
-      SearchResults.html('');
-      SearchOpen = false;
+
+    if (Overlay.search.active) {
+
+      if (Overlay.search.open) {
+        CloseOverlay("search");
+        $(Overlay.search.input).val("");
+        $(Overlay.search.results).html("");
+        Overlay.search.open = false;
+      }
     }
   }
 
-  if (AboutOpen == false && BrowseOpen == false && SearchOpen == false) {
-    if (code == 65) {
-      OpenOverlay('about');
-      AboutOpen = true;
+    if (Overlay.about.active) {
+
+      if (code == 65) {
+        OpenOverlay("about");
+        Overlay.about.open = true;
+      }
     }
-    if (code == 66) {
-      OpenOverlay('browse');
-      BrowseOpen = true;
+
+    if (Overlay.browse.active) {
+
+      if (code == 66) {
+        OpenOverlay("browse");
+        Overlay.browse.open = true;
+      }
     }
-    if (code == 83) {
-      OpenOverlay('search');
-      SearchInput.focus();
-      SearchOpen = true;
+
+    if (Overlay.search.active) {
+
+      if (code == 83) {
+        OpenOverlay("search");
+        $(Overlay.search.input).focus();
+        Overlay.search.open = true;
+      }
     }
-  }
+
 }
 
-$('.btn._nav.--about').click(function() {
-  OpenOverlay('about');
-  AboutOpen = true;
-});
+if (Overlay.about.active) {
 
-$('.btn._nav.--browse').click(function() {
-  OpenOverlay('browse');
-  BrowseOpen = true;
-});
+  $(Overlay.about.btn).click(function() {
+    OpenOverlay("about");
+    Overlay.about.open = true;
+  });
 
-$('.btn._nav.--search').click(function() {
-  OpenOverlay('search');
-  SearchInput.focus();
-  SearchOpen = true;
-});
+  $(Overlay.about.exit).click(function() {
+    CloseOverlay("about");
+    Overlay.about.open = false;
+  });
+}
 
-$('.exit._about').click(function() {
-  CloseOverlay('about');
-  AboutOpen = false;
-});
+if (Overlay.browse.active) {
 
-$('.exit._browse').click(function() {
-  CloseOverlay('browse');
-  BrowseOpen = false;
-});
+  $(Overlay.browse.btn).click(function() {
+    OpenOverlay("browse");
+    Overlay.browse.open = true;
+  });
 
-$('.exit._search').click(function() {
-  CloseOverlay('search');
-  SearchInput.val('');
-  SearchResults.html('');
-  SearchOpen = false;
-});
+  $(Overlay.browse.exit).click(function() {
+    CloseOverlay("browse");
+    Overlay.browse.open = false;
+  });
+}
+
+if (Overlay.search.active) {
+
+  $(Overlay.search.btn).click(function() {
+    OpenOverlay("search");
+    $(Overlay.search.input).focus();
+    Overlay.search.open = true;
+  });
+
+  $(Overlay.search.exit).click(function() {
+    CloseOverlay("search");
+    $(Overlay.search.input).val("");
+    $(Overlay.search.results).html("");
+    Overlay.search.open = false;
+  });
+}
 
 $(document).keyup(function(e){
-  if (Site.overlays) {
-    if (!Site.mobile) {
-      if (!IsMobile) {
-        KeyFunc(e);
-      }
-    } else {
-      KeyFunc(e);
-    }
-  }
+
+  if (!Site.respond) {
+
+  if (!Site.mobile) { KeyFunc(e); }
+
+  } else { KeyFunc(e); }
+
 });