From ac6a4a18cb29816ea0b082beb964d57db96067f3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 10 Apr 2018 14:38:27 +0200
Subject: [PATCH] caret fixes

---
 _src/_assets/images/icon-caret.svg           | 15 ++-------------
 _src/_assets/styles/bigchain/_dropdowns.scss | 10 ++++------
 _src/_assets/styles/bigchain/_hero.scss      | 13 +++++++------
 _src/_assets/styles/bigchain/_icons.scss     |  5 +++++
 _src/_includes/hero.html                     |  2 +-
 5 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/_src/_assets/images/icon-caret.svg b/_src/_assets/images/icon-caret.svg
index a133e61..a5119f9 100644
--- a/_src/_assets/images/icon-caret.svg
+++ b/_src/_assets/images/icon-caret.svg
@@ -1,14 +1,3 @@
-<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In  -->
-<svg version="1.1"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
-	 x="0px" y="0px" width="42.3px" height="22.2px" viewBox="0 0 42.3 22.2" style="enable-background:new 0 0 42.3 22.2;"
-	 xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
-</style>
-<defs>
-</defs>
-<g>
-	<polyline class="st0" points="41.3,1 21.2,21.2 1,1 	"/>
-</g>
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="14" viewBox="0 0 25 14">
+  <polyline fill="none" stroke="#fff" stroke-width="2" points="22.606 0 11.331 11.331 0 0" transform="translate(1 .971)"/>
 </svg>
diff --git a/_src/_assets/styles/bigchain/_dropdowns.scss b/_src/_assets/styles/bigchain/_dropdowns.scss
index 1860f93..e2bb552 100644
--- a/_src/_assets/styles/bigchain/_dropdowns.scss
+++ b/_src/_assets/styles/bigchain/_dropdowns.scss
@@ -16,11 +16,10 @@
     &:after {
         content: '';
         display: inline-block;
-        height: 0;
-        width: 0;
-        border: .3rem solid transparent;
-        border-top-color: inherit;
-        margin-bottom: -.2rem;
+        width: 14px;
+        height: 10px;
+        background: url('../img/icon-caret.svg') no-repeat center center;
+        background-size: contain;
         transition: .15s ease-out;
     }
 
@@ -28,7 +27,6 @@
     .dropdown--hover:hover & {
         &:after {
             transform: rotate(180deg);
-            margin-bottom: .2rem;
         }
     }
 }
diff --git a/_src/_assets/styles/bigchain/_hero.scss b/_src/_assets/styles/bigchain/_hero.scss
index f955002..f2b0991 100644
--- a/_src/_assets/styles/bigchain/_hero.scss
+++ b/_src/_assets/styles/bigchain/_hero.scss
@@ -91,8 +91,7 @@ $menu-height-md: 90px;
 }
 
 .page-front .menu--main,
-.hero__community,
-.hero__more {
+.hero__community {
     @include transition;
     opacity: 0;
     transition-delay: .8s;
@@ -229,18 +228,20 @@ $menu-height-md: 90px;
 .hero__more {
     position: relative;
     z-index: 2;
-    color: rgba(#fff, .6);
+    color: #fff;
+    opacity: .6;
     align-self: flex-end;
+    margin-left: auto;
+    margin-right: auto;
     margin-bottom: $spacer;
-    width: 100%;
     display: none;
 
     @media ($screen-md) {
-        display: block;
+        display: inline-block;
     }
 
     &:hover,
-    &:focus { color: #fff; }
+    &:focus { opacity: 1; }
 
     // the caret
     .icon {
diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss
index 61971fb..5d4bce3 100644
--- a/_src/_assets/styles/bigchain/_icons.scss
+++ b/_src/_assets/styles/bigchain/_icons.scss
@@ -34,3 +34,8 @@
     fill: none;
     stroke: $text-color;
 }
+
+.icon--caret {
+    stroke-width: 2px;
+    stroke: currentColor;
+}
diff --git a/_src/_includes/hero.html b/_src/_includes/hero.html
index 3156acf..e0f5ebe 100644
--- a/_src/_includes/hero.html
+++ b/_src/_includes/hero.html
@@ -43,6 +43,6 @@
         </div>
     </aside>
 
-    <a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
+    <a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon icon--caret"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
 
 </header>