futuro 1.0.9 → 1.1.4

data/_sass/helpers/variables/colors.scss

@@ -0,0 +1,290 @@
+
+// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
+// function for collecting multiple sass maps
+
+@function map-collect($maps...) {
+  $collection: ();
+
+  @each $map in $maps {
+    $collection: map-merge($collection, $map);
+  }
+
+  @return $collection;
+}
+
+$ux-colors : (
+
+  generic : (
+    base : #fe5900,
+    dark : darken(#fe5900,10%),
+    light  : lighten(#fe5900,24%),
+    xlight : lighten(#fe5900,48%)
+  ),
+
+  dodgers : (
+    base : #0092FF,
+    dark : darken(#0092FF,10%),
+    light  : lighten(#0092FF,24%),
+    xlight : lighten(#0092FF,48%)
+  ),
+
+  error : (
+    base : #e61717, // untested
+    dark : darken(#e61717,10%), // untested
+    light  : lighten(#e61717,23%), // untested
+    xlight : lighten(#e61717,46%) // untested
+  ),
+
+  success : (
+    base : #468847, // untested
+    dark : darken(#468847,10%), // untested
+    light  : lighten(#468847,26%), // untested
+    xlight : lighten(#468847,52%) // untested
+  )
+
+);
+
+$tier-colors : (
+
+  level-a : (
+    base : #e61717
+  ),
+
+  level-b : (
+    base : #0099e6
+  ),
+
+  level-c : (
+    base : #ff8001
+  ),
+
+  level-d : (
+    base : #3bb300
+  ),
+
+  level-e : (
+    base : #8b3788
+  ),
+
+  level-f : (
+    base : #e60073
+  ),
+
+  level-g : (
+    base : #b35900
+  ),
+
+  level-y : (
+    base : #ffaa00
+  ),
+
+  level-l : (
+    base : #b8b8b8
+  )
+
+);
+
+$artform-colors : (
+
+  theatre : (
+    base : #019fc6
+  ),
+
+  talks : (
+    base : #ff9000
+  ),
+
+  music : (
+    base : #dc3636
+  ),
+
+  classical : (
+    base : #bf8f3a
+  ),
+
+  cinema : (
+    base : #259d31
+  ),
+
+  tours : (
+    base : #718ab2
+  ),
+
+  hire : (
+    base : #412f79, // untested
+    dark : darken(#412f79,0%), // untested
+    light  : lighten(#412f79,32%), // untested
+    xlight : lighten(#412f79,64%) // untested
+  ),
+
+  members : (
+    base : #5d91e5, // untested
+    dark : darken(#5d91e5,10%), // untested
+    light  : lighten(#5d91e5,18%), // untested
+    xlight : lighten(#5d91e5,35%) // untested
+  ),
+
+  art  : (
+    base : #f90082
+  ),
+
+  shop : (
+    base : #23D5B0, // untested
+    dark : darken(#23D5B0,0%), // untested
+    light  : lighten(#23D5B0,25%), // untested
+    xlight : lighten(#23D5B0,50%) // untested
+  )
+
+);
+
+$mindset-colors : (
+
+  addicts : (
+    base : #e6433a,
+    dark : darken(#e6433a,10%), // untested
+    light  : lighten(#e6433a,20%), // untested
+    xlight : lighten(#e6433a,40%) // untested
+  ),
+
+  family : (
+    base : #029ddf,
+    dark : darken(#029ddf,10%), // untested
+    light  : lighten(#029ddf,20%), // untested
+    xlight : lighten(#029ddf,40%) // untested
+  ),
+
+  receptive : (
+    base : #b25400,
+    dark : darken(#b25400,10%), // untested
+    light  : lighten(#b25400,20%), // untested
+    xlight : lighten(#b25400,40%) // untested
+  ),
+
+  value : (
+    base : #5fb641,
+    dark : darken(#5fb641,10%), // untested
+    light  : lighten(#5fb641,20%), // untested
+    xlight : lighten(#5fb641,40%) // untested
+  ),
+
+  next : (
+    base : #ffa905,
+    dark : darken(#ffa905,10%), // untested
+    light  : lighten(#ffa905,20%), // untested
+    xlight : lighten(#ffa905,40%) // untested
+  ),
+
+  maybe : (
+    base : #974597,
+    dark : darken(#974597,10%), // untested
+    light  : lighten(#974597,20%), // untested
+    xlight : lighten(#974597,40%) // untested
+  )
+
+);
+
+$wgp-colors : (
+
+  paradise : (
+    base : #e8396c,
+    dark : darken(#e8396c,10%), // untested
+    light  : lighten(#e8396c,20%), // untested
+    xlight : lighten(#e8396c,40%) // untested
+  ),
+
+  artforall : (
+    base : #f9ae00
+  ),
+
+  park : (
+    base : #009640
+  ),
+
+  news : (
+    base : #009fe3
+  )
+
+);
+
+$design-colors : (
+
+  system : (
+    base : #6e46a0
+  ),
+
+  brand : (
+    base : #ff8200
+  ),
+
+  supply : (
+    base : #f00a0a
+  ),
+
+  demo : (
+    base : #005a9b
+  )
+
+);
+
+$gradient-colors : (
+
+  smoke : (
+    base   : #E6E6E6,
+    dark   : darken(#E6E6E6,10%),
+    light  : lighten(#E6E6E6,50%),
+    xlight : lighten(#E6E6E6,75%)
+  ), 
+
+  gray : (
+    base   : #CCCCCC,
+    dark   : darken(#CCCCCC,10%),
+    light  : lighten(#CCCCCC,50%),
+    xlight : lighten(#CCCCCC,75%)
+  ), 
+
+  gun : (
+    base   : #666666, // untested
+    dark   : darken(#666666,10%), // untested
+    light  : lighten(#666666,32%), // untested
+    xlight : lighten(#666666,56%) // untested
+  ), 
+
+  slate : (
+    base   : #333333, // tested
+    dark   : darken(#333333,10%), // tested
+    light  : lighten(#333333,50%), // tested
+    xlight : lighten(#333333,75%) // tested
+  ), 
+
+  carbon : (
+    base   : #1A1A1A,
+    dark   : darken(#1A1A1A,10%),
+    light  : lighten(#1A1A1A,50%),
+    xlight : lighten(#1A1A1A,75%)
+  ), 
+
+  coal : (
+    base   : #0D0D0D,
+    dark   : darken(#0D0D0D,10%),
+    light  : lighten(#0D0D0D,50%),
+    xlight : lighten(#0D0D0D,75%)
+  )
+
+);
+
+$colormap : map-collect($ux-colors, 
+                        $tier-colors, 
+                        $artform-colors, 
+                        $mindset-colors, 
+                        $wgp-colors, 
+                        $design-colors, 
+                        $gradient-colors);
+
+// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
+// function for more concise usage of map-get()
+
+@function setcolor($scheme, $tone: base) {
+
+  @return map-get(map-get($colormap, $scheme), $tone);
+
+}

data/_sass/link/book.scss

@@ -1,15 +1,17 @@
 
 .link.book {
-  width: map-get($book,large);
-  display: block;
-  fill: white;
-
+  height: getbook(large,width) * 4;
+  width:  getbook(large,width);
+  text-decoration: none;
+  place-content: center;
+  display: grid;
+  
   @media#{map-get($query,max767)} {
-    width: map-get($book,medium);
+    width: getbook(medium,width);
   }
 
   @media#{map-get($query,max599)} {
-    width: map-get($book,small);
+    width: getbook(small,width);
   }
 }
 

data/_sass/link/navigation.scss

@@ -5,12 +5,16 @@
   line-height: 1.1;
   padding: 0 20px;
   display: grid;
+}
 
-  button {
-    text-transform: capitalize;
-    border-radius: 0;
-    line-height: 1.1;
-    color: inherit;
-    padding: 0;
-  }
+.link.navigation > button {
+  text-transform: capitalize;
+  border-radius: 0;
+  line-height: 1.1;
+  color: inherit;
+  padding: 0;
+}
+
+.link.navigation.home > button {
+  border-bottom: 3px solid;
 }

data/_sass/title/book.scss

@@ -0,0 +1,9 @@
+
+.title.book {
+  @include RotateTitle(center);
+  @extend %bold;
+  font-size: getbook(large,title);
+  pointer-events: none;
+  position: relative;
+  color: white;
+}

data/_sass/title/page.scss

@@ -5,6 +5,7 @@
 
 .title.page-chapter {
   @include RotateTitle(top right);
+  position: absolute;
   right: 78px;
   top: 56px;
 }
@@ -12,6 +13,7 @@
 .title.page-weight {
   @include RotateTitle;
   left: calc(100% - 58px);
+  position: absolute;
   text-align: right;
   bottom: 56px;
 }

data/_sass/title/type.scss

@@ -1,6 +1,7 @@
 
 %StylePage {
   @include RotateTitle;
+  position: absolute;
   bottom: 56px;
   left: 128px;
 }

data/assets/js/footer/custom/1_Settings.js

@@ -1,6 +1,4 @@
-
-let shade = "rgba(0,0,0,0.05)",
-    controller = new ScrollMagic.Controller();
+gsap.registerPlugin(ScrollTrigger);
 
 Browse.able = false;
 
@@ -12,10 +10,10 @@ if ($("body").hasClass("type-home")) {
 
 if (!Site.isTheme) {
   Browse.able = $(".wrap.type-page").length;
-} 
+}
 
-const HandleClass = (e,state,name="active") => {
-  $(e).map((index,value) => {
+const HandleClass = (e, state, name = "active") => {
+  $(e).map((index, value) => {
     if (state == "add") {
       $(value).addClass(name);
     } else if (state == "remove") {
@@ -24,4 +22,4 @@ const HandleClass = (e,state,name="active") => {
       $(value).removeClass();
     }
   });
-}
+};

data/assets/js/footer/custom/2_Check.width.js

@@ -1,31 +1,8 @@
 
-Print.width = () => {
-  var size = $(document)[0].documentElement.clientWidth,
-      more = Site.desktop.width - size + "px",
-      percent = (100/Site.desktop.width) * size + "%";
-
-  $(".width").html(more);
-
-  console.log("printing");
-
-  gsap.set(Overlay.mobile.bar,{ width : percent });
-}
-
-Check.width = () => {
-  
-  
-  if (!Site.desktop.active) {
-    gsap.set(".site",{ clearProps : "display" });
-    gsap.set(Overlay.mobile.screen,{ display : Config.display });
-    Print.width();
-  } else {
-    gsap.set(Overlay.mobile.screen,{ clearProps : "display" });
-    gsap.set(".site",{ display : Config.display });
-  }
-}
-
 if (!Config.respond) {
-  $(Check.width());
-  $(window).resize(Check.width);
-}
+  Checkr(Site.desktop.active);
 
+  $(window).resize(() => {
+    Checkr(Site.desktop.active);
+  });
+}

data/assets/js/footer/custom/4_Setup.home.js

@@ -32,4 +32,6 @@ Setup.home = () => {
 
 }
 
-if (Site.isLibrary) { if (Body.isHome) {  $(Setup.home()); } }
+if (Site.isLibrary && Body.isHome) { 
+  $(Setup.home()); 
+}

data/assets/js/footer/custom/4_Setup.overlays.js

@@ -1,92 +1,81 @@
-
-const ChangeScreen = (index,value,state) => {
-
-  let source  = Overlay.custom[index],
-      target  = ".area.overlay-" + source.name,
-      input   = $(".input.text-search"),
-      results = $(".wrap.results");
+const ChangeScreen = (index, value, state) => {
+  let source = Overlay.custom[index],
+    target = ".area.overlay-" + source.name,
+    input = $(".input.text-search"),
+    results = $(".wrap.results");
 
   if (state == "close") {
-
-    gsap.set("body",{
-      clearProps : "overflow"
+    gsap.set("body", {
+      clearProps: "overflow",
     });
 
     gsap.set(target, {
-      clearProps : "display"
+      clearProps: "display",
     });
 
     source.open = false;
 
     if (value.name == "search") {
-
       input.val("");
 
       results.empty();
-
     }
-
   } else {
-
     gsap.set("body", {
-      overflow : "hidden"
+      overflow: "hidden",
     });
 
     gsap.set(target, {
-      display : Config.display
+      display: Config.display,
     });
 
     source.open = true;
 
     if (value.name == "search") {
-
       input.focus();
-
     }
   }
-}
+};
 
-const BuildScreens = (index,value) => {
+const BuildScreens = (index, value) => {
   let button = Overlay.button + "." + value.name,
-      exit   = Overlay.exit + "." + value.name;
+    exit = Overlay.exit + "." + value.name;
 
-  $(button).click(function() {
-    ChangeScreen(index,value,"open");
+  $(button).click(function () {
+    ChangeScreen(index, value, "open");
   });
 
-  $(exit).click(function() {
-    ChangeScreen(index,value,"close");
+  $(exit).click(function () {
+    ChangeScreen(index, value, "close");
   });
-}
+};
 
 const KeyUp = (e) => {
-
-  $(Overlay.custom).map((index,value) => {
-
-    if (value.open && e.keyCode == 27) { ChangeScreen(index,value,"close"); }
+  $(Overlay.custom).map((index, value) => {
+    if (value.open && e.keyCode == 27) {
+      ChangeScreen(index, value, "close");
+    }
 
     if (!value.open && !Site.inFocus) {
+      if (e.keyCode == 65 && value.name == "about") {
+        ChangeScreen(index, value, "open");
+      }
 
-      if (e.keyCode == 65 && value.name == "about")  { ChangeScreen(index,value,"open"); }
-
-      if (e.keyCode == 66 && value.name == "browse") { ChangeScreen(index,value,"open"); }
-
-      if (e.keyCode == 83 && value.name == "search") { ChangeScreen(index,value,"open"); }
+      if (e.keyCode == 66 && value.name == "browse") {
+        ChangeScreen(index, value, "open");
+      }
 
+      if (e.keyCode == 83 && value.name == "search") {
+        ChangeScreen(index, value, "open");
+      }
     }
-
   });
+};
 
-}
-
-$(Overlay.custom).map((index,value) => {
-
-  BuildScreens(index,value);
-
+$(Overlay.custom).map((index, value) => {
+  BuildScreens(index, value);
 });
 
-$(document).keyup(function(e) {
-
+$(document).keyup(function (e) {
   KeyUp(e);
-
 });