Clone's documentation uses Cookies and Google Analytics to help us better understand our visitors. By viewing this site, you agree to have this basic information collected and relayed back to us. You can learn more about how Google Analytics provides us with this information here.
Talent Cloud's theme is designed to be professional yet warm, welcoming, and distinctly Canadian. This theme is actively used on Talent Cloud's hiring experiment.
// Clone: Talent Cloud Edition
// Media Queries
// Phone (Portrait): 320px
$clone-phone-portrait: "screen and (min-width: 20em)";
// Phone (Landscape): 480px
$clone-phone-landscape: "screen and (min-width: 30em)";
// Tablet (Portrait): 768px
$clone-tablet-portrait: "screen and (min-width: 48em)";
// Tablet (Landscape): 1024px
$clone-tablet-landscape: "screen and (min-width: 64em)";
// Desktop (Small): 1025px
$clone-desktop-small: "screen and (min-width: 64.01em)";
// Desktop (Medium): 1600px
$clone-desktop-medium: "screen and (min-width: 100em)";
// Desktop (Large): 1760px
$clone-desktop-large: "screen and (min-width: 110em)";
// Layout Variables
$clone-large-layout: 100rem;
$clone-medium-layout: 60rem;
$clone-small-layout: 39rem;
// Whitespace Variables
// On Portrait Phone Devices, Media Queries exist at Tablet Landscape, and Desktop Large and are generated using the multiplier below.
$clone-margin: 1rem;
$clone-padding: 1rem;
// Calculation Variables
$clone-whitespace-multiplier: 1.1;
$clone-ws-tp: #{$clone-whitespace-multiplier}; // 1.4rem
$clone-ws-tl: #{$clone-ws-tp} * #{$clone-whitespace-multiplier}; // 1.68rem
$clone-ws-ds: #{$clone-ws-tl} * #{$clone-whitespace-multiplier}; // 2.016rem
$clone-ws-dm: #{$clone-ws-ds} * #{$clone-whitespace-multiplier}; // 2.4192rem
$clone-ws-dl: #{$clone-ws-dm} * #{$clone-whitespace-multiplier}; // 2.90304rem
// Grid Variables
$clone-grid-columns: 12;
// Main Color Variables
// Black & White
$clone-white: #FFFFFF;
$clone-gray: rgba(150, 150, 150, 1);
$clone-black: rgba(20, 20, 35, 1);
// Theme Colors
$clone-c1: #5b1647;
$clone-c2: #96043e;
$clone-c3: #c90035;
$clone-c4: #0a6cbc;
$clone-c5: #0a6cbc;
// Go, Slow, Stop
$clone-go: green;
$clone-slow: orange;
$clone-stop: red;
// Sitewide Color Variables
// Text Selection
$clone-selection-background-color: $clone-c4;
// Hover
$clone-hover-color: $clone-c4;
// Focus
$clone-focus-color: $clone-hover-color;
// Horizontal Rules
$clone-hr-color: $clone-c2;
// Font Variables
// Fonts
$clone-font-sans: "Open Sans", sans-serif;
$clone-font-serif: serif;
$clone-font-script: "Euphoria Script", cursive;
$clone-font-monospace: "Consolas", monospace;
$clone-font-default: $clone-font-sans;
// Default Line Height
$clone-line-height: 1.5;
// The Typography Scale
$clone-default-font-size: 1rem;
$clone-font-scale: 1.250;
$clone-font-scale-small: calc(#{$clone-default-font-size}/(#{$clone-font-scale}));
$clone-font-scale-h5: $clone-default-font-size;
$clone-font-scale-h4: calc(#{$clone-default-font-size}*(#{$clone-font-scale}));
$clone-font-scale-h3: calc(#{$clone-font-scale-h4}*(#{$clone-font-scale}));
$clone-font-scale-h2: calc(#{$clone-font-scale-h3}*(#{$clone-font-scale}));
$clone-font-scale-h1: calc(#{$clone-font-scale-h2}*(#{$clone-font-scale}));
// Headings
// h1
$clone-heading-1-border-color: $clone-c3;
$clone-heading-1-border-style: none none solid none;
$clone-heading-1-border-width: 0px;
$clone-heading-1-color: $clone-white;
$clone-heading-1-font: $clone-font-sans;
$clone-heading-1-font-size: $clone-font-scale-h1;
$clone-heading-1-font-weight: bold;
// h2
$clone-heading-2-border-color: $clone-black;
$clone-heading-2-border-style: none none solid none;
$clone-heading-2-border-width: 1px;
$clone-heading-2-color: $clone-black;
$clone-heading-2-font: $clone-font-sans;
$clone-heading-2-font-size: $clone-font-scale-h2;
$clone-heading-2-font-weight: normal;
// h3
$clone-heading-3-border-color: $clone-black;
$clone-heading-3-border-style: none none solid none;
$clone-heading-3-border-width: 0px;
$clone-heading-3-color: $clone-c3;
$clone-heading-3-font: $clone-font-sans;
$clone-heading-3-font-size: $clone-font-scale-h3;
$clone-heading-3-font-weight: normal;
// h4
$clone-heading-4-border-color: $clone-c3;
$clone-heading-4-border-style: none none solid none;
$clone-heading-4-border-width: 0px;
$clone-heading-4-color: $clone-black;
$clone-heading-4-font: $clone-font-sans;
$clone-heading-4-font-size: $clone-font-scale-h4;
$clone-heading-4-font-weight: bold;
//h5
$clone-heading-5-border-color: $clone-c1;
$clone-heading-5-border-style: none none solid none;
$clone-heading-5-border-width: 1px;
$clone-heading-5-color: $clone-c1;
$clone-heading-5-font: $clone-font-sans;
$clone-heading-5-font-size: $clone-font-scale-h5;
$clone-heading-5-font-weight: normal;
// Component Options
// Cards
$clone-card-shadow: 0 2px 7px rgba(0, 0, 0, .5);
// Component Color Variables
// Accordions
$clone-accordion-border-color: $clone-black;
$clone-accordion-alternating-background-color: lighten($clone-gray, 35%);
// Alerts
$clone-alert-information: $clone-c1;
$clone-alert-warning: $clone-slow;
$clone-alert-error: $clone-stop;
// Blockquotes
$clone-blockquote-color: $clone-c1;
// Carousels
$clone-carousel-dot-color: $clone-c1;
$clone-carousel-dot-active-color: $clone-c3;
// Code Blocks
$clone-code-background: $clone-black;
// Menus
$clone-menu-background-color: $clone-black;
$clone-submenu-background-color: $clone-c2;
$clone-menu-font-color: $clone-white;
$clone-menu-divider-color: rgba($clone-c3, .5);
$clone-menu-icon-color: $clone-white;
// Pullquotes
$clone-pullquote-color: $clone-c2;
// Tables
// Note that $clone-table-alternating-color's transparency allows for a checker pattern on the grid when there is a vertical heading column.
$clone-table-heading-color: $clone-c1;
$clone-table-alternating-color: rgba(0, 0, 0, .1);