From a5583beec663d20501d23f3c35c93864cea35700 Mon Sep 17 00:00:00 2001
From: Antonio Laguna <sombragriselros@gmail.com>
Date: Mon, 29 May 2017 00:24:57 +0200
Subject: [PATCH] Colors now in too

---
 src/scss/_color.scss | 681 +++++++++++++++++++++++++++++++++++++++++++
 src/scss/_vars.scss  |  29 +-
 2 files changed, 707 insertions(+), 3 deletions(-)
 create mode 100644 src/scss/_color.scss

diff --git a/src/scss/_color.scss b/src/scss/_color.scss
new file mode 100644
index 0000000..d712501
--- /dev/null
+++ b/src/scss/_color.scss
@@ -0,0 +1,681 @@
+// sass-lint:disable no-color-literals
+// sass-lint:disable no-vendor-prefixes
+body {
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+:focus {
+  box-shadow: $focus-box-shadow;
+}
+
+svg {
+  fill: currentColor;
+}
+
+[class*='bg-'] a,
+[class*='bg-gradient-'] a {
+  color: $spindle;
+}
+
+.bg-brown a {
+  color: $link-color-secondary;
+}
+
+a,
+.bg-white a,
+.bg-light a,
+.bg-gradient-white a {
+  color: $link-color;
+}
+
+a:hover {
+  color: $link-hover;
+}
+
+.flexblock li>a,
+[class*='bg-'] li>a,
+[class*='bg-gradient-'] li>a,
+article header a {
+  color: inherit;
+}
+
+hr {
+  background: $hr-bg;
+}
+
+hr:after {
+  background-color: rgba($white, .8);
+  color: $body-color;
+}
+
+abbr,
+acronym {
+  border-bottom: 1px dotted $body-bg;
+}
+
+mark,
+ins {
+  background-color: rgba($pattens-blue, .8);
+  color: inherit;
+}
+
+::-moz-selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+::-webkit-selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+::selection {
+  background-color: rgba($pattens-blue, .8);
+}
+
+pre {
+  background: $white;
+  border: 1px solid rgba($stratos, .1);
+  box-shadow: 0 8px 16px rgba($stratos, .04), 0 4px 16px rgba($black, .08);
+}
+
+pre:hover {
+  box-shadow: 0 8px 16px rgba(0, 40, 160, .08), 0 8px 24px rgba($black, .08);
+}
+
+code,
+[class*='bg-'] pre {
+  background-color: rgba($white, .09);
+}
+
+.bg-white code {
+  background: rgba($stratos, .03);
+}
+
+@each $name, $color in $bg-colors {
+  .bg-#{$name} {
+    background-color: $color;
+  }
+}
+
+[class*='bg-'] .bg-white {
+  color: $body-color;
+  text-shadow: none;
+}
+
+.bg-apple {
+  background: linear-gradient(to bottom, $black 0%, #1a2028 50%, #293845 100%);
+}
+
+.bg-trans-dark,
+.bg-trans-gradient,
+.bg-primary,
+.bg-secondary,
+.bg-blue,
+.bg-green,
+.bg-purple,
+.bg-red,
+.bg-facebook,
+.bg-apple,
+[class*='bg-black'],
+[class*='bg-gradient-'] {
+  color: $white;
+  text-shadow: 0 1px 0 #013;
+}
+
+.bg-light p {
+  color: #456;
+}
+
+.bg-brown p {
+  color: #666;
+}
+
+.bg-trans-dark {
+  background: rgba($black, .8);
+}
+
+.bg-trans-light {
+  background: rgba($black, .2);
+}
+
+.bg-trans-gradient {
+  background: linear-gradient(to top, rgba($black, .8) 0%, rgba($black, 0) 100%);
+}
+
+.bg-gradient-h {
+  background: linear-gradient(134deg, #32b 0, #62b 100%);
+}
+
+.bg-gradient-v {
+  background: linear-gradient(to top, #62b 0%, #32b 100%);
+}
+
+.bg-gradient-r {
+  background: radial-gradient(ellipse at center, #62b 0%, #32b 100%);
+}
+
+.bg-gradient-white {
+  background: linear-gradient(180deg, #f2f4f6 0, $white 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+.bg-gradient-gray {
+  background: linear-gradient(90deg, #f7f9fb 0, #dee2e6 100%);
+  color: $body-color;
+  text-shadow: none;
+}
+
+.frame {
+  border: .8rem solid $white;
+}
+
+[class*='background'].frame {
+  border-width: .2rem;
+}
+
+.shadow,
+.pre {
+  position: relative;
+}
+
+.shadow:before,
+.shadow:after {
+  box-shadow: 0 16px 24px rgba($stratos, .3);
+}
+
+.text-separator:before {
+  background-color: rgba(170, 0, 0, .8);
+}
+
+[class*='text-pull-'] {
+  border-top: 4px solid rgba($black, .5);
+}
+
+img[class*='text-pull-'],
+figure[class*='text-pull-'] {
+  border-top: 0;
+}
+
+[class*='bg-'] .text-context:before {
+  background-color: $white;
+}
+
+.text-context:before,
+.bg-white .text-context:before {
+  background-color: rgba($stratos, .2);
+}
+
+.text-shadow {
+  text-shadow: 0 0 40px rgba($black, .5);
+}
+
+[class*='card-'] time,
+h1 span {
+  color: #abd;
+}
+
+.code-comment {
+  color: rgba(70, 170, 130, .9);
+  text-shadow: none;
+}
+
+header[role='banner'] {
+  background-color: $white;
+}
+
+.logo a {
+  color: inherit;
+}
+
+nav[role='navigation'] li {
+  &.active a {
+    background-color: #555;
+    color: $white;
+  }
+
+  a {
+    background-color: rgba(50, 50, 50, .9);
+
+    &:hover {
+      background-color: rgba(50, 50, 50, .7);
+    }
+  }
+}
+
+@each $name, $color in $social-nav {
+  nav li.#{$name} a:hover {
+    background-color: $color;
+  }
+}
+
+.flexblock li.active a,
+.metrics li:hover,
+.specs li:hover,
+.reasons li:hover {
+  background-color: rgba($stratos, .03);
+}
+
+.features li,
+.clients li  {
+  background-color: rgba($white, .9);
+}
+
+[class*='bg-'] .features li,
+[class*='bg-'] .clients li {
+  background-color: rgba($white, .1);
+}
+
+.features li:hover,
+.clients li:hover  {
+  box-shadow: 0 8px 16px rgba($stratos, .02), 0 4px 16px rgba($black, .08);
+}
+
+.border {
+  border-bottom: 1px solid rgba($stratos, .1);
+  border-right: 1px solid rgba($stratos, .1);
+}
+
+.border li {
+  border-left: 1px solid rgba($stratos, .1);
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+.flexblock.border li li {
+  border: 0;
+}
+
+.steps li:nth-child(1) {
+  background-color: #e8eef7;
+}
+
+.steps li:nth-child(2) {
+  background-color: #dde5f3;
+}
+
+.steps li:nth-child(3) {
+  background-color: #cdd8ec;
+}
+
+.steps li:nth-child(4) {
+  background-color: #bbcdec;
+}
+
+.process {
+  border-bottom: 15px solid transparent;
+  border-top: 15px solid transparent;
+}
+
+.steps li:hover,
+.steps.blink li:hover>a {
+  background-color: #b8cef7;
+}
+
+@media (min-width: 1024px) {
+  .process.step-2 {
+    border-left-color: #e8eef7;
+  }
+
+  .process.step-3 {
+    border-left-color: #dde5f3;
+  }
+
+  .process.step-4 {
+    border-left-color: #cdd8ec;
+  }
+
+  .steps li:hover + li [class*='step-'] {
+    border-left-color: #b8cef7;
+  }
+}
+
+.specs li:after {
+  background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
+}
+
+.specs li:last-child:after {
+  background: none;
+}
+
+.reasons li:after {
+  background: linear-gradient(to right, rgba($stratos, 0) 0%, rgba($stratos, .2) 50%, rgba($stratos, 0) 100%);
+}
+
+.reasons li:last-child:after {
+  background: none;
+}
+
+.overlay {
+  background-color: rgba($black, .2);
+}
+
+li:hover .overlay {
+  background-color: rgba($black, .1);
+}
+
+.overlay,
+.overlay a {
+  color: $white;
+  text-shadow: 0 1px 0 #111;
+}
+
+.gallery li {
+  background-color: rgba($stratos, .06);
+  box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .03);
+}
+
+.gallery li figcaption {
+  background-color: $white;
+}
+
+.flexblock.gallery li:hover {
+  box-shadow: 0 1px 1px rgba($black, .2), 0 4px 8px rgba($black, .08);
+}
+
+.gallery li footer {
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+.gallery li a {
+  color: $body-color;
+  text-shadow: none;
+}
+
+.flesblock.gallery li a footer {
+  color: #aaa;
+}
+
+.gallery li figcaption:before {
+  border: .8rem solid $black;
+  border-color: transparent transparent $white $white;
+}
+
+.plans>li div,
+.flexblock.plans li:hover div {
+  background-color: $white;
+}
+
+.plans>li:hover,
+.plans>li:nth-child(2) {
+  box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
+}
+
+.plans:hover li:nth-child(2):not(:hover) {
+  box-shadow: none;
+}
+
+.plans li h2 {
+  background-color: rgba($stratos, .5);
+  color: $white;
+}
+
+.plans ul li {
+  border-bottom: 1px solid rgba($stratos, .1);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.plans > li > a {
+  color: $body-color;
+  text-shadow: none;
+}
+
+.activity li {
+  border-top: .1rem solid rgba($stratos, .1);
+}
+
+.activity li:hover {
+  background-color: rgba($stratos, .02);
+}
+
+.work-label,
+.work li a {
+  border-bottom: 1px solid rgba($stratos, .1);
+}
+
+.work li:nth-child(odd)>a {
+  background-color: rgba($stratos, .03);
+}
+
+.work li a:hover {
+  background-color: rgba($stratos, .04);
+}
+
+.clients.border figcaption {
+  border-top: 1px solid rgba($stratos, .1);
+}
+
+img.blacklogo {
+  background: none;
+  filter: grayscale(100%) brightness(10%) contrast(100%);
+}
+
+img.graylogo {
+  filter: grayscale(100%) brightness(10%) contrast(10%);
+}
+
+img.whitelogo {
+  filter: brightness(0) invert(1);
+}
+
+li:hover img.blacklogo,
+li:hover img.graylogo,
+img.blacklogo:hover,
+img.graylogo:hover {
+  background: none;
+  filter: grayscale(0%);
+  transition: all .6s ease;
+}
+
+[class*='card-'] > a {
+  color: inherit;
+}
+
+.description>li {
+  border-bottom: 1px solid rgba($stratos, .1);
+}
+
+.description>li:last-child {
+  border-bottom: 0;
+}
+
+[class*='card-'][class*='bg-'] figure {
+  background-color: rgba($stratos, .06);
+}
+
+[class*='card'] figcaption,
+[class*='card'] figcaption a {
+  background: linear-gradient(to bottom, rgba($black 0) 0%, rgba($black, .2) 100%);
+  color: $white;
+}
+
+@media (min-width: 768px) {
+  .cta .benefit {
+    border-image: linear-gradient(90deg, transparent, rgba($black, .4) 50%, transparent) 1 100%;
+    border-left-width: 1px;
+    border-style: solid;
+  }
+}
+
+table td,
+th,
+thead {
+  border: 1px solid rgba($black, .5);
+}
+
+thead {
+  background-color: rgba($black, .3);
+}
+
+tr:nth-child(even)>td {
+  background: rgba($black, .1);
+}
+
+tr>td {
+  border-top: 1px solid rgba($black, .5);
+}
+
+td:hover,
+tr:nth-child(even)>td:hover {
+  background-color: rgba($white, .5);
+}
+
+.browser {
+  border: 1px solid rgba($stratos, .1);
+}
+
+.browser:hover {
+  box-shadow: 0 1px 1px rgba($black, .1), 0 8px 16px rgba($black, .1);
+}
+
+.browser:before {
+  background-color: rgba($stratos, .1);
+  border-bottom: 1px solid rgba($stratos, .2);
+  color: rgba($white, .9);
+}
+
+.browser:hover:before {
+  background-color: rgba($stratos, .12);
+  color: $white;
+}
+
+input,
+textarea {
+  background-color: #fafbfc;
+}
+
+input:focus,
+textarea:focus {
+  background-color: $white;
+  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+}
+
+input:focus::-moz-placeholder {
+  color: #ddd;
+}
+
+input:focus::-webkit-input-placeholder {
+  color: #ddd;
+}
+
+a.button,
+[class*='badge-'],
+button[type='submit'],
+input {
+  box-shadow: 0 10px 16px -8px rgba($stratos, .3);
+}
+
+button,
+input,
+select,
+textarea,
+button[type='submit'],
+input[type='submit'],
+.button,
+.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  border: 1px solid $royal-blue;
+}
+
+button[type='submit'],
+input[type='submit'],
+.button,
+.button:hover,
+button[type='submit']:hover,
+input[type='submit']:hover {
+  background-color: $royal-blue;
+  color: $white;
+  text-shadow: 0 1px 0 #123;
+}
+
+.button:active,
+button[type='submit']:active,
+input[type='submit']:active {
+  background-color: #17d;
+}
+
+.ghost,
+.ghost:hover {
+  background: none;
+  color: inherit;
+  text-shadow: none;
+}
+
+.bg-primary select,
+.bg-primary textarea,
+.bg-primary .button,
+.bg-primary button,
+.bg-primary button:hover,
+.bg-primary input,
+[class*='bg-gradient-'] .button,
+[class*='bg-'] a.button.ghost {
+  border-color: $white;
+}
+
+[class*='bg-'] a.button {
+  color: $white;
+}
+
+.bg-white a.button.ghost,
+.bg-gradient-white a.button.ghost {
+  border: 1px solid $royal-blue;
+  color: $body-color;
+}
+
+:disabled,
+button:disabled:hover {
+  background-color: #eee;
+  border-color: #eee;
+  color: #ccc;
+}
+
+fieldset {
+  background-color: rgba($stratos, .2);
+  border: 1px solid $royal-blue;
+}
+
+legend {
+  background-color: rgba($black, .6);
+  color: $white;
+}
+
+input:hover,
+select:hover {
+  box-shadow: 0 0 8px rgba($black, .3);
+}
+
+[class*='badge-'] {
+  background-color: $black;
+  border: 1px solid #345;
+}
+
+form .flexblock li:hover {
+  background-color: rgba($black, .05);
+}
+
+.toc,
+.toc ol>li:before,
+.chapter {
+  background-color: #f7f9fb;
+}
+
+.toc li .toc-page:before {
+  border-bottom: 1px dotted rgba($black, .9);
+}
+
+#counter,
+#navigation a {
+  color: #abc;
+}
+
+#webslides:hover #navigation a:hover {
+  background-color: rgba($black, .9);
+  color: $white;
+}
+
+footer[role='contentinfo'] {
+  background-color: $white;
+}
diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss
index 6365690..cbb7871 100644
--- a/src/scss/_vars.scss
+++ b/src/scss/_vars.scss
@@ -1,8 +1,11 @@
+// sass-lint:disable no-color-literals
+
 // =========
-// Colours. Names from http://chir.ag/projects/name-that-color/
+// Colors. Names from http://chir.ag/projects/name-that-color/
 // =========
 $black: #000;
 $white: #fff;
+$mine-shaft: #333;
 $royal-blue: #44d;
 $havelock-blue: #67d;
 $catskill-white: #edf2f7;
@@ -17,8 +20,12 @@ $cardinal: #c23;
 $mirage: #1a2028;
 $pickled-bluewood: #293845;
 $facebook: #3b5998;
+$spindle: #bce;
+$dodger-blue: #3af;
+$pattens-blue: #def;
+$stratos: #001450;
 
-$bg-colours: (
+$bg-colors: (
   'primary': $royal-blue,
   'secondary': $havelock-blue,
   'light': $catskill-white,
@@ -32,6 +39,22 @@ $bg-colours: (
   'red': $cardinal,
   'white': $white,
   // Branding
-  'apple': linear-gradient(to bottom, $black 0%, $mirage 50%, $pickled-bluewood 100%),
   'facebook': $facebook
 ) !default;
+
+$social-nav: (
+  'twitter': #1da1f3,
+  'facebook': $facebook,
+  'linkedin': #1683bb,
+  'dribbble': #ea4c89,
+  'github': #60b044,
+  'email': #dd4b39
+) !default;
+
+$body-color: $mine-shaft !default;
+$body-bg: $catskill-white !default;
+$focus-box-shadow: 0 0 2px rgba(150, 187, 238, 1) !default;
+$link-color: $royal-blue !default;
+$link-color-secondary: $cardinal !default;
+$link-hover: $dodger-blue !default;
+$hr-bg: radial-gradient(ellipse at center, rgba(0, 20, 80, .2) 0, rgba(255, 255, 255, 0) 75%) !default;