futuro 0.7.4 → 0.7.5

data/_sass/helpers/variables.scss

@@ -1,46 +1,59 @@
 
-$system     : #6e46a0;
-$brand      : #ff8200;
-$supply     : #f00a0a;
-$demo       : #005a9b;
-$generic    : #fe5900;
-$theatre    : #019fc6;
-$talks      : #ff9000;
-$music      : #dc3636;
-$classical  : #bf8f3a;
-$cinema     : #259d31;
-$tours      : #718ab2;
-$hire       : #412f79;
-$membership : #5d91e5;
-$art        : #f90082;
-$shop       : #23D5B0;
-$addicts    : #e6433a;
-$family     : #029ddf;
-$receptive  : #b25400;
-$value      : #5fb641;
-$next       : #ffa905;
-$maybe      : #974597;
-$earthlyparadise : #e8396c;
-$artforall       : #f9ae00;
-$aroundthepark   : #009640;
-$newsfromnowhere : #009fe3;
-$dodgers         : #0092FF;
-$green           : #259d31;
+$color : (
+  system    : #6e46a0,
+  brand     : #ff8200,
+  supply    : #f00a0a,
+  demo      : #005a9b,
+  generic   : #fe5900,
+  theatre   : #019fc6,
+  talks     : #ff9000,
+  music     : #dc3636,
+  classical : #bf8f3a,
+  cinema    : #259d31,
+  tours     : #718ab2,
+  hire      : #412f79,
+  members   : #5d91e5,
+  art       : #f90082,
+  shop      : #23D5B0,
+  addicts   : #e6433a,
+  family    : #029ddf,
+  receptive : #b25400,
+  value     : #5fb641,
+  next      : #ffa905,
+  maybe     : #974597,
+  paradise  : #e8396c,
+  artforall : #f9ae00,
+  park      : #009640,
+  news      : #009fe3,
+  dodgers   : #0092FF,
+  green     : #259d31,
+  smoke     : darken(white,7%),
+  gray      : darken(white,25%),
+  gun       : darken(white,60%),
+  slate     : lighten(black,20%),
+  carbon    : lighten(black,10%),
+  coal      : lighten(black,5%)
+);
 
-$smoke  : darken(white,7%);
-$gray   : darken(white,25%);
-$gun    : darken(white,60%);
-$carbon : lighten(black,10%);
-$coal   : lighten(black,5%);
+// map-get($color,system)
 
-$animate : lighten(black,20%);
-$forms   : lighten(black,20%);
-$blocks  : lighten(black,20%);
+$query : (
+  max599  : 'only screen and (max-width: 599px)',
+  min600  : 'only screen and (min-width: 600px)',
+  max639  : 'only screen and (max-width: 639px)',
+  min640  : 'only screen and (min-width: 640px)',
+  min700  : 'only screen and (min-width: 700px)',
+  max767  : 'only screen and (max-width: 767px)',
+  min768  : 'only screen and (min-width: 768px)',
+  max839  : 'only screen and (max-width: 839px)',
+  min840  : 'only screen and (min-width: 840px)',
+  min1024 : 'only screen and (min-width: 1024px)'
+);
 
-$max599  : "only screen and (max-width: 599px)";
-$min600  : "only screen and (min-width: 600px)";
-$min640  : "only screen and (min-width: 640px)";
-$min700  : "only screen and (min-width: 700px)";
-$max767  : "only screen and (max-width: 767px)";
-$min768  : "only screen and (min-width: 768px)";
-$min1024 : "only screen and (min-width: 1024px)";
+$radius : 4px;
+$line   : ($radius * 6);
+$input  : 14px;
+
+// map-get($query,max599)
+
+$NavBorder: 1px solid darken(map-get($color,smoke),10%);

data/_sass/title/overlay.scss

@@ -1,22 +1,21 @@
 
-.title.overlay {
-
-  &.about {
-    border-bottom: 2px solid $gun;
-  }
+%TitleOverlay {
+  border-bottom: 2px solid map-get($color,gun);
+}
 
-  &.browse {
-    border-bottom: 2px solid $gun;
-  }
+.title.overlay-about {
+  @extend %TitleOverlay;
+}
 
-  &.search {
-    border-bottom: 2px solid $gun;
-  }
+.title.overlay-browse {
+  @extend %TitleOverlay;
+}
 
-  &.load {
-    @extend %bold;
-    text-transform: uppercase;
-    font-size: 4.8rem;
-    color: red;
-  }
+.title.overlay-search {
+  @extend %TitleOverlay;
+  grid-template-columns: auto 54px;
+  fill: map-get($color,gun);
+  grid-column-gap: 8px;
+  align-self: center;
+  display: grid;
 }

data/_sass/wrap/book.scss

@@ -6,6 +6,6 @@
   }
 
   svg {
-    fill: $smoke;
+    fill: map-get($color,smoke);
   }
 }

data/_sass/wrap/browse.scss

@@ -0,0 +1,26 @@
+
+.wrap.browse-block {
+  grid-template-columns: 280px 280px;
+  min-height: 264px;
+  display: grid;
+}
+
+.wrap.browse-block a {
+  text-decoration: none;
+}
+
+.wrap.browse-block.install-library {
+  grid-template-columns: 160px 200px 200px;
+}
+
+%WrapBrowse {
+  border-right: 2px solid map-get($color,gun);
+}
+
+.wrap.browse-book {
+  @extend %WrapBrowse;
+}
+
+.wrap.browse-chapter {
+  @extend %WrapBrowse;
+}

data/_sass/wrap/chapter.scss

@@ -1,10 +1,20 @@
 
 .wrap.type-chapter {
-  @extend %wrap_grid;
+  @extend %PagePosition;
+  padding: 112px 0 56px 556px;
   background-color: black;
   color: white;
 
+  .block.stop {
+    top: -192px;
+  }
+
   + .wrap.type-page {
     margin-top: 20px;
   }
 }
+
+.wrap.type-chapter.style-docs {
+  padding: 20px;
+  height: auto;
+}

data/_sass/wrap/overlay.scss

@@ -1,5 +1,58 @@
 
-.wrap.overlay {
+%WrapOverlay {
+  padding-bottom: 100px;
+  padding-top: 100px;
   position: relative;
   z-index: 2;
+
+  &.legacy {
+    @include ib;
+    width: 80%;
+  }
+
+  &:not(.legacy) {
+    grid-column: 2 / 3;
+    align-self: center;
+  }
+}
+
+.wrap.overlay-load {
+  @extend %WrapOverlay;
+  max-width: 320px;
+
+  svg {
+    display: none;
+  }
+}
+
+.wrap.overlay-mobile {
+  @extend %WrapOverlay;
+  font-size: 2.0rem;
+  max-width: 320px;
+
+  p + .box.mobile {
+    margin-top: 20px;
+  }
+}
+
+.wrap.overlay-about {
+  @extend %WrapOverlay;
+
+  h4 + p, p + p {
+    margin-top: 20px;
+  }
+}
+
+.wrap.overlay-browse {
+  @extend %WrapOverlay;
+
+  &:not(.legacy) {
+    @extend %GridOverlay;
+  }
+}
+
+.wrap.overlay-search {
+  @extend %WrapOverlay;
+  align-content: center;
+  display: grid;
 }

data/_sass/wrap/page.scss

@@ -1,6 +1,12 @@
 
 .wrap.type-page {
-  @extend %wrap_grid;
+  @extend %PagePosition;
+  padding: 56px 120px 56px 160px;
+  background-color: white;
+
+  .block.stop {
+    top: -136px;
+  }
 
   + .wrap.type-page {
     margin-top: 20px;
@@ -10,3 +16,14 @@
     margin-top: 100px;
   }
 }
+
+.wrap.type-page.style-docs {
+  padding: 20px;
+  height: auto;
+}
+
+.wrap.type-page.in-topic {
+  align-content: center;
+  padding-left: 120px;
+  display: grid;
+}

data/_sass/wrap/scroller.scss

@@ -1,5 +1,5 @@
 
 .wrap.scroller {
-  @extend %wrap_grid;
+  grid-column: 2 / 3;
   grid-gap: 10px;
 }

data/assets/js/footer/custom/ActiveBook.js

@@ -1,21 +1,19 @@
 
 const ActiveBook = () => {
 
-  if (!$(body).hasClass("type-home")) {
-    let list   = $(body)[0].classList,
-        active = "";
+  if (!BodyIsHome) {
+    let active = '';
 
-    $(list).each(function(i,val) {
-      if (val.startsWith("book-")) {
-        active = val.slice(5);
-        gsap.set(Site.topbar.lnk + "." + active,{ borderBottom : "3px solid" });
+    $(BodyClasses).each(function(index,value) {
+      if (value.startsWith("book-")) {
+        active = value.slice(5);
+        let target = $("button", Site.topbar.lnk + "." + active);
+        gsap.set(target,{ borderBottom : "3px solid" });
       }
     });
   }
 }
 
-$(function() {
-  if(Config.install != "theme") {
-    $(ActiveBook);
-  }
-});
+if(!SiteIsTheme) {
+  $(ActiveBook);
+}

data/assets/js/footer/custom/AnimateScroller.js

@@ -0,0 +1,11 @@
+
+$('.item.scroller').each(function(index,value){
+  let label   = $(value)[0].classList[2],
+      trigger = `#${label}-${label}`,
+      tween   = `.item.scroller.${label}`,
+      scene   = new ScrollMagic
+              .Scene({ triggerElement : trigger })
+  						.setTween(tween,0.1,{ opacity : 1 })
+  						.addTo(controller);
+  return scene;
+});

data/assets/js/footer/custom/Overlays.js

@@ -1,69 +1,69 @@
 
-const ChangeScreen = (i,val,state) => {
+const ChangeScreen = (index,value,state) => {
 
   if (state == "close") {
     gsap.set(body,{ clearProps : "overflow" });
-    gsap.set(".overlay." + Overlay.custom[i].name, { clearProps : "display" });
-    Overlay.custom[i].open = false;
+    gsap.set(".area.overlay-" + Overlay.custom[index].name, { clearProps : "display" });
+    Overlay.custom[index].open = false;
   } else {
     gsap.set(body, { overflow : "hidden" });
-    gsap.set(".overlay." + Overlay.custom[i].name, { display : Config.display });
-    Overlay.custom[i].open = true;
+    gsap.set(".area.overlay-" + Overlay.custom[index].name, { display : Config.display });
+    Overlay.custom[index].open = true;
   }
 }
 
-const BuildScreens = (i,val) => {
-  let button = Overlay.button + "." + val.name,
-      exit   = Overlay.exit + "." + val.name;
+const BuildScreens = (index,value) => {
+  let button = Overlay.button + "." + value.name,
+      exit   = Overlay.exit + "." + value.name;
 
   $(button).click(function() {
-    ChangeScreen(i,val,"open");
+    ChangeScreen(index,value,"open");
   });
 
   $(exit).click(function() {
-    ChangeScreen(i,val,"close");
+    ChangeScreen(index,value,"close");
   });
 }
 
 const KeyUp = e => {
 
   if (e.keyCode == 27) {
-    $(Overlay.custom).each(function(i,val) {
-      if (Overlay.custom[i].open) {
-        ChangeScreen(i,val,"close");
+    $(Overlay.custom).each(function(index,value) {
+      if (Overlay.custom[index].open) {
+        ChangeScreen(index,value,"close");
       }
     });
   }
 
   if (e.keyCode == 65) {
-    $(Overlay.custom).each(function(i,val) {
+    $(Overlay.custom).each(function(index,value) {
       if (!Overlay.custom[0].open) {
-        ChangeScreen(0,val,"open");
+        ChangeScreen(0,value,"open");
         console.log(e.keyCode);
       }
     });
   }
 
   if (e.keyCode == 66) {
-    $(Overlay.custom).each(function(i,val) {
+    $(Overlay.custom).each(function(index,value) {
       if (!Overlay.custom[1].open) {
-        ChangeScreen(1,val,"open");
+        ChangeScreen(1,value,"open");
       }
     });
   }
 
   if (e.keyCode == 83) {
-    $(Overlay.custom).each(function(i,val) {
+    $(Overlay.custom).each(function(index,value) {
       if (!Overlay.custom[2].open) {
-        ChangeScreen(2,val,"open");
+        ChangeScreen(2,value,"open");
       }
     });
   }
 }
 
 $(function(){
-  $(Overlay.custom).each(function(i,val) {
-    BuildScreens(i,val);
+  $(Overlay.custom).each(function(index,value) {
+    BuildScreens(index,value);
   });
 });
 

data/assets/js/footer/custom/RespondBrowse.js

@@ -0,0 +1,80 @@
+
+const RespondBrowse = () => {
+
+  BookLinks.hover(function(e) {
+
+    CreateMatch(this);
+
+    gsap.set(BookLinks,ClearBackground);
+
+    gsap.set(this,BackgroundShade);
+
+    CheckBookClass(this);
+
+    ChapterBooks.each(function(index,value) {
+
+      CheckBookClass(value);
+
+      IfFound(value);
+
+      gsap.set(value.children,ClearBackground);
+
+      gsap.set(value.children[0],BackgroundShade);
+
+    });
+
+    PageBooks.each(function(index,value) {
+
+      CheckBookClass(value);
+
+      IfFound(value);
+
+      gsap.set(value.children,DisplayNone);
+
+      gsap.set(value.children[0],ClearDisplay);
+
+      gsap.set(value.children[0].children,ClearBackground);
+
+      gsap.set(value.children[0].children[0],BackgroundShade);
+
+    });
+
+  });
+
+  ChapterLinks.hover(function(e) {
+
+    let parent = this.parentElement;
+
+    CreateMatch(parent,"book");
+
+    CreateMatch(this,"chapter");
+
+    gsap.set(ChapterLinks,ClearBackground);
+
+    gsap.set(this,BackgroundShade);
+
+    PageChapters.each(function(index,value) {
+
+      CheckChapterClass(value);
+
+      IfFound(value);
+
+      gsap.set(value.children,ClearBackground);
+
+      gsap.set(value.children[0],BackgroundShade);
+
+    });
+
+  });
+
+  PageLinks.hover(function(e) {
+
+    gsap.set(PageLinks,ClearBackground);
+
+    gsap.set(this,BackgroundShade);
+
+  });
+
+}
+
+if (!SiteIsTheme) { if (!BodyIsHome) { if (Browseable) { RespondBrowse(); } } }

data/assets/js/footer/custom/Settings.js

@@ -3,11 +3,15 @@ let body  = "body",
     site  = ".site",
     shade = "rgba(0,0,0,0.05)",
     controller = new ScrollMagic.Controller(),
-    BrowseScreen;
+    Browseable,
+    BodyIsHome;
 
-if (Config.install != "theme") {
-  BrowseScreen = Overlay.custom[1];
-  BrowseScreen.data = $(BrowseScreen.chapter.col).children(BrowseScreen.chunk).children().length;
+const BodyClasses = $(body)[0].classList;
+
+if ($(body).hasClass("type-home")) {
+  BodyIsHome = true;
 }
 
-console.log('ready?');
+if (!SiteIsTheme) {
+  Browseable = $(".wrap.type-page").length;
+}

data/assets/js/footer/custom/SetupBrowse.js

@@ -0,0 +1,115 @@
+
+let SplitPath       = window.location.pathname.split('/'),
+    BookLinks       = $(".link.browse-book",".wrap.browse-book"),
+    ChapterBooks    = $(".block.browse-book",".wrap.browse-chapter"),
+    ChapterLinks    = $(".link.browse-chapter",".wrap.browse-chapter"),
+    PageBooks       = $(".block.browse-book",".wrap.browse-page"),
+    PageChapters    = $(".block.browse-chapter",".wrap.browse-page"),
+    PageLinks       = $(".link.browse-page",".wrap.browse-page"),
+    BackgroundShade = { background : shade },
+    ClearDisplay    = { clearProps : "display" },
+    ClearBackground = { clearProps : "background" },
+    DisplayNone     = { display : "none" },
+    BookClass       = "",
+    BookNotFound    = true,
+    ChapterClass    = "",
+    ChapterNotFound = true,
+    PageClass       = "",
+    PageNotFound    = true,
+    Found           = "";
+
+$(SplitPath).each(function(index,value) {
+
+  if (index == 1) {
+
+    let BookUrl = value; BookClass = 'book-' + BookUrl;
+
+  } else if (index == 2) {
+
+    let ChapterUrl = value; ChapterClass = 'chapter-' + ChapterUrl;
+
+  } else if (index == 3) {
+
+    let PageUrl = value; PageClass = 'title-' + PageUrl;
+
+  }
+
+});
+
+const StartsWith = (value,starts) => {
+
+  if (starts == "book") {
+
+    if (value.startsWith('book-')) { BookClass = value; }
+
+  } else {
+
+    if (value.startsWith('chapter-')) { ChapterClass = value; }
+
+  }
+
+}
+
+const CreateMatch = (value, starts = "book") => {
+
+  $(value.classList).each(function(index,value) {
+
+    StartsWith(value,starts);
+
+  });
+
+}
+
+const CheckBookClass = (value) => {
+
+  Found = false;
+
+  $(value.classList).each(function(index,value) {
+
+    if (value.startsWith('book-')) {
+
+      if (BookClass == value) { Found = true; BookNotFound = false; }
+
+    }
+
+  });
+
+}
+
+const CheckChapterClass = (value) => {
+
+  Found = false;
+
+  $(value.classList).each(function(index,value) {
+
+    if (value.startsWith('chapter-')) { if (ChapterClass == value) { Found = true; ChapterNotFound = false; } }
+
+  });
+
+}
+
+const CheckPageClass = (value) => {
+
+  Found = false;
+
+  $(value.classList).each(function(index,value) {
+
+    if (value.startsWith('title-')) { if (PageClass == value) { Found = true; PageNotFound = false; } }
+
+  });
+
+}
+
+const IfFound = (value) => {
+
+  if(Found) {
+
+    gsap.set(value,ClearDisplay);
+
+  } else {
+
+    gsap.set(value,DisplayNone);
+
+  }
+
+}