futuro 1.0.8 → 1.1.3

data/_sass/block/chart.scss

@@ -39,6 +39,7 @@
 .block.chart-title {
   @include RotateTitle;
   left: calc(50% + 14px);
-  bottom: 10px;
+  position: absolute;
   color: white;
+  bottom: 10px;
 }

data/_sass/block/form/screen.scss

@@ -18,59 +18,78 @@ $title: 2.6rem;
   }
 }
 
-.block.screen-row {
-  grid-row-gap: $title * 0.2;
-  line-height: 1.1;
-  display: grid;
-}
-
 %ScreenRow {
   @extend %bold;
   @include padding(5,5,4.5,5);
 
   + .screen-row.type-event,
+  + .screen-row.type-level,
   + .screen-row.type-retail  {
     border-top: 1px solid setcolor(gun);
   }
 }
 
-.block.screen-row.type-header {
-  @extend %ScreenRow;
-  background: setcolor(smoke);
-  grid-row-gap: $title * 0.1;
-  color: setcolor(carbon);
+.block.screen-row {
+  grid-row-gap: $title * 0.2;
+  line-height: 1.1;
+  display: grid;
 
-  .screen-title {
-    @extend %large;
+  &.type-header {
+    @extend %ScreenRow;
+    background: setcolor(smoke);
+    grid-row-gap: $title * 0.1;
+    color: setcolor(carbon);
+  
+    .screen-title {
+      @extend %large;
+    }
+  
+    .screen-title.small {
+      @extend %small;
+    }
   }
 
-  .screen-title.small {
-    @extend %small;
+  &.type-event {
+    @extend %ScreenRow;
+    background-color: setcolor(carbon);
+    color: setcolor(gray);
   }
-}
 
-.block.screen-row.type-event {
-  @extend %ScreenRow;
-  background-color: setcolor(carbon);
-  color: setcolor(gray);
-} 
+  &.type-level {
+    @extend %ScreenRow;
+    grid-template-columns: 20fr 20fr 40fr 20fr;
+    background-color: setcolor(carbon);
+    color: setcolor(gray);
+    grid-column-gap: 1rem;
+  }
 
-.block.screen-row.type-retail {
-  @extend %ScreenRow;
-  background: setcolor(slate);
-  color: setcolor(gray);
+  &.type-retail {
+    @extend %ScreenRow;
+    background: setcolor(slate);
+    color: setcolor(gray);
+  }
 }
 
 .block.screen-title {
   font-size: $title;
-}
 
-.block.screen-title:not(.small) {
-  @extend %tight;
+  &.small {
+    @extend %small;
+  }
+
+  &:not(.small) {
+    @extend %tight;
+  }
+
+  &.type-level {
+    font-size: 10rem;
+    line-height: 1;
+  }
 }
 
-.block.screen-title.small {
+.block.room-title {
   @extend %small;
+  @extend %book;
 }
 
 .block.screen-wrap {
@@ -82,3 +101,17 @@ sup {
   @extend %small;
   left: 0.2em;
 }
+
+.block.tag-list {
+  grid-template-columns: repeat(5,1fr);
+  grid-template-rows: min-content;
+  grid-gap: 1rem;
+  display: grid;
+}
+
+.block.tag-list div {
+  background-color: setcolor(gray);
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+}

data/_sass/block/util.scss

@@ -8,6 +8,9 @@
 
 .block.util.type-page.style-page {
   @extend %ContentPrep;
+  fill: setcolor(coal);
+  grid-row-gap: 6px;
+  display: grid;
 }
 
 .block.util.type-chapter.style-page {

data/_sass/futuro.core.scss

@@ -4,6 +4,7 @@
 // Helper Styles
 
 @import
+"helpers/variables/colors",
 "helpers/variables",
 "helpers/mixins",
 "helpers/mixins/layout",
@@ -93,6 +94,7 @@
 
 @import
 "title/alert",
+"title/book",
 "title/browse",
 "title/checkbox",
 "title/copied",

data/_sass/helpers/extends.scss

@@ -24,20 +24,3 @@
 :focus {
   outline: rgba(0,0,0,0);
 }
-
-// MINDSETS IMPORT ************************************************************
-
-// %table {
-//   grid-template-columns: 220px repeat(4,110px);
-//   list-style: none;
-//   display: grid;
-//   padding: 0;
-
-//   li {
-//     padding: 5px;
-
-//     &:nth-of-type(n+2) {
-//       text-align: center;
-//     }
-//   }
-// }

data/_sass/helpers/mixins/layout.scss

@@ -14,7 +14,6 @@
 @mixin RotateTitle($origin : bottom left, $deg : 90){
   transform: rotate(-#{$deg}deg);
   transform-origin: $origin;
-  position: absolute;
 }
 
 @mixin PadBtn($value : 4) {

data/_sass/helpers/mixins/theme.scss

@@ -1,12 +1,10 @@
 
-
-
 // Used in Mindsets
 @mixin ThemeMorph($name,$color) {
   // find output path by dynamic class name
   svg#morph path#output.#{$name} {
     // set associated color for this class
-    stroke: $color;
+    stroke: setcolor($color);
   }
 }
 
@@ -267,7 +265,7 @@
   } @else {
 
     // book covers
-    .area.type-chapter.book-#{$book} {
+    .wrap.page-wrap.type-chapter.book-#{$book} {
       background-color: setcolor($color);
     }
   }
@@ -387,7 +385,7 @@
 @mixin ThemeSnap($name,$color) {
   svg.snap {
     path.#{$name} {
-      fill: #{$color};
+      fill: setcolor($color);
     }
   }
 }

data/_sass/helpers/themes.scss

@@ -1,14 +1,15 @@
 
-// // ThemeBook | $name | $col
-
-// @include ThemeBook("orwell",blue);
-
-// @include ThemeBook("woolf",green);
-
-// // ThemeCover | $name | $col | $left | $chapter
-
-// @include ThemeCover("animal",blue,false,true);
-
-// // ThemePages | $name | $col | $right | $chapter
-
-// @include ThemePages("animal",blue,false,true);
+$books : (
+  "orwell" : (
+    colour : "success"
+  ),
+  "woolf" : (
+    colour : "error"
+  )
+);
+
+@each $book, $map in $books {
+  @include ThemeBook ($book, map-get($map,colour));
+  @include ThemeCover ($book, false, map-get($map,colour));
+  @include ThemePages ($book, false, map-get($map,colour), map-get($map,info));
+}

data/_sass/helpers/variables.scss

@@ -1,29 +1,4 @@
 
-// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
-
-// Function for collecting multiple maps;
-
-@function map-collect($maps...) {
-  $collection: ();
-
-  @each $map in $maps {
-    $collection: map-merge($collection, $map);
-  }
-  @return $collection;
-}
-
-// $color: map-collect($color-name, $color-event, $color-category);
-
-// Function for shorter usage of map-get();
-
-@function setcolor($scheme, $tone: base) {
-
-  @return map-get(map-get($colormap, $scheme), $tone);
-
-}
-
-// color: setcolor(brown, light);
-
 $site : (
   padding : 50px
 );
@@ -34,9 +9,22 @@ $topbar : (
 );
 
 $book : (
-  large  : 110px,
-  medium : 90px,
-  small  : 75px
+
+  large : (
+    title  : 5.6rem,
+    width  : 110px
+  ),
+
+  medium : (
+    title  : 5.6rem,
+    width  : 90px
+  ),
+
+  small : (
+    title  : 5.6rem,
+    width  : 75px
+  )
+
 );
 
 $query : (
@@ -53,223 +41,15 @@ $query : (
   min1024 : 'only screen and (min-width: 1024px)'
 );
 
-$colormap : (
-
-  error : (
-    base : #B94A48, // untested
-    dark : darken(#B94A48,10%), // untested
-    light  : lighten(#B94A48,23%), // untested
-    xlight : lighten(#B94A48,46%) // untested
-  ),
-
-  success : (
-    base : #468847, // untested
-    dark : darken(#468847,10%), // untested
-    light  : lighten(#468847,26%), // untested
-    xlight : lighten(#468847,52%) // untested
-  ),
-
-  level : (
-    a : #e61717,
-    b : #0099e6,
-    c : #ff8001,
-    d : #3bb300,
-    e : #8b3788,
-    f : #e60073,
-    g : #b35900,
-    y : #ffaa00,
-    l : #b8b8b8
-  ),
-
-  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, // 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
-  ),
-
-  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
-    ),
-
-  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
-  ),
-
-  green : (
-    base : #259d31
-  ),  
-
-  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%)
-  ),
-
-  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
-  ), 
+$BigGap : map-get($topbar,height) + map-get($site,padding);
+$SmallGap : 20px;
+$radius : 4px;
 
-  carbon : (
-    base   : #1A1A1A,
-    dark   : darken(#1A1A1A,10%),
-    light  : lighten(#1A1A1A,50%),
-    xlight : lighten(#1A1A1A,75%)
-  ), 
+// https://stackoverflow.com/questions/27740063/merge-multiple-sass-maps
+// function for more concise usage of map-get()
 
-  coal : (
-    base   : #0D0D0D,
-    dark   : darken(#0D0D0D,10%),
-    light  : lighten(#0D0D0D,50%),
-    xlight : lighten(#0D0D0D,75%)
-  )
+@function getbook($size, $value) {
 
-);
+  @return map-get(map-get($book, $size), $value);
 
-$radius : 4px;
-$NavBorder : 1px solid setcolor(gray);
-$BigGap    : map-get($topbar,height) + map-get($site,padding);
-$SmallGap  : 20px;
+}