futuro 0.9.8 → 0.9.9

data/_sass/block/form/label.scss

@@ -1,15 +1,15 @@
 
-label {
+// label {
 
-  &.jcf-checkbox-label {
-    cursor: pointer;
-  }
+//   &.jcf-checkbox-label {
+//     cursor: pointer;
+//   }
 
-  small {
-    @extend %smallstyle;
-  }
-}
+//   small {
+//     @extend %smallstyle;
+//   }
+// }
 
-label.form-label {
-  @extend %bold;
-}
+// label.form-label {
+//   @extend %bold;
+// }

data/_sass/block/overlay.scss

@@ -0,0 +1,4 @@
+
+.block.overlay-search-svg {
+  padding-bottom: 4px;
+}

data/_sass/block/page.scss

@@ -30,3 +30,20 @@
   background-color: lighten(setcolor(generic),47%);
   height: 100px;
 }
+
+.block.page-info {
+  @include zeros(absolute);
+  place-items: center;
+  display: grid;
+  height: 560px;
+  bottom: auto;
+  width: 140px;
+  left: auto;
+}
+
+.block.page-footnote {
+  position: absolute;
+  bottom: 66px;
+  left: 540px;
+  opacity:0.3;
+}

data/_sass/block/pie.scss

@@ -3,12 +3,12 @@
   justify-content: center;
 }
 
-.block.pie-wrap {
+.block.pie-wrap.style-spin {
   position: relative;
   height: 200px;
   width: 200px;
 }
 
-.block.pie-svg {
+.block.pie-svg.style-spin {
   @include zeros(absolute);
 }

data/_sass/futuro.core.scss

@@ -28,7 +28,6 @@
 // Block Styles
 
 @import
-"block",
 "block/access",
 "block/alert",
 "block/button",
@@ -37,6 +36,7 @@
 "block/chart",
 "block/navigation",
 "block/number",
+"block/overlay",
 "block/page",
 "block/pie",
 "block/results",
@@ -67,46 +67,64 @@
 "block/form/password",
 "block/form/scroller";
 
-// Wrap Styles
+// Item Styles
 
 @import
-"wrap/alert",
-"wrap/browse",
-"wrap/docs",
-"wrap/overlay",
-"wrap/chapter",
-"wrap/page",
-"wrap/book",
-"wrap/home",
-"wrap/scroller";
+"item/pie",
+"item/roller",
+"item/scroller";
+
+// Link Styles
+
+@import
+"link/book",
+"link/browse",
+"link/navigation";
+
+// List Styles
+
+@import
+"list/pie",
+"list/roller",
+"list/scroller";
 
 // Title Styles
 
 @import
 "title/alert",
 "title/browse",
+"title/copied",
 "title/docs",
+"title/form",
 "title/mobile",
 "title/number",
 "title/overlay",
 "title/page",
 "title/type";
 
+// Wrap Styles
+
+@import
+"wrap/alert",
+"wrap/browse",
+"wrap/docs",
+"wrap/overlay",
+"wrap/chapter",
+"wrap/page",
+"wrap/book",
+"wrap/home",
+"wrap/scroller";
+
 // Other Styles
 
 @import
-"artwork",
 "base",
 "bar",
 "box",
 "button",
-"col",
 "exit",
 "form",
 "input",
-"item",
-"list",
-"link",
 "site",
 "split",
 "task";

data/_sass/helpers/mixins/patterns.scss

@@ -6,26 +6,32 @@
   display: grid;
 }
 
+// deprecated
 @mixin border( $col : setcolor(slate), $tint : 50% ) {
   border: 1px solid rgba( $col, $tint );
 }
 
+// deprecated
 @mixin borderCol( $col : setcolor(slate), $tint : 50% ) {
   border-color: rgba( $col, $tint );
 }
 
+// deprecated
 @mixin borderRad( $calc : $radius ) {
   border-radius: $calc;
 }
 
+// deprecated
 @mixin color( $col : setcolor(slate), $tint : 50% ) {
   color: rgba( $col, $tint );
 }
 
+// deprecated
 @mixin bg( $col : setcolor(slate), $tint : 5% ) {
   background: rgba( $col, $tint );
 }
 
+// deprecated
 @mixin padding( $t : 3.5, $r : 3, $b : 2.5, $l : 3 ) {
   padding: ($radius * $t) ($radius * $r) ($radius * $b) ($radius * $l);
 }

data/_sass/helpers/mixins/theme.scss

@@ -1,12 +1,12 @@
 
 // Alert modules require a darker color tint
-@mixin AlertColorCalc($custom:setcolor(slate),$tint:75%) {
+@mixin AlertColorCalc($custom:slate) {
   // custom background color tint
-  background-color: lighten($custom,$tint);
+  background-color: setcolor($custom,xlight);
   // border color = background * 0.65
-  border: 1px solid lighten($custom,$tint * 0.65);
+  border: 1px solid setcolor($custom,light);
   // custom foreground color
-  color: $custom;
+  color: setcolor($custom,dark);
 }
 
 @mixin ThemeMorph($name,$color) {
@@ -16,25 +16,25 @@
   }
 }
 
-@mixin ThemeArtformHeader($name,$col) {
+@mixin ThemeArtformHeader($name) {
 
   .block.header.title-artform.tag-#{$name} {
-    background-color: $col;
+    background-color: setcolor($name);
 
     .list.login-list {
-      @include border($col,100%);
+      border: 1px solid setcolor($name);
     }
 
     .item.login-item {
-      @include bg(lighten($col,45%),100%);
-      @include color($col,100%);
+      background-color: lighten(setcolor($name),48%);
+      color: darken(setcolor($name),10%);
 
       &:hover {
-        @include bg(lighten($col,40%),100%);
+        background-color: lighten(setcolor($name),43%);
       }
 
       + .login-item {
-        border-top: 1px solid rgba($col,20%);
+        border-top: 1px solid lighten(setcolor($name),28%);
       }
     }
   }

data/_sass/helpers/variables.scss

@@ -156,36 +156,58 @@ $colormap : (
 
   generic : (
     base : #fe5900,
-    dark : darken(#fe5900,10%)
+    dark : darken(#fe5900,10%),
+    light  : lighten(#fe5900,28%),
+    xlight : lighten(#fe5900,48%)
   ),
 
   dodgers : (
     base : #0092FF,
-    dark : darken(#0092FF,10%)
+    dark : darken(#0092FF,10%),
+    light  : lighten(#0092FF,28%),
+    xlight : lighten(#0092FF,48%)
   ),
 
   smoke : (
-    base : darken(white,10%)
+    base   : #E6E6E6,
+    dark   : darken(#E6E6E6,10%),
+    light  : lighten(#E6E6E6,50%),
+    xlight : lighten(#E6E6E6,75%)
   ), 
 
   gray : (
-    base : darken(white,20%)
+    base   : #CCCCCC,
+    dark   : darken(#CCCCCC,10%),
+    light  : lighten(#CCCCCC,50%),
+    xlight : lighten(#CCCCCC,75%)
   ), 
 
   gun : (
-    base : darken(white,60%)
+    base   : #666666,
+    dark   : darken(#666666,10%),
+    light  : lighten(#666666,50%),
+    xlight : lighten(#666666,75%)
   ), 
 
   slate : (
-    base : lighten(black,20%)
+    base   : #333333,
+    dark   : darken(#333333,10%),
+    light  : lighten(#333333,50%),
+    xlight : lighten(#333333,75%)
   ), 
 
   carbon : (
-    base : lighten(black,10%)
+    base   : #1A1A1A,
+    dark   : darken(#1A1A1A,10%),
+    light  : lighten(#1A1A1A,50%),
+    xlight : lighten(#1A1A1A,75%)
   ), 
 
   coal : (
-    base : lighten(black,5%)
+    base   : #0D0D0D,
+    dark   : darken(#0D0D0D,10%),
+    light  : lighten(#0D0D0D,50%),
+    xlight : lighten(#0D0D0D,75%)
   )
 
 );

data/_sass/item/pie.scss

@@ -0,0 +1,15 @@
+
+.item.pie {
+  text-align: center;
+  display: grid;
+}
+
+.item.pie.style-spin {
+  grid-row-gap: 30px;
+  font-size: 2.8rem;
+}
+
+.item.pie.style-snap {
+  grid-row-gap: 15px;
+  font-size: 2.4rem;
+}

data/_sass/{_item.scss → item/roller.scss}

@@ -1,11 +1,4 @@
 
-.item.pie {
-  grid-row-gap: 20px;
-  text-align: center;
-  font-size: 2.8rem;
-  display: grid;
-}
-
 .item.roller.input {
   background-color: rgba(0,0,0,0.05);
   border: 2px solid white;
@@ -22,9 +15,4 @@
 
 .item.roller.output.active {
   display: block;
-}
-
-.item.scroller {
-  opacity: 0.5;
-  fill: setcolor(gun);
-}
+}

data/_sass/item/scroller.scss

@@ -0,0 +1,5 @@
+
+.item.scroller {
+  opacity: 0.5;
+  fill: setcolor(gun);
+}

data/_sass/link/book.scss

@@ -0,0 +1,21 @@
+
+.link.book {
+  width: map-get($book,large);
+  display: block;
+  fill: white;
+
+  @media#{map-get($query,max767)} {
+    width: map-get($book,medium);
+  }
+
+  @media#{map-get($query,max599)} {
+    width: map-get($book,small);
+  }
+}
+
+.link.book.draft {
+  // default color for draft books
+  background-color: setcolor(gray);
+  // remove link appearance
+  pointer-events: none;
+}

data/_sass/link/browse.scss

@@ -0,0 +1,25 @@
+
+%LinkBrowse {
+  padding: 8px 10px 6px 10px;
+  display: block;
+}
+
+.link.browse-book {
+  @extend %LinkBrowse;
+  @extend %bold;
+  text-transform: capitalize;
+}
+
+.link.browse-book.draft {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.link.browse-chapter {
+  @extend %LinkBrowse;
+  @extend %bold;
+}
+
+.link.browse-page {
+  @extend %LinkBrowse;
+}

data/_sass/link/navigation.scss

@@ -0,0 +1,16 @@
+
+.link.navigation {
+  text-decoration: none;
+  align-content: center;
+  line-height: 1.1;
+  padding: 0 20px;
+  display: grid;
+
+  button {
+    text-transform: capitalize;
+    border-radius: 0;
+    line-height: 1.1;
+    color: inherit;
+    padding: 0;
+  }
+}

data/_sass/list/pie.scss

@@ -0,0 +1,12 @@
+
+.list.pies {
+  @include Grid(3);
+  @extend %bold;
+  list-style: none;
+  width: 100%;
+  padding: 0;
+
+  svg {
+    margin: 0 auto;
+  }
+}

data/_sass/list/roller.scss

@@ -0,0 +1,17 @@
+
+.list.roller {
+  font-size: 1.6rem;
+  list-style: none;
+  display: grid;
+  padding: 0;
+  margin: 0;
+
+  &.split-3 {
+    grid-template-columns: repeat(3,1fr);
+  }
+}
+
+.list.roller.input {
+  @extend %bold;
+  grid-template-columns: repeat(2,1fr);
+}

data/_sass/list/scroller.scss

@@ -0,0 +1,8 @@
+
+.list.scrollers {
+  grid-row-gap: 20px;
+  grid-column: 2 / 3;
+  list-style: none;
+  display: grid;
+  padding: 0;
+}

data/_sass/title/copied.scss

@@ -0,0 +1,5 @@
+
+.title.copied-title {
+  font-family: "FuturaBT-Book", "Helvetica Neue", sans-serif;
+  font-size: 1.8rem;
+}

data/_sass/title/form.scss

@@ -0,0 +1,7 @@
+
+.title.form-label {
+  @media#{map-get($query,max767)} {
+    margin-bottom: 5px;
+    display: block;
+  }
+}

data/_sass/title/page.scss

@@ -1,4 +1,8 @@
 
+.title.type-page.style-docs {
+  @extend h5;
+}
+
 .title.page-chapter {
   @include RotateTitle(top right);
   right: 78px;

data/_sass/title/type.scss

@@ -7,10 +7,20 @@
 
 .title.type-chapter.style-page {
   @extend %StylePage;
+  @extend h3;
+}
+
+.title.type-chapter.style-docs {
+  @extend h5;
+}
+
+.title.type-chapter.style-page span {
+  display: block;
 }
 
 .title.type-page.style-page {
   @extend %StylePage;
+  @extend h3;
 }
 
 .title.style-docs.is-shareable {

data/_sass/wrap/chapter.scss

@@ -27,4 +27,10 @@
   height: auto;
 }
 
+.wrap.page-wrap.type-chapter.tag-hidden {
+  overflow: hidden;
+  padding: 0;
+  height: 0;
+}
+
 

data/_sass/wrap/page.scss

@@ -31,3 +31,9 @@
   padding-left: 120px;
   display: grid;
 }
+
+.wrap.page-wrap.type-chapter.tag-hidden {
+  overflow: hidden;
+  padding: 0;
+  height: 0;
+}

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

@@ -0,0 +1,15 @@
+
+let shade = "rgba(0,0,0,0.05)",
+    controller = new ScrollMagic.Controller();
+
+Browse.able = false;
+
+Body.classes = $("body")[0].classList;
+
+if ($("body").hasClass("type-home")) {
+  Body.isHome = true;
+}
+
+if (!Site.isTheme) {
+  Browse.able = $(".wrap.type-page").length;
+}

data/assets/js/footer/custom/{CheckWidth.js → 2_CheckWidth.js}

@@ -1,5 +1,5 @@
 
-const PrintWidth = () => {
+Print.width = () => {
   var size = $(document)[0].documentElement.clientWidth,
       more = Site.desktop.width - size + "px",
       percent = (100/Site.desktop.width) * size + "%";
@@ -10,12 +10,12 @@ const PrintWidth = () => {
 
 Check.width = () => {
   if (!Site.desktop.active) {
-    gsap.set(site,{ clearProps : "display" });
+    gsap.set(".site",{ clearProps : "display" });
     gsap.set(Overlay.mobile.screen,{ display : Config.display });
-    PrintWidth();
+    Print.width();
   } else {
     gsap.set(Overlay.mobile.screen,{ clearProps : "display" });
-    gsap.set(site,{ display : Config.display });
+    gsap.set(".site",{ display : Config.display });
   }
 }