Docs/demo refresh

7 files changed, 80 insertions, 0 deletions

diff --git a/demo/src/less/settings/breakpoints.less b/demo/src/less/settings/breakpoints.less
new file mode 100644
index 00000000..b0ce9896
--- /dev/null
+++ b/demo/src/less/settings/breakpoints.less
@@ -0,0 +1,9 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+@screen-sm: 480px;
+@screen-md: 768px;
+
+@mq-sm: ~"only screen and (min-width: @{screen-sm}) ";
+@mq-md: ~"only screen and (min-width: @{screen-md}) ";
diff --git a/demo/src/less/settings/colors.less b/demo/src/less/settings/colors.less
new file mode 100644
index 00000000..2f77fb14
--- /dev/null
+++ b/demo/src/less/settings/colors.less
@@ -0,0 +1,27 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+// Greyscale
+@gray-dark: #343f4a;
+@gray: #55646b;
+@gray-light: #cbd0d3;
+@gray-lighter: #dbe3e8;
+@off-white: #f2f5f7;
+
+// Text
+@color-text: #fff;
+
+// Plyr
+@color-brand-primary: #1aafff;
+
+// Brands
+@color-twitter: #4baaf4;
+@color-youtube: #cc181e;
+@color-vimeo: #19b7ed;
+
+// Elements
+@color-link: #fff;
+
+// Focus
+@tab-focus-default-color: #fff;
diff --git a/demo/src/less/settings/cosmetic.less b/demo/src/less/settings/cosmetic.less
new file mode 100644
index 00000000..bae2572b
--- /dev/null
+++ b/demo/src/less/settings/cosmetic.less
@@ -0,0 +1,12 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+// Button count arrow size
+@arrow-size: 8px;
+
+// Radii
+@border-radius-base: 4px;
+
+// Background
+@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 15%), darken(@color-brand-primary, 15%));
diff --git a/demo/src/less/settings/icons.less b/demo/src/less/settings/icons.less
new file mode 100644
index 00000000..d0b09b0b
--- /dev/null
+++ b/demo/src/less/settings/icons.less
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+@icon-size: 18px;
diff --git a/demo/src/less/settings/layout.less b/demo/src/less/settings/layout.less
new file mode 100644
index 00000000..810edc03
--- /dev/null
+++ b/demo/src/less/settings/layout.less
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Layout
+// ==========================================================================
+
+@container-max-width: 1280px;
diff --git a/demo/src/less/settings/spacing.less b/demo/src/less/settings/spacing.less
new file mode 100644
index 00000000..6bd14f58
--- /dev/null
+++ b/demo/src/less/settings/spacing.less
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+@spacing-base: 20px;
diff --git a/demo/src/less/settings/type.less b/demo/src/less/settings/type.less
new file mode 100644
index 00000000..b2740018
--- /dev/null
+++ b/demo/src/less/settings/type.less
@@ -0,0 +1,17 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+@font-sans-serif: 'Avenir', 'Helvetica Neue', sans-serif;
+
+@font-size-base: 16;
+@font-size-small: 14;
+@font-size-h1: 64;
+
+@font-weight-base: 500;
+@font-weight-bold: 700;
+@font-weight-heavy: 900;
+
+@line-height-base: 1.5;
+
+@letter-spacing-headings: -0.025em;