From a06931e6f50b689aade9192b091d62f60f471a8f Mon Sep 17 00:00:00 2001
From: Lucas Bonomi <lucas.bonomi@gmail.com>
Date: Fri, 26 Jan 2018 17:04:50 +0100
Subject: [PATCH] fix some css for landing

---
 docs-src/src/layouts/index.pug                |  2 +-
 docs-src/src/stylesheets/pages/_index.scss    | 75 +++++++++----------
 .../src/stylesheets/partials/_helpers.sass    | 29 ++++++-
 3 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/docs-src/src/layouts/index.pug b/docs-src/src/layouts/index.pug
index 7f2a13c..140125d 100644
--- a/docs-src/src/layouts/index.pug
+++ b/docs-src/src/layouts/index.pug
@@ -75,7 +75,7 @@ block body
                 | output you want.
 
         .col-md-2.col-sm-2.pos-rel.h700.hidden-sm.z-2
-          p#text-lines.w100p.m-l-n-large.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
+          p#text-lines.w100p.m-l-n-small.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita.
 
         .col-md-2.col-sm-2.pos-rel.visible-sm
           p#text-lines.w100p.faded Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa aspernatur dolore tempora est facere quam temporibus similique, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fuga vero ea ipsa
diff --git a/docs-src/src/stylesheets/pages/_index.scss b/docs-src/src/stylesheets/pages/_index.scss
index 9856ae9..d94d569 100644
--- a/docs-src/src/stylesheets/pages/_index.scss
+++ b/docs-src/src/stylesheets/pages/_index.scss
@@ -3,6 +3,7 @@
   margin: auto;
 }
 
+
 @media (max-width: $screen-sm) {
   .row {
     margin: 0;
@@ -78,13 +79,36 @@
     width: 360px;
     left: 0;
   }
+
+  &:before,
+  &:after {
+    content:'';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(62,57,107, 0.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g fill="none" fill-rule="evenodd"><circle cx="75" cy="75" r="70" stroke="%23FFF" stroke-width="6"/><path fill="%23FFF" d="M106 75l-47 25V50z"/></g></svg>');
+    background-size:  150px;
+    background-repeat: no-repeat;
+    background-position:  center center, center center;
+    z-index: 25;
+    border-radius: 6px;
+  }
+
+  &:before {
+    background: url(http://res.cloudinary.com/hilnmyskv/image/upload/q_10/v1516723333/minima-search_ay0ezw.png);
+    background-size: 100%;
+    z-index: 24;
+  }
+
+  &:hover:before,
+  &:hover:after {
+    display: none;
+  }
 }
 
-// @media (max-width: $screen-md) {
-//   * {
-//     background: red !important
-//   }
-// }
 
 .hero-bottom {
   @media (max-width: $screen-sm) {
@@ -199,10 +223,10 @@
     top: 0;
     left: 0;
     background:
-      url(../assets/images/illu-funnel.svg) 505px 0% no-repeat,
-      url(../assets/images/touch-point.svg) 500px 285px no-repeat,
-      url(../assets/images/touch-point.svg) 500px 435px no-repeat,
-      url(../assets/images/servers.svg) 425px 100% no-repeat;
+      url(../assets/images/illu-funnel.svg) center 0% no-repeat,
+      url(../assets/images/touch-point.svg) calc(100% / 2 - 10px) 285px no-repeat,
+      url(../assets/images/touch-point.svg) calc(100% / 2 - 10px) 435px no-repeat,
+      url(../assets/images/servers.svg) center 100% no-repeat;
     pointer-events: none;
     z-index: 10;
 
@@ -242,7 +266,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: linear-gradient(to right, #f8faff 0%, transparent 30%,  #f8faff 80%);
+    background: linear-gradient(to right, #f8faff 0%, rgba(#f8faff, 0) 30%,  #f8faff 80%);
     top: 0;
     left: 0;
   }
@@ -251,7 +275,7 @@
     width: 1000px;
 
     &:after {
-      background: linear-gradient(to right, #f8faff, transparent 10%, #f8faff)
+      background: linear-gradient(to right, #f8faff, rgba( #f8faff, 0) 10%, #f8faff)
     }
   }
 }
@@ -332,32 +356,3 @@
 }
 
 
-// Gifs layer
-.hero-animated {
-  &:before,
-  &:after {
-    content:'';
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background: rgba(62,57,107, 0.4) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><g fill="none" fill-rule="evenodd"><circle cx="75" cy="75" r="70" stroke="%23FFF" stroke-width="6"/><path fill="%23FFF" d="M106 75l-47 25V50z"/></g></svg>');
-    background-size:  150px;
-    background-repeat: no-repeat;
-    background-position:  center center, center center;
-    z-index: 25;
-    border-radius: 6px;
-  }
-
-  &:before {
-    background: url(http://res.cloudinary.com/hilnmyskv/image/upload/q_10/v1516723333/minima-search_ay0ezw.png);
-    z-index: 24;
-  }
-
-  &:hover:before,
-  &:hover:after {
-    display: none;
-  }
-}
\ No newline at end of file
diff --git a/docs-src/src/stylesheets/partials/_helpers.sass b/docs-src/src/stylesheets/partials/_helpers.sass
index c9924f6..f3df263 100644
--- a/docs-src/src/stylesheets/partials/_helpers.sass
+++ b/docs-src/src/stylesheets/partials/_helpers.sass
@@ -1,9 +1,32 @@
 // Override some aerial.css classes
 .text-heading
-	font-size: 48px
+  font-size: 48px
 
 .h-auto
-	height: auto
+  height: auto
 
 .m-l-n-large
-	margin-left: -26px
\ No newline at end of file
+  margin-left: -26px
+
+
+$debug-color-alpha: gold
+$debug-color-beta: red
+
+[debug]
+  *
+    outline: 1px solid $debug-color-alpha
+    animation: none
+
+    &:before,
+    &:after
+      outline: 1px dashed $debug-color-beta !important
+      animation: none !important
+
+    &:hover
+      background: rgba($debug-color-alpha, 0.25) !important
+
+
+    &:hover:before,
+    &:hover:after
+      background: rgba($debug-color-beta, 0.25) !important
+