From 4db457f214f9bd9ed43ed867aa97389b79e89f89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Fri, 18 Oct 2019 11:27:43 +0200
Subject: [PATCH] fix(): Change line-eight of heading, align symbol to right

---
 src/404.html                      |  8 ++++----
 src/_includes/navbar/search.html  | 12 +++++++-----
 src/_sass/components/_search.scss |  4 ++++
 src/_sass/components/_stage.scss  |  1 +
 src/_sass/pages/_page-404.scss    | 14 +++++++++++++-
 5 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/404.html b/src/404.html
index a174b18b2a..c4c3011a7f 100644
--- a/src/404.html
+++ b/src/404.html
@@ -19,13 +19,13 @@
         <div class="page-404">
           <div class="flex">
             <div class="flex__column--12 flex__column--9@xlarge">
-              <h1>The page you were looking for doesn’t exist.</h1>
+              <h1 class="page-404__heading">The page you were looking for doesn’t exist.</h1>
               <div class="flex">
-                <div class="flex__column--10 markdown">
+                <div class="flex__column--12 flex__column--10@xlarge markdown">
                   <p>You may have mistyped the address or the page may have moved. Double-check the URL and try again or search the term.</p>
 
-                  <div class="search" data-search>
-                    {% include navbar/search.html placeholder="Enter a search term" %}
+                  <div class="search search--mobile" data-search>
+                    {% include navbar/search.html placeholder="Enter a search term" mobile="true" %}
                   </div>
                 </div>
               </div>
diff --git a/src/_includes/navbar/search.html b/src/_includes/navbar/search.html
index 0dfd1190bb..c51b9c86b3 100644
--- a/src/_includes/navbar/search.html
+++ b/src/_includes/navbar/search.html
@@ -5,9 +5,11 @@
 
   <input class="field__input input DocsNav-search-input" type="text" placeholder="{{ include.placeholder }}"/>
 
-  <div class="field__icon field__icon--right flex flex--middle flex--center">
-    <button class="field__button" data-ref="search-navbar[trigger]">
-      {% include icons/symbols/close.svg %}
-    </button>
-  </div>
+  {% unless include.mobile %}
+    <div class="field__icon field__icon--right flex flex--middle flex--center">
+      <button class="field__button" data-ref="search-navbar[trigger]">
+        {% include icons/symbols/close.svg %}
+      </button>
+    </div>
+  {% endunless %}
 </div>
diff --git a/src/_sass/components/_search.scss b/src/_sass/components/_search.scss
index f67ee54855..3024912a9a 100644
--- a/src/_sass/components/_search.scss
+++ b/src/_sass/components/_search.scss
@@ -4,4 +4,8 @@
   @include breakpoint(large up)  {
     display: block;
   }
+
+  &--mobile {
+    display: block;
+  }
 }
diff --git a/src/_sass/components/_stage.scss b/src/_sass/components/_stage.scss
index 4c5e351e89..e195a2f06f 100644
--- a/src/_sass/components/_stage.scss
+++ b/src/_sass/components/_stage.scss
@@ -43,6 +43,7 @@
   &__content {
     padding-left: 20px;
     padding-right: 20px;
+    position: relative;
 
     @include breakpoint(large up)  {
       padding-left: 0;
diff --git a/src/_sass/pages/_page-404.scss b/src/_sass/pages/_page-404.scss
index 6883e3ba97..4e8fb8dac3 100644
--- a/src/_sass/pages/_page-404.scss
+++ b/src/_sass/pages/_page-404.scss
@@ -3,6 +3,14 @@
     margin-top: 90px;
   }
 
+  &__heading {
+    line-height: 56px;
+
+    & + * {
+      margin-top: 10px;
+    }
+  }
+
   &__numeric-heading {
     color: rgba(color(gray), 0.1);
     font-size: 195px;
@@ -11,8 +19,12 @@
 
   &__numeric-heading__wrapper {
     display: none;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
 
-    @include breakpoint(large up) {
+    @include breakpoint(xlarge up) {
       display: flex;
     }
   }