@canopycanopycanopy/b-ber-theme-serif 1.2.13-media-queries.62 → 1.2.13-react-reader.70

package/{mixins/_old.scss → _mixins.scss}

@@ -290,7 +290,7 @@ $grid-row-height-percentage: (100% - $grid-row-gap-percentage) /
   grid-template: grid-template($grid-column-count, $row-height);
   grid-gap: grid-gap();
 
-  @include break-at('xs') {
+  @include break('mobile') {
     grid-template: grid-template(round($grid-column-count / 2), 'auto');
   }
 }
@@ -309,7 +309,7 @@ $grid-row-height-percentage: (100% - $grid-row-gap-percentage) /
 // @param $bottom   int     Number of line-height units at type-settings(0) to add as padding-bottom
 // @param $right    int     Number of `em`s at type-settings(0) to add as padding-right
 // @param $value    int     Elements type-settings index
-// @example         padding: @include padding(1, 1, 1, 1, 0); // => padding: 1em 1.3125em 1em 1.3125em;
+// @example         padding: @include padding(1, 1, 1, 1, 0) // => padding: 1em 1.3125em 1em 1.3125em;
 @mixin padding($top, $right, $bottom, $left, $value) {
   padding: adjust-line-height-value($value) * $top + 0em
     adjust-font-size-value($value) * $right + 0em

package/_settings.scss

@@ -1,4 +1,29 @@
+//
 // Variables
+//
+
+// Media Queries
+$media-mobile: 'only screen \
+                and (min-width: 320px) \
+                and (max-width: 680px)' !default;
+$media-tablet: 'only screen \
+                and (min-width: 768px) \
+                and (min-height: 1024px) \
+                and (max-width: 768px) \
+                and (max-height: 768px)' !default;
+$media-desktop: 'only screen \
+                and (min-width: 960px)' !default;
+$media-wide: 'only screen \
+                and (min-width: 1590px)' !default;
+$media-tall: 'only screen \
+                and (min-height: 860px) \
+                and (min-width:  960px)' !default;
+$mobile-short: 'only screen \
+                and (max-height: 860px) \
+                and (max-width: 960px)' !default;
+$desktop-short: 'only screen \
+                and (max-height: 860px) \
+                and (min-width: 960px)' !default;
 
 // Colors
 $white: #fff !default;
@@ -15,21 +40,45 @@ $success: #5050c5 !default;
   $grey: $black;
 }
 
-// General text Layout
-// If new paragraphs should be indented, and if so, by how much. The text indent size
-// can be set to a simple relative unit (not calculated based on font size) because
-// it's only applied to paragraph elements, so will remain consistent throughout
-// the document
+// Layout
+$debug: false !default;
 $text-indent: true !default;
-$text-indent-size: two-ems(0) !default;
-
-// If paragraphs and header elements should have a margin bottom. Margin bottom size
-// is calculated automatically to retain vertial rhythm
 $vertical-space: false !default;
 
-// Vertical rhythm settings
-$font-size-base: 1.6em !default; // 16px
-$line-height-base: 1.44222 !default; // 20.8px
+// Font size and view port
+// The min-width and max-width sizes set the viewport dimensions for font scaling
+// The min-font and max-font is the range that the font will scale within the viewport settings
+$min-width: 320px !default;
+$max-width: 1980px !default;
+$min-font: 17px !default;
+$max-font: 21px !default;
+$font-size-base: 1em !default;
+$line-height-base: 1.3 !default;
+
+// Typgraphic Scale
+//
+// Function                                 Ratio           Decimal value
+// ---                                      ---             ---
+// $font-scale: 'phi'                ;//    1:1.618         1.618
+// $font-scale: 'golden'             ;//    1:1.618         1.618
+// $font-scale: 'double-octave'      ;//    1:4             4
+// $font-scale: 'major-twelfth'      ;//    1:3             3
+// $font-scale: 'major-eleventh'     ;//    3:8             2.667
+// $font-scale: 'major-tenth'        ;//    2:5             2.5
+// $font-scale: 'octave'             ;//    1:2             2
+// $font-scale: 'major-seventh'      ;//    8:15            1.875
+// $font-scale: 'minor-seventh'      ;//    9:16            1.778
+// $font-scale: 'major-sixth'        ;//    3:5             1.667
+// $font-scale: 'minor-sixth'        ;//    5:8             1.6
+// $font-scale: 'fifth'              ;//    2:3             1.5
+// $font-scale: 'augmented-fourth'   ;//    1:√2            1.414
+// $font-scale: 'fourth'             ;//    3:4             1.333
+// $font-scale: 'major-third'        ;//    4:5             1.25
+// $font-scale: 'minor-third'        ;//    5:6             1.2
+// $font-scale: 'major-second'       ;//    8:9             1.125
+// $font-scale: 'minor-second'       ;//    15:16           1.067
+
+$font-scale: 'minor-second' !default;
 
 // Font stacks
 $sans: Helvetica, Arial, sans-serif !default;
@@ -43,3 +92,28 @@ $landscape-image-height: 4 !default;
 $square-image-height: 4 !default;
 $portrait-image-height: 5 !default;
 $portrait-image--high-height: 5 !default;
+
+// CSS Grid settings for Reader view
+$grid-row-count: 2 !default; // Number of rows
+$grid-column-count: 12 !default; // Number of columns
+$grid-row-gap-percentage: 14 !default; // Height of the gap between rows
+$grid-column-gap-percentage: 3 !default; // Width of the gap between columns (the gutter)
+
+// Grid items' size and location. Declaring both start and end properties will
+// result in the following:
+//
+// $grid-column-start: 1;
+// $grid-column-end: 2;
+//
+// 1 / 2
+//
+// If only the start property is required, omit the second by setting it to an
+// empty string:
+//
+// $grid-column-start: 'span 1';
+// $grid-column-end: '';
+//
+// span 1
+//
+$grid-column-start: 'span 4' !default;
+$grid-column-end: '' !default;

package/application.scss

@@ -1,34 +1,94 @@
+// sass-lint:disable mixins-before-declarations
+
 // Declare namespaces
 @namespace url('http://www.w3.org/1999/xhtml');
 @namespace epub url('http://www.idpf.org/2007/ops');
 
 // Load vendor libs
 // https://github.com/modularscale/modularscale-sass
-@import '~modularscale-sass/stylesheets/_modularscale';
-// @import '../../node_modules/modularscale-sass/stylesheets/_modularscale.scss';
-
-// For validation while building on CLI, not used in production
-$build: 'epub' !default;
+@import '~modularscale-sass';
 
 @import 'settings';
 @import 'mixins';
+@import 'debug';
 
 // for validation while building on CLI, not an actual setting
 $build: 'epub' !default;
 
+// Font ratio is set by user, but modular-scale isn't available yet in their
+// settings, so we map to values once the lib has loaded
+$font-scale: 'fifth' !default;
+
+$font-ratios: (
+  'phi': $phi,
+  'golden': $golden,
+  'double-octave': $double-octave,
+  'major-twelfth': $major-twelfth,
+  'major-eleventh': $major-eleventh,
+  'major-tenth': $major-tenth,
+  'octave': $octave,
+  'major-seventh': $major-seventh,
+  'minor-seventh': $minor-seventh,
+  'major-sixth': $major-sixth,
+  'minor-sixth': $minor-sixth,
+  'fifth': $fifth,
+  'augmented-fourth': $augmented-fourth,
+  'fourth': $fourth,
+  'major-third': $major-third,
+  'minor-third': $minor-third,
+  'major-second': $major-second,
+  'minor-second': $minor-second,
+);
+
+$font-ratio: map-get($font-ratios, $font-scale);
+
 // Initialize Modular Scale
 //
 // @demo http://www.modularscale.com/
 // @repo https://github.com/modularscale/modularscale-sass
 $modularscale: (
   base: $font-size-base,
-  ratio: $minor-second,
+  ratio: $font-ratio,
 );
 
-@import 'typography';
-@import 'layout';
+@import 'typography/typography';
+@import 'layout/layout';
+
+// base styles
+//
+
+html {
+  font-size: 156.25%; // 25px
+}
+
+@if $build != 'web' {
+  html {
+    font-size: 100%; // 16px
+  }
+  body {
+    padding: 0 one-em(0) * 0.5;
+  }
+}
+
+@if $build == 'web' {
+  .publication__contents {
+    font-size: 80%; // 20px
+  }
+  @include break('mobile') {
+    .publication__contents {
+      font-size: 68%; // 17px
+    }
+  }
+}
+
+@if $build == 'reader' {
+  #layout {
+    @include fluid-type($min-width, $max-width, $min-font, $max-font);
+  }
+}
 
-// Set `$grey-0` in case of e-ink readers
-@if $build == 'mobi' {
-  $grey-0: $black;
+@if $debug == true {
+  img {
+    background-color: #dcdcdc;
+  }
 }

package/layout/_layout.scss

@@ -1,10 +1,50 @@
-hr {
-  @include following-paragraph-not-indented;
-  @include following-element-has-no-top-padding;
-  width: 25%;
-  background-color: $grey;
-  padding: 0;
-  margin: one-line(0) auto;
-  height: 1px;
-  border: 0;
+// Set @page margin for e-readers
+@page {
+  margin: em-to-px($font-size-base * 2);
+}
+
+@import 'base/container';
+@import 'base/figure';
+@import 'base/layout';
+@import 'base/list';
+@import 'base/table';
+@import 'base/text';
+@import 'base/media';
+@import 'base/web'; // conditional styles
+@import 'base/reader'; // conditional styles
+@import 'base/print'; // for print views and PDF generation
+
+.break-after {
+  @if $build == 'reader' {
+    @include break('desktop') {
+      // Reader: Chrome & Safari
+      break-after: column;
+
+      // FireFox: TBD.
+      // `break`ing in the column context in FireFox is unsupported, so shims
+      // will need to be added on a per-project basis until we find a reliable
+      // way of dealing with this
+      @-moz-document url-prefix() {
+      }
+    }
+  } @else {
+    // Epub, Mobi, PDF ...
+    page-break-after: always;
+  }
+}
+
+.break-before {
+  @if $build == 'reader' {
+    @include break('desktop') {
+      // Reader: Chrome & Safari
+      break-before: column;
+
+      // FireFox: TBD.
+      @-moz-document url-prefix() {
+      }
+    }
+  } @else {
+    // Epub, Mobi, PDF ...
+    page-break-before: always;
+  }
 }

package/layout/{_container.scss → base/_container.scss}

@@ -1,20 +1,5 @@
-@use 'sass:math';
-
-// Set @page margin for e-readers
-@page {
-  margin: em-to-px($font-size-base * 2);
-}
-
-html {
-  @if $build == 'reader' {
-    font-size: 62.5%; // 10px
-  } @else {
-    font-size: 150%; // 24px
-  }
-}
-
 body {
-  @include text-large;
+  @include type-settings(0);
   @include hyphens;
   @include widows;
   @include orphans;
@@ -28,7 +13,7 @@ body {
 
 blockquote {
   @include following-element-has-no-top-padding;
-  @include padding('text-large', 1, 1, 1, 1);
+  @include padding(1, 1, 1, 1, 0);
   margin: 0;
   font-size: one-em(0);
 }
@@ -71,14 +56,14 @@ section.bibliography {
     margin-bottom: 0;
   }
   h3 {
-    @include text-large;
-    @include padding('text-large', 0, 0, 1, 0);
+    @include type-settings(0);
+    @include padding(0, 0, 1, 0, 0);
   }
   h1 + .subchapter > h3 {
     padding-top: 0;
   }
   p {
-    @include padding('text-large', 0, 0, 1, 0);
+    @include padding(0, 0, 1, 0, 0);
     text-indent: 0;
   }
 }
@@ -86,7 +71,7 @@ section.bibliography {
 .audio,
 .video,
 .vimeo {
-  @include padding('text-large', 1, 1, 1, 1);
+  @include padding(1, 1, 1, 1, 0);
   text-align: center;
   .figure__large & {
     padding: 0;
@@ -106,7 +91,7 @@ section.bibliography {
     } @else {
       width: 80%;
     }
-    @include break-at('xs') {
+    @include break('mobile') {
       width: 100%;
     }
     margin-left: auto;
@@ -139,15 +124,15 @@ video,
   // Outer container
 
   &.vimeo--4x3 .embed.supported {
-    padding-top: math.div(3, 4) * 100%;
+    padding-top: 3 / 4 * 100%;
   }
 
   &.vimeo--16x9 .embed.supported {
-    padding-top: math.div(9, 16) * 100%;
+    padding-top: 9 / 16 * 100%;
   }
 
   &.vimeo--21x9 .embed.supported {
-    padding-top: math.div(9, 21) * 100%;
+    padding-top: 9 / 21 * 100%;
   }
 
   // Inner container
@@ -174,7 +159,7 @@ video,
 }
 
 aside.note {
-  @include padding('text-large', 0, 0, 1, 0);
+  @include padding(0, 0, 1, 0, 0);
   text-align: left;
   margin: 0;
   p {
@@ -186,7 +171,7 @@ aside.note {
 }
 
 .pullquote {
-  @include padding('text-large', 0, 1, 1, 1);
+  @include padding(0, 1, 1, 1, 0);
   text-indent: 0;
   font-size: one-em(0);
 
@@ -200,7 +185,7 @@ aside.note {
   }
 
   .epigraph & {
-    @include padding('text-large', 0, 1, 2, 1);
+    @include padding(0, 1, 2, 1, 0);
     float: none;
     margin-top: 0;
   }
@@ -232,7 +217,7 @@ section.backmatter {
 
 section.staff {
   h3 {
-    @include text-medium;
+    @include type-settings(-1);
     text-align: left;
     margin: 0;
     padding: 0;
@@ -241,7 +226,7 @@ section.staff {
 }
 
 .masthead h2 {
-  @include text-medium;
+  @include type-settings(-1);
   font-weight: 700;
   font-family: inherit;
   padding-top: 0;

package/layout/{_figure.scss → base/_figure.scss}

@@ -47,7 +47,7 @@ figure {
 
 .figure__large {
   // Space is added in the event that readers don't respect the page-break atrribute.
-  @include padding('text-large', 1, 0, 1, 0);
+  @include padding(1, 0, 1, 0, 0);
   page-break-before: always;
   page-break-after: always;
 }
@@ -102,7 +102,7 @@ figure {
   &.figure__small--square,
   &.figure__small--portrait,
   &.figure__small--portrait-high {
-    @include padding('text-large', 1, 0, 1, 0);
+    @include padding(1, 0, 1, 0, 0);
     h1 + & {
       padding-top: 0;
     }

package/layout/base/_layout.scss

@@ -0,0 +1,10 @@
+hr {
+  @include following-paragraph-not-indented;
+  @include following-element-has-no-top-padding;
+  width: 25%;
+  background-color: $grey;
+  padding: 0;
+  margin: one-line(0) auto;
+  height: 1px;
+  border: 0;
+}

package/layout/{_list.scss → base/_list.scss}

@@ -1,5 +1,5 @@
 ul {
-  @include text-small;
+  @include type-settings(-2);
   padding: one-line(-2) 0 one-line(-2) two-ems(0);
   @include following-element-has-no-top-padding; // sass-lint:disable-line mixins-before-declarations
   list-style: disc;
@@ -31,14 +31,14 @@ ul {
   }
 
   * {
-    @include text-large;
+    @include type-settings(0);
     line-height: line-height(ms(-2));
   }
 }
 
 ol,
 dl {
-  @include text-small;
+  @include type-settings(-2);
   padding: one-line(-2) 0 one-line(-2) two-ems(0);
   @include following-element-has-no-top-padding; // sass-lint:disable-line mixins-before-declarations
   list-style: decimal;
@@ -66,7 +66,7 @@ dl {
   section.colophon &,
   section.appendix &,
   section.backmatter & {
-    @include padding('text-medium', 0, 1, 0, 1);
+    @include padding(0, 1, 0, 1, -1);
     li {
       @include following-paragraph-not-indented;
       font-weight: normal;
@@ -76,7 +76,7 @@ dl {
   }
 
   * {
-    @include text-large;
+    @include type-settings(0);
     line-height: line-height(ms(-2));
   }
 }

package/layout/{_reader.scss → base/_reader.scss}

@@ -39,9 +39,10 @@
 
   // Gallery Styling This sets up a layout for galleries that contains 12
   // columns and two rows by default and is responsive.
+
   section.gallery .figure__gallery {
     .figure__items {
-      // @include grid-layout;
+      @include grid-layout;
       width: 85vw;
       height: 75vh;
       margin-top: 75px;
@@ -53,7 +54,7 @@
   }
 
   // Mobile Overrides for Fullbleed, spreads, and galleries.
-  @include break-at('xs') {
+  @include break('mobile') {
     // Gallery
     section.gallery .figure__gallery .figure__items {
       margin-top: 0;

package/layout/{_table.scss → base/_table.scss}

@@ -3,7 +3,7 @@
 }
 
 table {
-  @include table-text;
+  @include type-settings(-6);
   page-break-inside: avoid;
   border-collapse: collapse;
   border-spacing: 0;
@@ -16,7 +16,7 @@ table {
     }
     th,
     td {
-      @include text-large;
+      @include type-settings(0);
       font-family: $sans;
       text-align: left;
       padding: one-em(0);