@viewdo/dxp-story-player-assets/templates/vanillabean/starter.less

## Installation

@import "~@viewdo/dxp-story-player-assets/less/templates/vanillabean/index.less";

//===============================
// Custom Imports
//===============================

//Fonts
@import (css) "https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap";

//===============================
// Optional Vanilla Bean Variables
//===============================

// 1 - Main Brand Colors
@primary: #0768dd; //Blue
@secondary: #21dbaa; //Teal
@highlight: #fdd757; //Yellow

// 2 - Background Images
@globalBackgroundImage: "https://s3.amazonaws.com/ivx-static/koolstof/POC+Items/images/poc-bg-primary.jpg";
// optional - use the following (can be separated with line breaks) - name 'path' name 'path' name 'path';
@secondaryBackgroundImages: video1
  "https://s3.amazonaws.com/ivx-static/koolstof/POC+Items/images/poc-bg-video1.jpg"
  video2
  "https://s3.amazonaws.com/ivx-static/koolstof/POC+Items/images/poc-bg-video2.jpg"
  video3
  "https://s3.amazonaws.com/ivx-static/koolstof/POC+Items/images/poc-bg-video3.jpg"
  video4
  "https://s3.amazonaws.com/ivx-static/koolstof/POC+Items/images/poc-bg-video4.jpg";

// 3 - Fonts
// any font can be used, but they need to be imported using @import above in the imports section
// by default, both the primary and secondary (header) fonts use Open Sans
// if only a primary font is specificed, the secondary font will be set to the same font
//@primaryFont: 'Roboto', sans-serif;
@primaryFont: "Montserrat", sans-serif;

// 4 - Theme
@theme: dark;

//===============================
// Add Vanilla Bean Styles and Options
//===============================

.init-vanillabean(@primary, @secondary, @highlight, @theme);
// OPTIONS WITH DEFAULTS IN PARENTHESIS
// @primary (#EF7A00)
// @secondary (#00B2EF)
// @theme (default) options are default, light and dark

////////////////////
// Vanilla Bean Options
///////////////////

// 1 - Layout
// OPTIONS WITH DEFAULTS IN PARENTHESIS
// @layoutType (default),
// @logoPadding (1.5rem this is the top padding),
// @logoHeight (2rem - there is a max height of 2rem on mobile and 3rem on desktop),
// @contentMargin (1.5rem),
// @taglineHeight (3rem - mobile will always be scaled down 66%)
.vanillabean-layout(@logoHeight: 3rem); //REQUIRED

// 2 - Backgrounds
// OPTIONS WITH DEFAULTS IN PARENTHESIS
// @primaryBgImage ('')
// @secondaryBackgroundImages ('')
// @blurAmount (3px)
// @primaryBgColor (@primary)
// @primaryBgOpacity (15%)
// @secondaryBgColor (@secondary)
// @secondaryBgOpacity (@primaryBgOpacity)
.vanillabean-backgrounds(
  @globalBackgroundImage,
  @secondaryBackgroundImages
); //OPTIONAL

// 3 - Typography
// BECAUSE THE FONTS MIGHT CONTAIN COMMAS, OPTIONS MUST BE SEPARATED WITH SEMICOLONS
// OPTIONS WITH DEFAULTS IN PARENTHESIS
// @primaryFont ('Open Sans', sans-serif)
// @secondaryFont (@primaryFont)
// @baseFontSize (16px)
// @mobileFontSize: (16px)
// @h1Size (1.5rem)
.vanillabean-typography(@primaryFont); //REQUIRED

// 4 - Scenes
// LOAD STYLES FOR OPTIONAL SCENES, ALL STYLES ARE LOADED BY DEFAULT
//OPTIONS WITH DEFAULTS IN PARENTHESIS
// @toc (true)
// To override loading, set the variable to false in the mixin call
.vanillabean-scenes();

//===============================
// Custom Styles
//===============================
// USE SPARINGLY - try to avoid ever adding anything here!