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

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

@@ -4,49 +4,49 @@
 
 // Text Sizes
 h1 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 h2 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 h3 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 h4 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 h5 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 h6 {
-  @include type-settings(0);
+  @include text-large;
   margin-top: 0;
   margin-bottom: 0;
   padding-top: one-line(0);
   padding-bottom: one-line(0);
 }
 p {
-  @include type-settings(0);
+  @include text-large;
 }
 
 section {
@@ -92,7 +92,7 @@ h4,
 h5,
 h6 {
   @include hyphens(none);
-  @include type-settings(0);
+  @include text-large;
   @include following-paragraph-not-indented;
   text-indent: 0;
   text-transform: none;
@@ -111,7 +111,7 @@ a:visited {
 h1 {
   padding-bottom: four-lines(0);
   section & {
-    @include padding(0, 0, 4, 0, 0);
+    @include padding('text-large', 0, 0, 4, 0);
   }
 
   &.book-title,
@@ -120,8 +120,8 @@ h1 {
   }
 
   section.backmatter & {
-    @include type-settings(-1);
-    @include padding(2, 0, 2, 0, -1);
+    @include text-medium;
+    @include padding('text-medium', 2, 0, 2, 0);
   }
 
   section.titlepage & {
@@ -139,19 +139,19 @@ h1 {
   section.credits &,
   section.contributors &,
   section.appendix & {
-    @include padding(0, 0, 4, 0, -1);
+    @include padding('text-medium', 0, 0, 4, 0);
     @include following-paragraph-not-indented;
   }
 }
 
 h2 {
   section & {
-    @include padding(0, 0, 1, 0, 0);
+    @include padding('text-large', 0, 0, 1, 0);
   }
 
   section.backmatter & {
-    @include type-settings(-1);
-    @include padding(1, 0, 0, 0, -1);
+    @include text-medium;
+    @include padding('text-medium', 1, 0, 0, 0);
   }
 
   section.titlepage & {
@@ -163,25 +163,25 @@ h2 {
   section.credits &,
   section.contributors &,
   section.appendix & {
-    @include type-settings(-1);
-    @include padding(0, 0, 1, 0, -1);
+    @include text-medium;
+    @include padding('text-medium', 0, 0, 1, 0);
     @include following-paragraph-not-indented;
   }
 }
 
 h3 {
   section.titlepage & {
-    @include type-settings(-4);
+    @include text-xsmall;
     padding-bottom: one-line(-4);
   }
 }
 
 p {
-  @include type-settings(0);
+  @include text-large;
   text-indent: one-em(0);
 
   blockquote & {
-    @include type-settings(-2);
+    @include text-small;
     text-indent: 0 !important; // sass-lint:disable-line no-important
     margin-bottom: 0 !important; // sass-lint:disable-line no-important
   }
@@ -198,14 +198,14 @@ p {
       text-indent: one-em(0);
     }
     @include following-paragraph-not-indented;
-    @include type-settings(-2);
-    @include padding(0, 0, 1, 0, -2);
+    @include text-small;
+    @include padding('text-small', 0, 0, 1, 0);
   }
 
   section.colophon & {
     @include following-paragraph-not-indented;
-    @include type-settings(-2);
-    @include padding(0, 0, 1, 0, -2);
+    @include text-small;
+    @include padding('text-small', 0, 0, 1, 0);
     text-indent: 0 !important; // sass-lint:disable-line no-important
   }
 
@@ -221,17 +221,17 @@ p {
   }
 
   section.frontmatter.dedication & {
-    @include type-settings(0);
-    @include padding(0, 1, 1, 0, 0);
+    @include text-large;
+    @include padding('text-large', 0, 1, 1, 0);
     text-indent: 0;
   }
 
   section.dialogue & {
     &.interlocutor-parent {
-      @include padding(1, 0, 0, 0, 0);
+      @include padding('text-large', 1, 0, 0, 0);
       margin-top: 0;
       .interlocutor {
-        @include type-settings(-8);
+        @include sup-text;
         line-height: 1;
         font-family: $sans;
         font-weight: bold;
@@ -255,7 +255,7 @@ p {
 
   .pullquote & {
     @include following-paragraph-not-indented;
-    @include type-settings(-4);
+    @include text-xsmall;
     text-indent: 0 !important; // sass-lint:disable-line no-important
     margin-bottom: 0 !important; // sass-lint:disable-line no-important
     font-style: italic;
@@ -268,7 +268,7 @@ p {
 
   .epigraph .pullquote & {
     @include following-paragraph-not-indented;
-    @include type-settings(0);
+    @include text-large;
     float: none;
     width: 100%;
     margin-top: 0 !important; // sass-lint:disable-line no-important
@@ -290,7 +290,7 @@ cite {
   .pullquote &,
   blockquote & {
     @include following-paragraph-not-indented;
-    @include type-settings(-4);
+    @include text-xsmall;
     font-weight: normal;
     font-style: normal;
     text-indent: 0;
@@ -305,7 +305,7 @@ cite {
   }
   .epigraph .pullquote & {
     @include following-paragraph-not-indented;
-    @include type-settings(0);
+    @include text-large;
     float: none;
     width: 100%;
     text-align: center;
@@ -320,7 +320,7 @@ cite {
 // Inline elements
 sup,
 sub {
-  @include type-settings(-8);
+  @include sup-text;
   line-height: 1;
   color: $black;
   vertical-align: baseline;
@@ -344,7 +344,7 @@ small {
 }
 
 pre {
-  @include padding(1, 1, 1, 1, 0);
+  @include padding('text-large', 1, 1, 1, 1);
   margin-bottom: one-line(0);
   font-size: 1em;
   line-height: 1;
@@ -411,7 +411,7 @@ span.footnote-ref {
     @extend sup;
   }
   .footnote__body {
-    @include padding(1, 0, 1, 0, 0);
+    @include padding('text-large', 1, 0, 1, 0);
   }
 }
 

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

@@ -101,7 +101,7 @@
   // Publication title is the first element in the TOC panel.
   .publication__title {
     @include web-navigation-link;
-    @include type-settings(-2);
+    @include text-small;
     height: $dimensions-large-x;
     display: flex;
     align-items: center;
@@ -124,7 +124,7 @@
     justify-content: flex-end;
 
     .publication__search__input {
-      @include type-settings(-2);
+      @include text-small;
       border: 0;
       display: block;
       margin: 0;
@@ -156,7 +156,7 @@
 
   // The table of contents, which is an ordered, nested list.
   .publication__toc {
-    @include type-settings(-7);
+    @include caption-text;
     transform: translateX(-100%);
     position: fixed;
     z-index: 2;
@@ -200,7 +200,7 @@
   }
 
   .publication__info {
-    @include type-settings(-7);
+    @include caption-text;
     transform: translateX(100%);
     position: fixed;
     z-index: 1;
@@ -274,7 +274,7 @@
 
   // Header styles
   .publication__header {
-    @include type-settings(-7);
+    @include caption-text;
     @include web-grid-full-width;
     grid-row: 1;
 
@@ -294,7 +294,7 @@
 
     h1 {
       @include web-navigation-link;
-      @include type-settings(-2);
+      @include text-small;
       padding: 0;
       margin: 0;
     }
@@ -361,36 +361,36 @@
   // easily by using container directives, like `::: chapter`.
   //
   .publication__contents {
-    @include padding(4, 0, 3, 0, 0);
-    grid-row: 2;
-
-    @include web-grid-container; // We can't use `display: subgrid` so it is re-declared.
-    @include web-grid-full-width; // `publication__contents` spans the entire page
-    grid-template-rows: max-content; // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
-    * {
-      @include web-grid-full-width;
-    } // All elements (except for `sections`, see below) also span the entire page.
-
-    section {
-      // `section` elements are also CSS Grid containers.
-      @include web-grid-container;
-      @include web-grid-full-width;
-      *:not(section) {
-        // All child elements of a `section` (except for other `section`s)
-        // span a smaller area by default. This allows overrides to be
-        // easily applied to child elements in `_overrides.scss` to create
-        // more complex layouts.
-
-        grid-column: 4 / span 6;
-
-        @include break('mobile') {
-          grid-column: 2 / span 10;
-        }
-        @include break('tablet') {
-          grid-column: 2 / span 10;
-        }
-      }
-    }
+    @include padding('text-large', 4, 0, 3, 0);
+    // grid-row: 2;
+
+    // @include web-grid-container; // We can't use `display: subgrid` so it is re-declared.
+    // @include web-grid-full-width; // `publication__contents` spans the entire page
+    // grid-template-rows: max-content; // https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
+    // * {
+    //   @include web-grid-full-width;
+    // } // All elements (except for `sections`, see below) also span the entire page.
+
+    // section {
+    //   // `section` elements are also CSS Grid containers.
+    //   @include web-grid-container;
+    //   @include web-grid-full-width;
+    //   *:not(section) {
+    //     // All child elements of a `section` (except for other `section`s)
+    //     // span a smaller area by default. This allows overrides to be
+    //     // easily applied to child elements in `_overrides.scss` to create
+    //     // more complex layouts.
+
+    //     grid-column: 4 / span 6;
+
+    //     @include break-at('xs') {
+    //       grid-column: 2 / span 10;
+    //     }
+    //     @include break-at('sm') {
+    //       grid-column: 2 / span 10;
+    //     }
+    //   }
+    // }
 
     // Logic for overlay when sidebar open
     &:before {
@@ -459,7 +459,7 @@
   }
 
   // Media queries
-  @include break('mobile') {
+  @include break-at('xs') {
     // Sidebars
     .publication__toc,
     .publication__info {
@@ -545,7 +545,7 @@
   }
 
   // Mobile Overrides for Galleries, Fullbleed images, and spreads.
-  @include break('mobile') {
+  @include break-at('xs') {
     // Fullbleed
     .figure__fullbleed.figure__inline--landscape .figure__items {
       height: auto;

package/layout/index.scss

@@ -0,0 +1,10 @@
+@import 'container';
+@import 'figure';
+@import 'layout';
+@import 'list';
+@import 'table';
+@import 'text';
+@import 'media';
+@import 'web';
+@import 'reader';
+@import 'print';

package/mixins/_elements.scss

@@ -0,0 +1,45 @@
+@mixin caption {
+  @include caption-text;
+  line-height: 1.3;
+  margin-bottom: 0;
+  text-align: left;
+  text-indent: 0 !important;
+}
+
+@mixin bullet-container {
+  text-indent: 0;
+  margin-left: one-em(0);
+}
+
+@mixin bullet {
+  display: inline-block;
+  text-indent: one-em(0) * -1;
+}
+
+// Utility for sizing video iframe. Dimensions are variable based on whether the
+// view is 'portrait' or 'landscape'. Called in media queries.
+@mixin iframe($orientation, $ratio-a, $ratio-b) {
+  $width: 100%;
+  $height: 100%;
+  $left: 50%;
+  $transform: translateX(-50%);
+
+  @if $orientation == 'portrait' {
+    $width: $ratio-a / $ratio-b * 100vh;
+    $height: 100vh;
+  } @else if $orientation == 'landscape' {
+    $width: 100vw;
+    $height: $ratio-b / $ratio-a * 100vw;
+  } @else {
+    @error "`iframe' mixin requires either `portrait' or `landscape' parameter.";
+  }
+
+  width: 100% !important;
+  min-width: $width;
+
+  height: $height !important;
+  min-height: 100%;
+
+  left: $left !important;
+  transform: $transform !important;
+}

package/mixins/_fonts.scss

@@ -0,0 +1,21 @@
+// font-face utility mixin
+// @example     @include font-face('MyFont', 'My-Font-File-Name', ('ttf'), 400, normal);
+@mixin font-face(
+  $font-name,
+  $file-name,
+  $formats: ('ttf', 'otf'),
+  $weight: 400,
+  $style: normal
+) {
+  $filepath: '../fonts/' + $file-name;
+  @font-face {
+    font-family: '#{$font-name}';
+    @each $format in $formats {
+      src: url($filepath+'.'+$format);
+    }
+    font: {
+      weight: $weight;
+      style: $style;
+    }
+  }
+}

package/mixins/_media-queries.scss

@@ -0,0 +1,51 @@
+// Mobile
+$mq-xs: 'only screen and (max-width: 768px)';
+
+// Tablet
+$mq-sm: 'only screen and (min-width: 769px) and (max-width: 1140px)';
+
+// Desktop 1
+$mq-md: 'only screen and (min-width: 1141px) and (max-width: 1440px)';
+
+// Desktop 2
+$mq-lg: 'only screen and (min-width: 1441px) and (max-width: 1920px)';
+
+// Desktop 3
+$mq-xl: 'only screen and (min-width: 1921px)';
+
+$break-map: (
+  'xs': $mq-xs,
+  'sm': $mq-sm,
+  'md': $mq-md,
+  'lg': $mq-lg,
+  'xl': $mq-xl,
+);
+
+// Media query mixin. Accepts multiple arguments. Because the media queries are
+// relatively specific, it's simpler to wrap styles in multiple queries than to
+// work from a 'global' base (i.e., a 'mobile-first' strategy). Called with
+// a single value, or a comma separated list of values:
+//
+// @include break-at('mobile-portrait') { ... }
+// @include break-at('mobile-portrait', 'tablet-portrait') { .. }
+@mixin break-at($media...) {
+  $query: '';
+
+  @for $i from 1 through length($media) {
+    $value: map-get($break-map, nth($media, $i));
+
+    @if not $value {
+      @error "`#{$media}` is not a supported media query name.";
+    }
+
+    @if $query != '' {
+      $query: '#{$query}, #{$value}';
+    } @else {
+      $query: $value;
+    }
+  }
+
+  @media #{$query} {
+    @content;
+  }
+}

package/{_mixins.scss → mixins/_old.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('mobile') {
+  @include break-at('xs') {
     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/mixins/_text.scss

@@ -0,0 +1,51 @@
+@mixin hyphens($hyphenation: auto) {
+  -epub-hyphens: $hyphenation;
+  adobe-hyphenate: $hyphenation;
+  hyphens: $hyphenation;
+}
+
+@mixin widows($n: 2) {
+  widows: $n;
+}
+
+@mixin orphans($n: 1) {
+  orphans: $n;
+}
+
+@mixin text-rendering($value: optimizeLegibility) {
+  text-rendering: $value;
+}
+
+@mixin font-smoothing {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+@mixin variant-wght($weight-variant, $weight-static) {
+  font-weight: $weight-static; // Fallback
+  font-variation-settings: 'wght' $weight-variant;
+}
+
+@mixin following-paragraph-not-indented {
+  + p {
+    text-indent: 0 !important;
+  }
+}
+
+@mixin paragraph-not-indented {
+  margin-bottom: one-line(0);
+  text-indent: 0 !important;
+}
+
+@mixin following-element-has-no-top-padding {
+  + table,
+  + ul,
+  + ol,
+  + dl,
+  + blockquote {
+    margin-top: 0;
+  }
+  + hr {
+    margin-top: one-line(0);
+  }
+}

package/mixins/_util.scss

@@ -0,0 +1,73 @@
+@use "sass:math";
+
+// Remove units from a value
+// @example     strip-unit(1em) // => 1
+@function strip-unit($value) {
+  @if type-of($value) == 'number' and not unitless($value) {
+    // This looks bizare but needs to be divided by 1<unit> to yield an int
+    @return math.div($value, ($value * 0 + 1));
+  }
+
+  @return $value;
+}
+
+// Defaults to 16px, assuming the `html` element's base font size
+@function em-to-px($value, $root-px: 16px) {
+  @return strip-unit($value) * strip-unit($root-px) + 0px;
+}
+
+// Utility function to cast a string to a number.
+// https://www.sassmeister.com/gist/9fa19d254864f33d4a80
+@function to-number($value) {
+  @if type-of($value) == 'number' {
+    @return $value;
+  } @else if type-of($value) != 'string' {
+    @error "Value for `to-number' must be a number or a string.";
+  }
+
+  $result: 0;
+  $digits: 0;
+  $minus: str-slice($value, 1, 1) == '-';
+  $numbers: (
+    '0': 0,
+    '1': 1,
+    '2': 2,
+    '3': 3,
+    '4': 4,
+    '5': 5,
+    '6': 6,
+    '7': 7,
+    '8': 8,
+    '9': 9,
+  );
+
+  @for $i from if($minus, 2, 1) through str-length($value) {
+    $character: str-slice($value, $i, $i);
+
+    @if not(index(map-keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    }
+
+    @if $character == '.' {
+      $digits: 1;
+    } @else if $digits == 0 {
+      $result: $result * 10 + map-get($numbers, $character);
+    } @else {
+      $digits: $digits * 10;
+      $result: $result + map-get($numbers, $character) / $digits;
+    }
+  }
+
+  @return if($minus, -$result, $result);
+}
+
+// Utility function for extracting values from an aspect ratio string. '16x9'
+// yields (16, 9). Used for class names and calculations for video dimensions.
+@function aspect-ratio-values($string) {
+  $i: str-index($string, 'x');
+
+  $a: to-number(str-slice($string, 1, $i - 1));
+  $b: to-number(str-slice($string, $i + 1));
+
+  @return ($a, $b);
+}