From 378aa159b8d91b2d9950575141a6ee67e7db350c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Wed, 25 Oct 2017 23:59:53 +1100 Subject: Docs/demo refresh --- demo/src/less/settings/breakpoints.less | 9 +++++++++ demo/src/less/settings/colors.less | 27 +++++++++++++++++++++++++++ demo/src/less/settings/cosmetic.less | 12 ++++++++++++ demo/src/less/settings/icons.less | 5 +++++ demo/src/less/settings/layout.less | 5 +++++ demo/src/less/settings/spacing.less | 5 +++++ demo/src/less/settings/type.less | 17 +++++++++++++++++ 7 files changed, 80 insertions(+) create mode 100644 demo/src/less/settings/breakpoints.less create mode 100644 demo/src/less/settings/colors.less create mode 100644 demo/src/less/settings/cosmetic.less create mode 100644 demo/src/less/settings/icons.less create mode 100644 demo/src/less/settings/layout.less create mode 100644 demo/src/less/settings/spacing.less create mode 100644 demo/src/less/settings/type.less (limited to 'demo/src/less/settings') 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; -- cgit v1.2.3