futuro 0.9.6 → 0.9.7

data/_sass/helpers/mixins/theme.scss

@@ -220,27 +220,22 @@
   }
 }
 
-@mixin ThemeBook($name,$col) {
-
-  // Home Books
-
-  .wrap.book.#{$name} {
-    background-color: $col;
-
-    svg {
-      fill: white;
-    }
+@mixin ThemeHome($name,$color){
+  // inherit theme color for the book cover
+  .link.book.#{$name} {
+    background-color: $color;
   }
+}
 
-  // Topbar Links
-
+@mixin ThemeTopbar($name,$color) {
+  // inherit theme color for the topbar link
   .link.navigation.#{$name} {
-    color: $col;
-
-    &:hover {
-      background-color: rgba($col,10%);
-    }
+    color: $color;
   }
+  // add theme color tint to background on hover
+  .link.navigation.#{$name}:hover {
+    background-color: rgba($color,10%);
+  }  
 }
 
 @mixin ThemeCover($name,$color,$left:false,$chapter:false) {
@@ -249,7 +244,7 @@
 
     // Chapter Covers
 
-    .wrap.type-chapter.chapter-#{$name} {
+    .wrap.page-wrap.type-chapter.chapter-#{$name} {
       background-color: $color;
 
       @if $left {
@@ -434,3 +429,11 @@
     }
   }
 }
+
+@mixin ThemeBook($name,$color) {
+
+  @include ThemeHome($name,$color);
+
+  @include ThemeTopbar($name,$color);
+
+}

data/_sass/helpers/variables.scss

@@ -18,7 +18,7 @@
 
 @function setcolor($scheme, $tone: base) {
 
-  @return map-get(map-get($colorscheme, $scheme), $tone);
+  @return map-get(map-get($colormap, $scheme), $tone);
 
 }
 
@@ -33,94 +33,164 @@ $topbar : (
   padding : 15px
 );
 
-$colorscheme : (
+$book : (
+  large  : 110px,
+  medium : 90px,
+  small  : 75px
+);
+
+$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)'
+);
+
+$colormap : (
+
+  system : (
+    base : #6e46a0
+  ),
+
+  brand : (
+    base : #ff8200
+  ),
+
+  supply : (
+    base : #f00a0a
+  ),
+
+  demo : (
+    base : #005a9b
+  ),
+  
+  theatre : (
+    base : #019fc6
+  ),
+
+  talks : (
+    base : #ff9000
+  ),
+
+  music : (
+    base : #dc3636
+  ),
+
+  classical : (
+    base : #bf8f3a
+  ),
+
+  cinema : (
+    base : #259d31
+  ),
+
+  tours : (
+    base : #718ab2
+  ),
+
+  hire : (
+    base : #412f79
+  ),
+
+  members : (
+    base : #5d91e5
+  ),
+
+  art  : (
+    base : #f90082
+  ),
+
+  shop : (
+    base : #23D5B0
+  ),
+
+  addicts : (
+    base : #e6433a
+  ),
+
+  family : (
+    base : #029ddf
+  ),
+
+  receptive : (
+    base : #b25400
+  ),
+
+  value : (
+    base : #5fb641
+  ),
+
+  next : (
+    base : #ffa905
+  ),
+
+  maybe : (
+    base : #974597
+  ),
+
+  paradise : (
+    base : #e8396c
+  ),
+
+  artforall : (
+    base : #f9ae00
+  ),
+
+  park : (
+    base : #009640
+  ),
+
+  news : (
+    base : #009fe3
+  ),
+
+  green : (
+    base : #259d31
+  ),  
+
   generic : (
-    base  : #fe5900,
-    dark  : darken(#fe5900,10%)
+    base : #fe5900,
+    dark : darken(#fe5900,10%)
   ),
+
   dodgers : (
-    base  : #0092FF,
-    dark  : darken(#0092FF,10%)
+    base : #0092FF,
+    dark : darken(#0092FF,10%)
   ),
-  smoke  : (
+
+  smoke : (
     base : darken(white,10%)
   ), 
-  gray   : (
+
+  gray : (
     base : darken(white,20%)
   ), 
-  gun    : (
+
+  gun : (
     base : darken(white,60%)
   ), 
-  slate  : (
+
+  slate : (
     base : lighten(black,20%)
   ), 
+
   carbon : (
     base : lighten(black,10%)
   ), 
-  coal   : (
+
+  coal : (
     base : lighten(black,5%)
   )
-);
-
-$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,
-  green     : #259d31,
-  dodgers   : #0092FF,
-  smoke     : darken(white,7%),
-  gray      : darken(white,25%),
-  gun       : darken(white,60%),
-  slate     : lighten(black,20%),
-  carbon    : lighten(black,10%),
-  coal      : lighten(black,5%)
-);
 
-$book : (
-  large : 110px,
-  medium : 90px,
-  small : 70px
-);
-
-$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)'
 );
 
 $radius : 4px;
-$line   : ($radius * 6);
-$input  : 14px;
-
-$NavBorder : 1px solid darken(map-get($color,smoke),10%);
+$NavBorder : 1px solid setcolor(gray);
 $BigGap    : map-get($topbar,height) + map-get($site,padding);
 $SmallGap  : 20px;

data/_sass/title/docs.scss

@@ -1,5 +1,5 @@
 
 .title.docs-subtitle {
-  color: map-get($color, gray);
+  color: setcolor(gray);
   font-size: 1.8rem;
 }

data/_sass/title/overlay.scss

@@ -1,6 +1,6 @@
 
 %TitleOverlay {
-  border-bottom: 2px solid map-get($color,gun);
+  border-bottom: 2px solid setcolor(gun);
 }
 
 .title.overlay-about {
@@ -14,7 +14,7 @@
 .title.overlay-search {
   @extend %TitleOverlay;
   grid-template-columns: auto 54px;
-  fill: map-get($color,gun);
+  fill: setcolor(gun);
   grid-column-gap: 8px;
   align-self: center;
   display: grid;

data/_sass/title/page.scss

@@ -22,7 +22,7 @@
 
 .title.page-title {
   @extend %bold;
-  color: map-get($color,coal);
+  color: setcolor(coal);
   padding-bottom: 40px;
   padding-top: 50px;
   font-size: 3.2rem;

data/_sass/title/type.scss

@@ -1,21 +1,24 @@
 
-.title.type-page:not(.style-docs) {
+%StylePage {
   @include RotateTitle;
   bottom: 56px;
   left: 128px;
 }
 
-.title.type-page.style-docs {
-  border-bottom: 1px solid map-get($color,gun);
-  grid-template-columns: auto 70px;
-  padding-bottom: 10px;
+.title.type-chapter.style-page {
+  @extend %StylePage;
+}
+
+.title.type-page.style-page {
+  @extend %StylePage;
+}
+
+.title.style-docs.is-shareable {
+  justify-content: start;
+  grid-auto-flow: column;
   align-items: center;
-  align-self: center;
+  grid-gap: 10px;
   display: grid;
 }
 
-.title.type-chapter:not(.style-docs) {
-  @include RotateTitle;
-  bottom: 56px;
-  left: 128px;
-}
+

data/_sass/wrap/book.scss

@@ -1,20 +1 @@
 
-.wrap.book {
-
-  &.draft {
-    background-color: rgba(black,10%);
-  }
-
-  svg {
-    fill: map-get($color,smoke);
-    width: map-get($book,large);
-
-    @media#{map-get($query,max767)} {
-      width: map-get($book,medium);
-    }
-
-    @media#{map-get($query,max599)} {
-      width: map-get($book,small);
-    }
-  }
-}

data/_sass/wrap/browse.scss

@@ -14,7 +14,7 @@
 }
 
 %WrapBrowse {
-  border-right: 2px solid map-get($color,gun);
+  border-right: 2px solid setcolor(gun);
 }
 
 .wrap.browse-book {

data/_sass/wrap/chapter.scss

@@ -1,5 +1,5 @@
 
-.wrap.type-chapter {
+.wrap.page-wrap.type-chapter {
   @extend %PagePosition;
   padding: 112px 0 56px 556px;
   background-color: black;
@@ -22,7 +22,9 @@
   }
 }
 
-.wrap.type-chapter.style-docs {
+.wrap.page-wrap.type-chapter.style-docs {
   padding: 20px;
   height: auto;
 }
+
+

data/_sass/wrap/home.scss

@@ -1,10 +1,9 @@
 
-.wrap.home {
-  text-align: center;
-  height: 100%;
-  width: 100%;
-
-  &:not(.slick-initialized) {
-    @include center;
-  }
-}
+// .wrap.home {
+//   grid-auto-flow: column;
+//   place-content: center;
+//   grid-gap: 20px;
+//   display: grid;
+//   height: 100%;
+//   width: 100%;
+// }

data/_sass/wrap/page.scss

@@ -1,5 +1,5 @@
 
-.wrap.type-page {
+.wrap.page-wrap.type-page {
   @extend %PagePosition;
   padding: 56px 120px 56px 160px;
   background-color: white;
@@ -21,12 +21,12 @@
   }
 }
 
-.wrap.type-page.style-docs {
+.wrap.page-wrap.type-page.style-docs {
   padding: 20px;
   height: auto;
 }
 
-.wrap.type-page.in-topic {
+.wrap.page-wrap.type-page.in-topic {
   align-content: center;
   padding-left: 120px;
   display: grid;