Skip to content

Commit

Permalink
feat(theme-sans): updates styles for media queries and mixins
Browse files Browse the repository at this point in the history
  • Loading branch information
@msimmer
msimmer committed Jun 23, 2022
1 parent 4c74964 commit b2010fa
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 165 deletions.
107 changes: 17 additions & 90 deletions packages/b-ber-theme-sans/_settings.scss
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,3 @@
// sass-lint:disable indentation

//
// 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;
$black: #222 !default;
Expand All @@ -37,45 +8,26 @@ $warning: #da4539 !default;
$danger: #cd8d59 !default;
$success: #5050c5 !default;

// Layout
$debug: false !default;
$text-indent: true !default;
$vertical-space: false !default;
// Set `$grey` in case of e-ink readers
@if $build == 'mobi' {
$grey: $black;
}

// 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;
// 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;
$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-third' !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;
Expand All @@ -89,28 +41,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;
86 changes: 11 additions & 75 deletions packages/b-ber-theme-sans/application.scss
View file
Original file line number Diff line number Diff line change
@@ -1,100 +1,36 @@
// 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';

// Serif settings
@import 'settings';
// For validation while building on CLI, not used in production
$build: 'epub' !default;

// Get these from sibling theme
@import 'settings';
@import '~@canopycanopycanopy/b-ber-theme-serif/mixins';
@import '~@canopycanopycanopy/b-ber-theme-serif/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,
);

// Get these from sibling theme
@import '~@canopycanopycanopy/b-ber-theme-serif/typography/typography';
@import '~@canopycanopycanopy/b-ber-theme-serif/layout/layout';

// base styles
//

html {
font-size: 156.25%;
} // 25px

@if $build != 'web' {
html {
font-size: 100%;
} // still 25px
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;
}

// Import overrides specific to the `serif` theme. These can still be overridden
Expand Down

0 comments on commit b2010fa

Please sign in to comment.