// Variables /////////////// // Sizes $max-width: 1400px; // Screen breakpoints $xl: 1100px; $ipad-width: 1028px; // Is actually 1024 but we go over to ensure functionality. $l: 1000px; $m: 880px; $s: 600px; $xs: 400px; $xxs: 360px; $screen-lg: 1200px; $screen-md: 992px; $screen-sm: 768px; $screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl)); // Spacing (Margins+Padding) $-xxxl: 64px; $-xxl: 48px; $-xl: 32px; $-l: 24px; $-m: 16px; $-s: 12px; $-xs: 6px; $-xxs: 3px; $spacing: (('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl)); // Fonts $text: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Roboto", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; $mono: "Lucida Console", "DejaVu Sans Mono", "Ubunto Mono", Monaco, monospace; $heading: $text; $fs-m: 14px; $fs-s: 12px; // Colours $primary: #0288D1; $primary-dark: #0288D1; $secondary: #e27b41; $positive: #52A256; $negative: #E84F4F; $info: $primary; $warning: $secondary; $primary-faded: rgba(21, 101, 192, 0.15); // Item Colors $color-bookshelf: #af5a5a; $color-book: #009688; $color-chapter: #d7804a; $color-page: $primary; $color-page-draft: #9A60DA; // Text colours $text-dark: #444; $text-light: #EEE; // Shadows $bs-light: 0 0 4px 1px #CCC; $bs-med: 0 1px 3px 1px rgba(76, 76, 76, 0.26); $bs-card: 0 1px 6px -1px rgba(0, 0, 0, 0.1); $bs-hover: 0 2px 2px 1px rgba(0,0,0,.13);