@canopycanopycanopy/b-ber-theme-serif 3.0.5 → 3.0.7-canary.9

package/_settings.scss

@@ -1,19 +1,10 @@
-// Variables
-
 // Colors
+// `$black` is automatically set to #000 for e-ink readers
 $white: #fff !default;
+$grey-0: #eee !default;
+$grey-1: #696969 !default;
 $black: #222 !default;
-$grey: #eee !default;
-$light-grey: #f2f2f2 !default;
-$info: #26a4b7 !default;
-$warning: #da4539 !default;
-$danger: #cd8d59 !default;
-$success: #5050c5 !default;
-
-// Set `$grey` in case of e-ink readers
-@if $build == 'mobi' {
-  $grey: $black;
-}
+$success: #009500 !default;
 
 // General text Layout
 // If new paragraphs should be indented, and if so, by how much. The text indent size
@@ -21,25 +12,41 @@ $success: #5050c5 !default;
 // it's only applied to paragraph elements, so will remain consistent throughout
 // the document
 $text-indent: true !default;
-$text-indent-size: two-ems(0) !default;
+
+// Must be hard-coded since mixins aren't available here. Can be overridden in
+// project files
+$text-indent-size: 2em !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-base: 1em !default;
+$line-height-base: 1.5 !default;
+
+// Fonts
+$font-sans: Helvetica, Arial, sans-serif !default;
+$font-serif: 'Iowan Old Style', Georgia, Times, serif !default;
+$font-mono: Menlo, Osaka, Monaco, monospace !default;
+
+// Reader font is set in _reader.scss
+$font-family-base: $font-serif !default;
+
+@if $build == 'reader' {
+  $font-family-base: $font-serif;
+}
+
+// Reader UI elements
+$reader-header-height: 0;
+$reader-footer-height: 0;
 
-// Font stacks
-$sans: Helvetica, Arial, sans-serif !default;
-$serif: Iowan, Georgia, Times, serif !default;
-$mono: Menlo, Osaka, Monaco, monospace !default;
+// Values for the `fullbleed-vimeo-titlepage` mixin
+// Titlepage color scheme.
+$titlepage-background-color: $black !default;
+$titlepage-text-color: $white !default;
 
-$font-family-base: $serif !default;
+// Height of spread-contents used for vertical alignment in pixels
+$spread-height: 600px !default;
 
-// Inline image element dimensions as int, interpreted as ems
-$landscape-image-height: 4 !default;
-$square-image-height: 4 !default;
-$portrait-image-height: 5 !default;
-$portrait-image--high-height: 5 !default;
+$titlepage-text-aligment: left !default;

package/application.scss

@@ -5,17 +5,20 @@
 // 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 'settings';
-@import 'mixins';
+@import '~@canopycanopycanopy/b-ber-theme-mixins/application';
 
 // for validation while building on CLI, not an actual setting
 $build: 'epub' !default;
 
+.foo {
+  font-size: $font-size-base;
+}
+
 // Initialize Modular Scale
 //
 // @demo http://www.modularscale.com/

package/layout/_container.scss

@@ -1,34 +1,39 @@
-@use 'sass:math';
-
 // Set @page margin for e-readers
 @page {
   margin: em-to-px($font-size-base * 2);
 }
 
-@if $build == 'epub' {
-  html {
-    font-size: 62.5%;
-  }
-}
-
 body {
-  @include text-large;
+  @include variant-weight-regular;
   @include hyphens;
   @include widows;
   @include orphans;
   @include text-rendering;
   @include font-smoothing;
+  @include padding('text-default', 0, 0.5);
+  box-sizing: border-box;
+  font-size: 1em;
   margin: 0;
-  text-indent: 0;
-  padding: 0;
+  line-height: $line-height-base;
   font-family: $font-family-base;
+  text-indent: 0;
 }
 
-blockquote {
+blockquote,
+.pullquote {
   @include following-element-has-no-top-padding;
-  @include padding('text-large', 1, 1, 1, 1);
-  margin: 0;
-  font-size: one-em(0);
+  @include margin('text-default', 1, 0, 1, 2);
+
+  @include break('mobile') {
+    @include margin('text-default', 1, 0);
+  }
+
+  font-size: 1em;
+  padding: 0;
+
+  section.dialogue & {
+    @include margin('text-default', 1, 0, 2, 2);
+  }
 }
 
 section {
@@ -49,10 +54,12 @@ section.break-before a + div.figure__small {
 }
 
 section.subchapter {
-  margin-bottom: one-line(0);
+  margin-bottom: two-ems(0);
+
   + section.subchapter > header > h2 {
     padding-top: 0;
   }
+
   section.colophon &,
   section.afterword &,
   section.seriespage &,
@@ -65,18 +72,21 @@ section.subchapter {
 
 section.bibliography {
   margin-bottom: one-line(0);
+
   .subchapter {
     margin-bottom: 0;
   }
+
   h3 {
-    @include text-large;
-    @include padding('text-large', 0, 0, 1, 0);
+    @include text-default;
+    @include margin('text-default', 0, 0, 1);
   }
+
   h1 + .subchapter > h3 {
     padding-top: 0;
   }
+
   p {
-    @include padding('text-large', 0, 0, 1, 0);
     text-indent: 0;
   }
 }
@@ -84,8 +94,9 @@ section.bibliography {
 .audio,
 .video,
 .vimeo {
-  @include padding('text-large', 1, 1, 1, 1);
+  margin: 0;
   text-align: center;
+
   .figure__large & {
     padding: 0;
   }
@@ -99,14 +110,11 @@ section.bibliography {
 .vimeo {
   &.video--4x3,
   &.vimeo--4x3 {
-    @if $build == 'web' {
-      width: 100%;
-    } @else {
-      width: 80%;
-    }
-    @include break-at('xs') {
+    @include break-at('mobile') {
       width: 100%;
     }
+
+    width: 100%;
     margin-left: auto;
     margin-right: auto;
   }
@@ -137,15 +145,15 @@ video,
   // Outer container
 
   &.vimeo--4x3 .embed.supported {
-    padding-top: math.div(3, 4) * 100%;
+    padding-top: calc(3 / 4 * 100%);
   }
 
   &.vimeo--16x9 .embed.supported {
-    padding-top: math.div(9, 16) * 100%;
+    padding-top: calc(9 / 16 * 100%);
   }
 
   &.vimeo--21x9 .embed.supported {
-    padding-top: math.div(9, 21) * 100%;
+    padding-top: calc(9 / 21 * 100%);
   }
 
   // Inner container
@@ -172,7 +180,7 @@ video,
 }
 
 aside.note {
-  @include padding('text-large', 0, 0, 1, 0);
+  @include margin('text-default', 0, 0, 1, 0);
   text-align: left;
   margin: 0;
   p {
@@ -184,9 +192,9 @@ aside.note {
 }
 
 .pullquote {
-  @include padding('text-large', 0, 1, 1, 1);
+  @include text-default;
+  @include margin('text-default', 0, 2, 1, 2);
   text-indent: 0;
-  font-size: one-em(0);
 
   section.titlepage &,
   section.introduction &,
@@ -198,7 +206,7 @@ aside.note {
   }
 
   .epigraph & {
-    @include padding('text-large', 0, 1, 2, 1);
+    @include margin('text-default', 0, 1, 2, 1);
     float: none;
     margin-top: 0;
   }
@@ -212,17 +220,16 @@ section.backmatter {
     text-align: left;
     margin: 0;
     padding: 0;
+
     img {
       height: auto;
       width: auto;
       text-align: left;
       margin: 0;
       padding: 0;
-      @if $build == 'web' {
-        width: 60px !important; // sass-lint:disable-line no-important
-      }
-      @if $build == 'reader' {
-        width: 60px !important; // sass-lint:disable-line no-important
+
+      @if $build == 'web' or $build == 'reader' {
+        width: 60px !important;
       }
     }
   }
@@ -231,16 +238,16 @@ section.backmatter {
 section.staff {
   h3 {
     @include text-medium;
+    @include variant-weight-bold;
     text-align: left;
     margin: 0;
     padding: 0;
-    font-weight: bold;
   }
 }
 
 .masthead h2 {
   @include text-medium;
-  font-weight: 700;
+  @include variant-weight-bold;
   font-family: inherit;
   padding-top: 0;
   text-align: left;

package/layout/_epub.scss

@@ -0,0 +1,36 @@
+@if $build == 'epub' {
+  html {
+    font-size: 62.5%;
+  }
+
+  body {
+    font-family: $font-serif;
+  }
+
+  .frontmatter.titlepage {
+    #title-page-spread {
+      background: none;
+
+      ul {
+        @include type-settings(0);
+        list-style: none;
+        padding: 0;
+        margin-bottom: two-ems(0);
+      }
+
+      #title-dek {
+        h1,
+        h2 {
+          @include type-settings(18);
+          @include variant-weight(300, 300);
+          line-height: 0.9em;
+          margin-bottom: 0;
+        }
+
+        p {
+          margin-top: two-ems(0);
+        }
+      }
+    }
+  }
+}