futuro 0.6.9 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f925270ca15ab62c2c27dd37774923099afe5df66340bfb9c34bbc1053753f6
-  data.tar.gz: 559489a6a172ba89f3ac32332962e810d3fa20b785c1acb7c5b2a07a385ddb82
+  metadata.gz: 2f9f31404094e0d6a500575610049446771bab42990c4a5d197c8322d23441ec
+  data.tar.gz: 1d730cb1da36267d7f2498ef55cd307b30e52c1da2d79710fe0e2c6c532175d8
 SHA512:
-  metadata.gz: b138823152af25ffa98ace5f450ca1448fd9f253aca95638de891a202170e9331b52485e92ac2a4aa0aee8d489de43670ee3dfad5e67fd4d2780b545333e8d5a
-  data.tar.gz: 113ac0501483e3fcb9c2579a8fee47528fe2ff25527b3b3176f2d859b749b4a8a7590b0eb0b767a75bba1ce5bde44fb8ee616b5dfa60e1710c0e7a0481260bfc
+  metadata.gz: 78247b00131276c95a1413fc0271f4c91d2bd990f388bf374e61988b21f77a2c1b8ce2175438639505d67198bb67a4fbb042ec3c6bd05c7500cecc4357e1b423
+  data.tar.gz: 3e5a4730197c69644d22bdb9359a1d4fddccb9ceea53094947a8f2d14e6254f4c0bbb61db1aa7893f4a2d354828c3fbe87f56ed5c6d2e54252a7174a9521eeb7

data/_includes/html/footer/scripts.liquid

@@ -1,3 +1,3 @@
 
-<script src="{{ "/assets/js/futuro.footer.vendor.js?v=1584032502171" | relative_url }}"></script>
-<script src="{{ "/assets/js/futuro.footer.custom.js?v=1584032502171" | relative_url }}"></script>
+<script src="{{ "/assets/js/futuro.footer.vendor.js?v=1584967793062" | relative_url }}"></script>
+<script src="{{ "/assets/js/futuro.footer.custom.js?v=1584967793062" | relative_url }}"></script>

data/_includes/html/head/scripts.liquid

@@ -1,3 +1,3 @@
-  <script src="{{ "/assets/js/futuro.header.vendor.js?v=1584032502171" | relative_url }}"></script>
-  <script src="{{ "/assets/js/futuro.header.custom.js?v=1584032502171" | relative_url }}"></script>
+  <script src="{{ "/assets/js/futuro.header.vendor.js?v=1584967793062" | relative_url }}"></script>
+  <script src="{{ "/assets/js/futuro.header.custom.js?v=1584967793062" | relative_url }}"></script>
 </head>

data/_includes/html/page/layout/custom.liquid

@@ -11,11 +11,40 @@
         <div class="block page-split">
 
           {%- for item in page.text -%}
-            {%- if item.o -%}
+
+          <div>
+
+            {%- if item.column -%}
+
             <div>
-              {{ item.o }}
+              {{ item.column }}
             </div>
+
+            {%- elsif item.switch -%}
+
+            {%- for item in item.switch -%}
+
+              {%- if item.before -%}
+                <div class="before">
+                  {{ item.before }}
+                </div>
+              {%- elsif item.after -%}
+                <div class="after">
+                  {{ item.after }}
+                </div>
+              {%- elsif item.button -%}
+                <div class="button-wrap switch-button {{ page.chapter | downcase }}">
+                  <button type="button">Switch</button>
+                  <span class="button-bg"></span>
+                </div>
+              {%- endif -%}
+
+            {%- endfor -%}
+
             {%- endif -%}
+
+          </div>
+
           {%- endfor -%}
 
         </div>

data/_includes/html/page/topbar.liquid

@@ -1,11 +1,13 @@
 
+{% assign label = page.label | downcase | prepend: '/' %}
+
 <div class="area topbar">
 
     <div class="nav left">
-      <div class="btn nav about">
+      <div class="button nav about">
         {% include svg/site/btn/about.svg %}
       </div>
-      <div class="btn nav browse">
+      <div class="button nav browse">
         {% include svg/site/btn/browse.svg %}
       </div>
     </div>
@@ -17,11 +19,13 @@
 
         {% if page.live %}
 
-          <div class="btn nav-book {{ page.label }}">
-            <a class="lnk nav {{ page.label }}" href="{%- if site.setup.install == 'library' -%}{{ page.label | downcase | prepend: '/' }}{%- else -%}/{%- endif -%}">
-              <strong>{{ page.label }}</strong>
-            </a>
-          </div>
+          <span class="button-wrap navigation {{ page.label }}">
+            <button type="button">
+              <a class="link navigation {{ page.label }}" href="{%- if site.setup.install == 'library' -%}{{ label }}{%- else -%}/{%- endif -%}">
+                <strong>{{ page.label }}</strong>
+              </a>
+            </button>
+          </span>
 
         {% endif %}
 
@@ -30,13 +34,13 @@
     </div>
 
     <div class="nav right">
-      <div class="btn nav cart" style="display:none;">
+      <div class="button nav cart" style="display:none;">
         {% include svg/site/btn/cart.svg %}
       </div>
-      <div class="btn nav count" style="display:none;">
+      <div class="button nav count" style="display:none;">
         <strong>0</strong>
       </div>
-      <div class="btn nav search">
+      <div class="button nav search">
         {% include svg/site/btn/search.svg %}
       </div>
     </div>

data/_sass/_base.scss

@@ -65,6 +65,11 @@ ul, ol {
     padding-top: 0;
   }
 
+  &.letters {
+    padding: 20px 0 0 30px;
+    list-style: lower-alpha;
+  }
+
   &.numbers {
     padding: 20px 0 0 30px;
     list-style: decimal;

data/_sass/_button.scss

@@ -0,0 +1,67 @@
+
+// .btn {
+//   background-color: transparent;
+// }
+//
+//
+// .btn.submit {
+//   background-color: $gray;
+//   border-radius: 2px;
+//   cursor: pointer;
+//   display: block;
+//   padding: 10px;
+//   border: none;
+//   width: 100%;
+// }
+
+.button-wrap {
+  @extend %button;
+  @include borderRad($radius);
+  @include bg($tint:100%);
+
+  @media#{$max767} {
+    display: block;
+    width: 100%;
+  }
+
+  @media#{$min768} {
+    &:not(.legend-button) {
+      justify-self: flex-start;
+      grid-column: 2;
+    }
+  }
+
+  button {
+    @extend %bold;
+    @include borderRad($radius);
+    @include padding($l:5,$r:5);
+    position: relative;
+    background: none;
+    cursor: pointer;
+    color: white;
+    width: 100%;
+    z-index: 2;
+  }
+}
+
+.button-wrap.navigation {
+  place-content: center;
+  padding-right: 20px;
+  padding-left: 20px;
+  font-size: inherit;
+  border-radius: 0;
+  background: none;
+  display: grid;
+
+  button {
+    letter-spacing: -0.02em;
+    color: $forms;
+    padding: 0;
+  }
+}
+
+.button-bg {
+  @include zeros(absolute);
+  @include borderRad($radius);
+  z-index: 1;
+}

data/_sass/_lnk.scss

@@ -1,5 +1,5 @@
 
-.lnk.nav {
+.link.navigation {
   text-transform: capitalize;
   text-decoration: none;
   line-height: 1.1;

data/_sass/_title.scss

@@ -30,7 +30,6 @@
 
   &.page-chapter {
     @include rotatetitle(top right);
-    // text-transform: capitalize;
     right: 78px;
     top: 56px;
   }

data/_sass/area/page.scss

@@ -2,6 +2,10 @@
 .area.type-page {
   @extend %area-page;
   background-color: white;
+
+  .after {
+    display: none;
+  }
 }
 
 .area.type-page.style-docs {

data/_sass/futuro.core.scss

@@ -2,13 +2,11 @@
 @charset "utf-8";
 
 @import
+"helpers/variables/patterns",
 "helpers/variables",
-"helpers/mixins/cover",
-"helpers/mixins/pages",
-"helpers/mixins/pies",
-"helpers/mixins/roller",
-"helpers/mixins/search",
-"helpers/mixins/value",
+"helpers/mixins/mindsets",
+"helpers/mixins/patterns",
+"helpers/mixins/theme",
 "helpers/mixins",
 "helpers/extends",
 "helpers/themes",
@@ -31,7 +29,7 @@
 "block/stop",
 "block/util",
 "box",
-"btn",
+"button",
 "col",
 "exit",
 "form",

data/_sass/helpers/extends.scss

@@ -143,3 +143,13 @@
     display: block;
   }
 }
+
+// PATTERNS IMPORT ************************************************************
+
+%button {
+  @include ib;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  font-size: 1.6rem;
+  cursor: pointer;
+}

data/_sass/helpers/mixins/mindsets.scss

@@ -0,0 +1,70 @@
+
+@mixin background($col) {
+  svg#background {
+    fill: $col;
+  }
+
+  svg#tickets {
+    g.number path {
+      fill: $col;
+    }
+    path.bar {
+      stroke: $col !important;
+    }
+  }
+
+  .title._animate {
+    opacity: 0.4;
+    color: $col;
+  }
+}
+
+
+@mixin chunk($col) {
+  path {
+    fill: $col;
+  }
+  .title {
+    color: $col;
+  }
+}
+
+@mixin grid($rep) {
+  grid-template-columns: repeat($rep,1fr);
+  display: grid;
+}
+
+
+@mixin rollover($type) {
+
+  .list {
+    &._text {
+      &-roller {
+        border-color: white;
+      }
+      &-output {
+        border-color: rgba($type,0.2);
+      }
+    }
+  }
+
+  .item {
+    &._text {
+      &-roller {
+        background-color: rgba($type,0.1);
+        border-color: white;
+        color: $type;
+
+        &.active {
+          background-color: $type;
+          color: white;
+        }
+      }
+      &-output {
+        background-color: rgba($type,0.1);
+        border-color: rgba($type,0.2);
+        color: $type;
+      }
+    }
+  }
+}

data/_sass/helpers/mixins/patterns.scss

@@ -0,0 +1,31 @@
+
+@mixin splitrow( $columns : 250px auto, $align : stretch ) {
+  grid-template-columns: $columns;
+  grid-column-gap: 20px;
+  align-items: $align;
+  display: grid;
+}
+
+@mixin border( $col : $forms, $tint : 50% ) {
+  border: 1px solid rgba( $col, $tint );
+}
+
+@mixin borderCol( $col : $forms, $tint : 50% ) {
+  border-color: rgba( $col, $tint );
+}
+
+@mixin borderRad( $calc : $radius ) {
+  border-radius: $calc;
+}
+
+@mixin color( $col : $forms, $tint : 50% ) {
+  color: rgba( $col, $tint );
+}
+
+@mixin bg( $col : $forms, $tint : 5% ) {
+  background: rgba( $col, $tint );
+}
+
+@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

@@ -0,0 +1,328 @@
+
+@mixin ThemeBook($name,$col) {
+
+  // Home Books
+
+  .wrap.book.#{$name} {
+    background-color: $col;
+
+    svg {
+      fill: white;
+    }
+  }
+
+  // Topbar Links
+
+  .button-wrap.navigation.#{$name} {
+
+    button {
+      color: $col;
+    }
+
+    &:hover {
+      background-color: rgba($col,10%);
+    }
+  }
+
+  // Chapter Covers
+
+  .area.type-chapter.book-#{$name} {
+    background-color: $col;
+  }
+
+  // Search Results
+
+  .block.results-entry.book-#{$name} {
+    color: $col;
+
+    &:hover {
+      background-color: rgba($col,10%);
+    }
+
+    .block.results-dot {
+      background-color: $col;
+    }
+  }
+}
+
+@mixin ThemeCover($name,$color,$left:false) {
+
+  // Chapter Covers
+
+  .wrap.type-chapter.chapter-#{$name} {
+    background-color: $color;
+
+    @if $left {
+      .title.chapter-title {
+        left: #{$left}px;
+      }
+    }
+  }
+}
+
+@mixin ThemePages($name,$col,$right:false) {
+
+  // Chapter Pages
+
+  .wrap.type-page.chapter-#{$name} {
+
+    .title.page-weight {
+      color: $col;
+    }
+
+    .title.page-chapter {
+      color: $col;
+      @if $right {
+        right: #{$right}px;
+      }
+    }
+
+    .title.animate {
+      color: $col;
+    }
+
+    .block.page-icon {
+      fill: $col;
+    }
+
+    .lnk.stats {
+      color: $col;
+    }
+
+    .item.text-roller {
+      background-color: rgba($col,10%);
+      color: $col;
+
+      &.active {
+        background-color: $col;
+        color: white;
+      }
+    }
+
+    .item.text-output {
+      background-color: rgba($col,10%);
+      border-color: rgba($col,20%);
+      color: $col;
+    }
+
+    .list.pies {
+      color: $col;
+    }
+
+    .block.pie.svg-wrap {
+      fill: $col;
+    }
+
+    svg#background {
+      fill: $col;
+    }
+
+    svg#tickets {
+      fill: $col;
+
+      .bar {
+        stroke: $col !important;
+      }
+    }
+  }
+}
+
+@mixin ThemePies($name,$col) {
+  &.#{$name} {
+    color: $col;
+
+    .chunk.#{$name} {
+      opacity: 1;
+    }
+  }
+}
+
+
+@mixin ThemeRoller($name,$col) {
+  &.#{$name} {
+    background-color: rgba($col,10%);
+    color: $col;
+
+    &.active {
+      background-color: $col;
+      color: white;
+    }
+  }
+}
+
+@mixin ThemeOutput($name,$col) {
+  &.#{$name} {
+    background-color: rgba($col,10%);
+    border-color: rgba($col,20%);
+    color: $col;
+  }
+}
+
+@mixin ThemeSearch($name,$col) {
+
+  // Search Results
+
+  .block.results-entry.chapter-#{$name} {
+    color: $col;
+
+    &:hover {
+      background-color: rgba($col,10%);
+    }
+
+    .block.results-dot {
+      background-color: $col;
+    }
+  }
+}
+
+
+@mixin ThemeValue($val,$prefix:false,$important:false) {
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}culture-addicts {
+        #{$val} : $addicts !important;
+      }
+    } @else {
+      &.#{$prefix}culture-addicts {
+        #{$val} : $addicts;
+      }
+    }
+  } @else {
+    @if $important {
+      &.culture-addicts {
+        #{$val} : $addicts !important;
+      }
+    } @else {
+      &.culture-addicts {
+        #{$val} : $addicts;
+      }
+    }
+  }
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}family-centric {
+        #{$val} : $family !important;
+      }
+    } @else {
+      &.#{$prefix}family-centric {
+        #{$val} : $family;
+      }
+    }
+  } @else {
+    @if $important {
+      &.family-centric {
+        #{$val} : $family !important;
+      }
+    } @else {
+      &.family-centric {
+        #{$val} : $family;
+      }
+    }
+  }
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}receptive {
+        #{$val} : $receptive !important;
+      }
+    } @else {
+      &.#{$prefix}receptive {
+        #{$val} : $receptive;
+      }
+    }
+  } @else {
+    @if $important {
+      &.receptive {
+        #{$val} : $receptive !important;
+      }
+    } @else {
+      &.receptive {
+        #{$val} : $receptive;
+      }
+    }
+  }
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}value-seekers {
+        #{$val} : $value !important;
+      }
+    } @else {
+      &.#{$prefix}value-seekers {
+        #{$val} : $value;
+      }
+    }
+  } @else {
+    @if $important {
+      &.value-seekers {
+        #{$val} : $value !important;
+      }
+    } @else {
+      &.value-seekers {
+        #{$val} : $value;
+      }
+    }
+  }
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}next-generation {
+        #{$val} : $next !important;
+      }
+    } @else {
+      &.#{$prefix}next-generation {
+        #{$val} : $next;
+      }
+    }
+  } @else {
+    @if $important {
+      &.next-generation {
+        #{$val} : $next !important;
+      }
+    } @else {
+      &.next-generation {
+        #{$val} : $next;
+      }
+    }
+  }
+
+  @if $prefix {
+    @if $important {
+      &.#{$prefix}maybe-someday {
+        #{$val} : $maybe !important;
+      }
+    } @else {
+      &.#{$prefix}maybe-someday {
+        #{$val} : $maybe;
+      }
+    }
+  } @else {
+    @if $important {
+      &.maybe-someday {
+        #{$val} : $maybe !important;
+      }
+    } @else {
+      &.maybe-someday {
+        #{$val} : $maybe;
+      }
+    }
+  }
+}
+
+@mixin theme_roller($type) {
+  background-color: rgba($type,0.1);
+  color: $type;
+
+  &.active {
+    background-color: $type;
+    color: white;
+  }
+}
+
+@mixin theme_output($type) {
+  background-color: rgba($type,0.1);
+  border-color: rgba($type,0.2);
+  color: $type;
+}