futuro 0.7.4 → 0.7.5

data/_sass/_title.scss

@@ -1,44 +1,76 @@
 
-.title {
-
-  &.mobile {
-    text-align: center;
-    font-size: 4.8rem;
-    line-height: 1;
-  }
-
-  &.chapter-title:not(.style-docs) {
-    @include rotatetitle;
-    bottom: 56px;
-    left: 128px;
-  }
-
-  &.page-title {
-
-    &:not(.style-docs) {
-      @include rotatetitle;
-      bottom: 56px;
-      left: 128px;
-    }
-
-    &.style-docs {
-      border-bottom: 1px solid $gun;
-      padding-bottom: 10px;
-      align-self: center;
-    }
-  }
-
-  &.page-chapter {
-    @include rotatetitle(top right);
-    right: 78px;
-    top: 56px;
-  }
-
-  &.page-weight {
-    @include rotatetitle;
-    transform-origin: bottom left;
-    left: calc(100% - 58px);
-    text-align: right;
-    bottom: 56px;
-  }
+.title.type-page:not(.style-docs) {
+  @include RotateTitle;
+  bottom: 56px;
+  left: 128px;
+}
+
+.title.type-page.style-docs {
+  border-bottom: 1px solid map-get($color,gun);
+  padding-bottom: 10px;
+  align-self: center;
+}
+
+.title.type-chapter:not(.style-docs) {
+  @include RotateTitle;
+  bottom: 56px;
+  left: 128px;
+}
+
+.title.mobile {
+  text-align: center;
+  font-size: 4.8rem;
+  line-height: 1;
+}
+
+.title.page-chapter {
+  @include RotateTitle(top right);
+  right: 78px;
+  top: 56px;
+}
+
+.title.page-weight {
+  @include RotateTitle;
+  left: calc(100% - 58px);
+  text-align: right;
+  bottom: 56px;
+}
+
+.subtitle.type-page {
+  @extend %ContentPrep;
+}
+
+.subtitle.type-page.wide {
+  width: 100%;
+}
+
+.title.number-value {
+  letter-spacing: -0.05em;
+  font-size: 24rem;
+  line-height: 1;
+}
+
+.title.number-title {
+  margin: -10px auto 0 auto;
+  font-size: 2.4rem;
+  max-width: 260px;
+}
+
+%TitleBrowse {
+  padding: 8px 10px 6px 10px;
+  border-bottom: 2px solid map-get($color,gun);
+}
+
+.title.browse-book {
+  @extend %TitleBrowse;
+  @extend %bold;
+}
+
+.title.browse-chapter {
+  @extend %TitleBrowse;
+  @extend %bold;
+}
+
+.title.browse-page {
+  @extend %TitleBrowse;
 }

data/_sass/area/book.scss

@@ -0,0 +1,18 @@
+
+/// @group  Barbican
+/// @author Paul Heading
+/// @example scss - Sizing `.foo`
+///   .foo {
+///     @include size(100%, 3em);
+///   }
+
+.area.book {
+  @include ib;
+  padding-right: 5px;
+  padding-left: 5px;
+
+  @media#{map-get($query,min768)} {
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+}

data/_sass/area/chapter.scss

@@ -0,0 +1,15 @@
+
+.area.type-chapter {
+  @extend %ContentFlow;
+
+  ul {
+    grid-auto-rows: min-content;
+    list-style: none;
+    grid-gap: 8px;
+    display: grid;
+
+    li {
+      @extend h5;
+    }
+  }
+}

data/_sass/area/content.scss

@@ -0,0 +1,9 @@
+
+.area.type-content.artwork-page.style-docs {
+  grid-gap: 10px;
+  display: grid;
+}
+
+.area.type-content.artwork-page {
+  max-width: 50%;
+}

data/_sass/area/overlay.scss

@@ -1,18 +1,63 @@
 
-.area.overlay {
+@mixin AreaOverlay() {
   @include zeros;
-  background-color: rgba($smoke,0.95);
+  background-color: rgba(map-get($color,smoke),0.95);
+  color: map-get($color,gun);
   justify-content: center;
-  padding-bottom: 100px;
-  padding-top: 100px;
   overflow: scroll;
   display: none;
   height: 100%;
   width: 100%;
-  color: $gun;
   z-index: 4;
 
   &.legacy {
     @include center;
   }
 }
+
+%AreaOverlayLoad {
+  @include AreaOverlay;
+  background-color: map-get($color,smoke);
+  text-align: center;
+  z-index: 5;
+
+  &:not(.legacy) {
+    @extend %GridLoad;
+  }
+}
+
+.area.overlay-load {
+  @extend %AreaOverlayLoad;
+}
+
+.area.overlay-mobile {
+  @extend %AreaOverlayLoad;
+}
+
+.area.overlay-about {
+  @include AreaOverlay;
+
+  h4 + p, p + p {
+    margin-top: 20px;
+  }
+
+  &:not(.legacy) {
+    @extend %GridOverlay;
+  }
+}
+
+.area.overlay-browse {
+  @include AreaOverlay;
+
+  &:not(.legacy) {
+    @extend %GridOverlay;
+  }
+}
+
+.area.overlay-search {
+  @include AreaOverlay;
+
+  &:not(.legacy) {
+    @extend %GridSearch;
+  }
+}

data/_sass/area/page.scss

@@ -1,33 +1,72 @@
 
-.area.type-page {
-  @extend %area-page;
-  background-color: white;
+$AreaHeight : 448px;
+$SubHeight  :  56px;
+$RowHeight  : 258px;
+$PieHeight  : 306px;
 
-  .after {
-    display: none;
+$AreaRow : $AreaHeight - $RowHeight;
+$AreaSub : $AreaHeight - $SubHeight;
+
+%PageContent {
+
+  > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > ol, > .roller, .block.animate {
+    @extend %ContentPrep;
   }
-}
 
-.area.type-page.tag-cheatsheet h1 {
-  margin-bottom: 40px;
-}
+  > ul:not([class]),
+  > ol:not([class]) {
+    padding-left: 40px;
+  }
 
-.area.type-page.style-docs {
-  grid-row-gap: 20px;
-}
+  > ul.numbers,
+  > ol.numbers {
+    padding-left: 50px;
+    list-style: decimal;
+  }
 
-.area.type-page.tag-panel {
-  grid-template-columns: 224px auto;
-  grid-column-gap: 20px;
+  > ul.letters,
+  > ol.letters {
+    padding-left: 40px;
+    list-style: lower-alpha;
+  }
 
-  .page-artwork {
-    padding: 20px 0 0;
+  .list.pies {
+    width: 100%;
+    margin: 0;
   }
 }
 
-.area.type-page.tag-tree {
+.area.type-page:not(.style-docs) {
+  @extend %PageContent;
+  @extend %ContentFlow;
+  height: $AreaHeight;
 
-  .page-artwork {
-    padding: 0 20px;
+  &.has-subtitle {
+    height: $AreaSub;
+  }
+
+  &.has-row {
+    height: $AreaRow;
+  }
+
+  &.is-pie {
+    height: $PieHeight;
   }
 }
+
+.area.type-page.style-docs {
+  padding-top: 20px;
+}
+
+// .area.type-page.tag-cheatsheet h1 {
+//   margin-bottom: 40px;
+// }
+//
+// .area.type-page.style-docs {
+//   grid-row-gap: 20px;
+// }
+//
+// .area.type-page.row-page {
+//   grid-auto-rows: min-content;
+//   grid-gap: 0;
+// }

data/_sass/area/topbar.scss

@@ -1,8 +1,7 @@
 
 .area.topbar {
   @include zeros;
-  border-bottom: 1px solid darken($smoke,10%);
-  grid-template-columns: 1fr auto 1fr;
+  border-bottom: $NavBorder;
   background-color: white;
   grid-auto-flow: column;
   padding-right: 14px;
@@ -11,4 +10,8 @@
   bottom: auto;
   height: 60px;
   z-index: 4;
+
+  @media#{map-get($query,min768)} {
+    grid-template-columns: 1fr auto 1fr;
+  }
 }

data/_sass/block/chart.scss

@@ -0,0 +1,44 @@
+
+.block.chart-container {
+  @extend %bold;
+  grid-auto-flow: column;
+  padding-right: 30px;
+  padding-left: 30px;
+  font-size: 2rem;
+  display: grid;
+  height: 448px;
+  width: 50%;
+}
+
+.block.chart-bar-wrap {
+  position: relative;
+}
+
+.block.chart-bar-bg {
+  @include zeros(absolute);
+  background: black;
+}
+
+.block.chart-bar {
+  @include zeros(absolute);
+  top: auto;
+}
+
+.block.chart-pcent-title {
+  @include zeros(absolute);
+  text-align: center;
+  bottom: auto;
+  top: -30px;
+}
+
+.block.chart-title-wrap {
+  @include zeros(absolute);
+  top: auto;
+}
+
+.block.chart-title {
+  @include RotateTitle;
+  left: calc(50% + 14px);
+  bottom: 10px;
+  color: white;
+}

data/_sass/block/custom.scss

@@ -0,0 +1,9 @@
+
+.block.custom-split.split-2 {
+  @include Grid(2);
+  grid-gap: 40px;
+}
+
+.row.span-2 {
+  grid-column: 1 / 3;
+}

data/_sass/block/form/alert.scss

@@ -0,0 +1,17 @@
+
+.block.form-alert {
+  @include padding($t:3.5,$b:2.5);
+  @include color($tint:80%);
+  @include border(map-get($color,slate));
+  @include bg(map-get($color,slate));
+  @include borderRad;
+  display: block;
+
+  > .block.item-object {
+    padding: 0;
+  }
+
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}

data/_sass/block/form/checkbox.scss

@@ -0,0 +1,42 @@
+
+%checkbox {
+  @include zeros(absolute);
+  left: ($radius * 4);
+  cursor: pointer;
+  height: $input;
+  width: $input;
+  margin: auto;
+  right: auto;
+
+  &:checked + label {
+    @include color(map-get($color,slate),100%);
+    @include border(map-get($color,slate));
+    @include bg(map-get($color,slate));
+  }
+}
+
+input[type="checkbox"] {
+  @extend %checkbox;
+}
+
+.checkbox-wrap {
+  position: relative;
+  display: grid;
+
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}
+
+.checkbox-label {
+  @include padding($t:3.5,$b:2.5,$l:10);
+  @include color($tint:80%);
+  @include borderRad;
+  @include border;
+  cursor: pointer;
+
+  &:hover {
+    @include borderCol($tint:50%);
+    @include bg;
+  }
+}

data/_sass/block/form/header.scss

@@ -0,0 +1,78 @@
+
+.block.header {
+  background-color: map-get($color,slate);
+  letter-spacing: 0;
+  font-size: 1.6rem;
+  color: white;
+  display: grid;
+}
+
+.block.header-container {
+  @media#{map-get($query,min640)} {
+    padding-right: 5%;
+    padding-left: 5%;
+  }
+}
+
+@media#{map-get($query,min640)} {
+  .block.header-wrap {
+    grid-auto-flow: column;
+    grid-column-gap: 20px;
+    padding-bottom: 30px;
+    align-items: center;
+    padding-top: 30px;
+    display: grid;
+  }
+}
+
+.block.header-logo {
+  justify-content: flex-start;
+  white-space: nowrap;
+  display: grid;
+
+  svg {
+    width: 100%;
+  }
+
+  @media#{map-get($query,max639)} {
+    border-bottom: 1px solid white;
+    justify-content: center;
+    justify-items: center;
+    text-align: center;
+    padding: 20px;
+  }
+}
+
+.block.header-logo:not(.title-shop) {
+  grid-row-gap: 10px;
+
+  svg {
+    width: 160px;
+    fill: white;
+  }
+}
+
+.block.header-logo.title-shop {
+  grid-row-gap: 5px;
+
+  svg {
+    max-width: 230px;
+  }
+}
+
+.block.header-menu {
+  justify-content: flex-end;
+  grid-auto-flow: column;
+  grid-column-gap: 20px;
+  display: grid;
+
+  @media#{map-get($query,max639)} {
+    justify-content: center;
+    padding-bottom: 20px;
+    padding-top: 20px;
+  }
+
+  @media#{map-get($query,min768)} {
+    grid-column-gap: 20px;
+  }
+}

data/_sass/block/form/input.scss

@@ -0,0 +1,51 @@
+
+%textinput {
+  @include color($tint:80%);
+  @include padding;
+  @include bg;
+  -webkit-appearance: none;
+  border-radius: 0;
+  display: block;
+  width: 100%;
+  border: 0;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.textinput-wrap {
+  display: grid;
+
+  &.stub {
+    grid-template-columns: 100px auto;
+    grid-column-gap: 10px;
+    align-items: center;
+
+    small {
+      @extend %smallstyle;
+    }
+  }
+}
+
+.textinput-border {
+  @include borderRad;
+  @include border;
+  display: block;
+
+  &.stub {
+    max-width: 100px;
+  }
+}
+
+input[type="text"] {
+  @extend %textinput;
+}
+
+input[type="email"] {
+  @extend %textinput;
+}
+
+input[type="checkbox"] {
+  cursor: pointer;
+}

data/_sass/block/form/item.scss

@@ -0,0 +1,22 @@
+
+.block.item-row + .block.item-row {
+  margin-top: 0;
+
+  .block.item-object {
+    border-top: 1px solid rgba(map-get($color,slate),20%);
+  }
+}
+
+.block.item-object {
+  padding: ($radius * 2) ($radius * 3);
+  grid-template-columns: auto 100px;
+  display: grid;
+
+  @media#{map-get($query,min768)} {
+    grid-column: 2 / 3;
+  }
+}
+
+.block.item-object-price {
+  text-align: right;
+}

data/_sass/block/form/label.scss

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

data/_sass/block/form/legend.scss

@@ -0,0 +1,70 @@
+
+.block.fieldset-row {
+  @media#{map-get($query,min768)} {
+    @include splitrow( auto 250px );
+  }
+}
+
+.block.legend-row {
+  padding: ($radius * 2);
+  display: block;
+
+  &.button-row {
+    padding: 0;
+  }
+
+  &.fee-row {
+    @media#{map-get($query,max767)} {
+      text-align: center;
+    }
+  }
+
+  + .block.legend-row:not(.button-row) {
+    border-top: 1px solid rgba(map-get($color,slate),20%);
+  }
+}
+
+.block.legend-key {
+  display: block;
+}
+
+.block.legend-content {
+  @include bg;
+  border-radius: ($radius / 3);
+  place-items: center;
+  padding: 20px;
+  display: grid;
+
+  + .block.legend-key {
+    @media#{map-get($query,max767)} {
+      margin-top: 20px;
+    }
+  }
+}
+
+.block.legend-item {
+  grid-template-columns: ($radius * 3) auto auto;
+  grid-column-gap: 10px;
+  align-items: center;
+  display: grid;
+}
+
+.block.legend-item-dot {
+  background-color: map-get($color,gray);
+  height: ($radius * 3);
+  width: ($radius * 3);
+  border-radius: 50%;
+}
+
+.block.legend-item-title {
+  line-height: 1.1;
+}
+
+.block.legend-fee {
+  grid-template-columns: 12px auto;
+  display: inline-grid;
+}
+
+.block.legend-item-price {
+  text-align: right;
+}