153 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			SCSS
		
	
	
	
			
		
		
	
	
			153 lines
		
	
	
		
			4.7 KiB
		
	
	
	
		
			SCSS
		
	
	
	
| // 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: 800px;
 | |
| $s: 600px;
 | |
| $xs: 400px;
 | |
| $xxs: 360px;
 | |
| $screen-lg: 1200px;
 | |
| $screen-md: 992px;
 | |
| $screen-sm: 768px;
 | |
| 
 | |
| // Spacing (Margins+Padding)
 | |
| $-xxxl: 64px;
 | |
| $-xxl: 48px;
 | |
| $-xl: 32px;
 | |
| $-l: 24px;
 | |
| $-m: 16px;
 | |
| $-s: 12px;
 | |
| $-xs: 6px;
 | |
| $-xxs: 3px;
 | |
| 
 | |
| // Fonts
 | |
| $heading:  'Roboto', Helvetica, Arial, sans-serif;
 | |
| $text: 'Roboto', Helvetica, Arial, sans-serif;
 | |
| $fs-m: 15px;
 | |
| $fs-s: 14px;
 | |
| 
 | |
| // Colours
 | |
| $primary: #0288D1;
 | |
| $primary-dark: #0288D1;
 | |
| $secondary: #e27b41;
 | |
| $positive: #52A256;
 | |
| $negative: #E84F4F;
 | |
| 
 | |
| // Item Colors
 | |
| $color-book: #009688;
 | |
| $color-chapter: #ef7c3c;
 | |
| $color-page: $primary;
 | |
| 
 | |
| // 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-hover: 0 2px 2px 1px rgba(0,0,0,.13);
 | |
| 
 | |
| 
 | |
| /* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 30, 2015 */
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-bold-webfont.eot');
 | |
|   src: url('/fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-bold-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-bold-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-bold-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-bold-webfont.svg#robotobold') format('svg');
 | |
|   font-weight: bold;
 | |
|   font-style: normal;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-bolditalic-webfont.eot');
 | |
|   src: url('/fonts/roboto-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-bolditalic-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-bolditalic-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-bolditalic-webfont.svg#robotobold_italic') format('svg');
 | |
|   font-weight: bold;
 | |
|   font-style: italic;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-italic-webfont.eot');
 | |
|   src: url('/fonts/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-italic-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-italic-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-italic-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-italic-webfont.svg#robotoitalic') format('svg');
 | |
|   font-weight: normal;
 | |
|   font-style: italic;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-light-webfont.eot');
 | |
|   src: url('/fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-light-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-light-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-light-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-light-webfont.svg#robotolight') format('svg');
 | |
|   font-weight: 300;
 | |
|   font-style: normal;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-lightitalic-webfont.eot');
 | |
|   src: url('/fonts/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-lightitalic-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-lightitalic-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-lightitalic-webfont.svg#robotolight_italic') format('svg');
 | |
|   font-weight: 300;
 | |
|   font-style: italic;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-medium-webfont.eot');
 | |
|   src: url('/fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-medium-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-medium-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-medium-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-medium-webfont.svg#robotomedium') format('svg');
 | |
|   font-weight: 500;
 | |
|   font-style: normal;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-mediumitalic-webfont.eot');
 | |
|   src: url('/fonts/roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-mediumitalic-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-mediumitalic-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-mediumitalic-webfont.svg#robotomedium_italic') format('svg');
 | |
|   font-weight: 500;
 | |
|   font-style: italic;
 | |
| }
 | |
| 
 | |
| @font-face {
 | |
|   font-family: 'Roboto';
 | |
|   src: url('/fonts/roboto-regular-webfont.eot');
 | |
|   src: url('/fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
 | |
|   url('/fonts/roboto-regular-webfont.woff2') format('woff2'),
 | |
|   url('/fonts/roboto-regular-webfont.woff') format('woff'),
 | |
|   url('/fonts/roboto-regular-webfont.ttf') format('truetype'),
 | |
|   url('/fonts/roboto-regular-webfont.svg#robotoregular') format('svg');
 | |
|   font-weight: normal;
 | |
|   font-style: normal;
 | |
| }
 |