@canopycanopycanopy/b-ber-theme-serif 2.0.0 → 3.0.2

package/_settings.scss

@@ -1,29 +1,4 @@
-//
 // 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;
@@ -40,45 +15,21 @@ $success: #5050c5 !default;
   $grey: $black;
 }
 
-// Layout
-$debug: false !default;
+// 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
 $text-indent: true !default;
-$vertical-space: false !default;
-
-// 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;
+$text-indent-size: two-ems(0) !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
+// If paragraphs and header elements should have a margin bottom. Margin bottom size
+// is calculated automatically to retain vertial rhythm
+$vertical-space: false !default;
 
-$font-scale: 'minor-second' !default;
+// Vertical rhythm settings
+$font-size-base: 1.6em !default; // 16px
+$line-height-base: 1.44222 !default; // 20.8px
 
 // Font stacks
 $sans: Helvetica, Arial, sans-serif !default;
@@ -92,28 +43,3 @@ $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,94 +1,34 @@
-// 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';
+@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 '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: $font-ratio,
+  ratio: $minor-second,
 );
 
-@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);
-  }
-}
+@import 'typography';
+@import 'layout';
 
-@if $debug == true {
-  img {
-    background-color: #dcdcdc;
-  }
+// Set `$grey-0` in case of e-ink readers
+@if $build == 'mobi' {
+  $grey-0: $black;
 }

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

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

package/layout/{base/_figure.scss → _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(1, 0, 1, 0, 0);
+  @include padding('text-large', 1, 0, 1, 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(1, 0, 1, 0, 0);
+    @include padding('text-large', 1, 0, 1, 0);
     h1 + & {
       padding-top: 0;
     }

package/layout/_helpers.scss

@@ -0,0 +1,34 @@
+.break-after {
+  @if $build == 'reader' {
+    @include break-at('md') {
+      // 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-at('md') {
+      // Reader: Chrome & Safari
+      break-before: column;
+
+      // FireFox: TBD.
+      @-moz-document url-prefix() {
+      }
+    }
+  } @else {
+    // Epub, Mobi, PDF ...
+    page-break-before: always;
+  }
+}

package/layout/_layout.scss

@@ -1,50 +1,10 @@
-// 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;
-  }
+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/{base/_list.scss → _list.scss}

@@ -1,5 +1,5 @@
 ul {
-  @include type-settings(-2);
+  @include text-small;
   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 type-settings(0);
+    @include text-large;
     line-height: line-height(ms(-2));
   }
 }
 
 ol,
 dl {
-  @include type-settings(-2);
+  @include text-small;
   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(0, 1, 0, 1, -1);
+    @include padding('text-medium', 0, 1, 0, 1);
     li {
       @include following-paragraph-not-indented;
       font-weight: normal;
@@ -76,7 +76,7 @@ dl {
   }
 
   * {
-    @include type-settings(0);
+    @include text-large;
     line-height: line-height(ms(-2));
   }
 }

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

@@ -39,10 +39,9 @@
 
   // 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;
@@ -54,7 +53,7 @@
   }
 
   // Mobile Overrides for Fullbleed, spreads, and galleries.
-  @include break('mobile') {
+  @include break-at('xs') {
     // Gallery
     section.gallery .figure__gallery .figure__items {
       margin-top: 0;

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

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