feat(error-page): better styling (runme-io#166)

* fix(fixed-header): to be more consistent with the space

* feat(error-page): better styling

* fix: review suggestions

src/assets/style/theme.sass

@@ -18,6 +18,8 @@ $font-path: '/fonts/'
 //       Spacing        //
 //----------------------//
 $spacing: 4rem
+$spacing-half: calc(#{$spacing} / 2)
+$spacing-double: calc(#{$spacing} * 2)
 
 // margins
 $label-margin: .5rem

src/components/UI/Layout/FixedHeader.svelte

@@ -55,27 +55,35 @@
     position: sticky
     top: 0
     z-index: 1
-    padding: 2rem $spacing
+    padding: $spacing-half $spacing
     background-color: $primary-color
-    display: flex
-    flex-direction: row
-    flex-wrap: wrap
-    justify-content: flex-start
-    align-items: center
     @include dashed-line()
 
+    .header-container
+      max-width: 130rem
+      display: flex
+      flex-direction: row
+      flex-wrap: nowrap
+      align-items: center
+      margin: 0 auto
+
+      @media screen and (max-width: 500px)
+        flex-direction: column
+
     .titles
       display: flex
       flex-direction: column
       align-items: center
       padding-left: $spacing
       padding-right: $spacing
-      width: 60%
-
-      @media screen and (max-width: 1200px)
-        width: 70%
+      text-align: center
+      width: 100%
 
       @media screen and (max-width: 720px)
+        padding-left: $spacing-half
+        padding-right: $spacing-half
+
+      @media screen and (max-width: 500px)
         width: 100%
         padding: 1rem 0 0 0
 
@@ -89,14 +97,11 @@
           line-height: 2rem
 
         @media screen and (max-width: 720px)
-          text-align: center
           font-size: 1.4rem
           line-height: 1.8rem
 
     .logo-svg
-      @media screen and (max-width: 720px)
-        width: 100%
-        text-align: center
+      transform-origin: bottom left
 
       a
         border: 0
@@ -114,15 +119,11 @@
     .counter
       align-self: center
       text-align: center
+      min-width: fit-content
 
       @media screen and (max-width: 1200px)
         font-size: 1.4rem
 
-      @media screen and (min-width: 500px) and (max-width: 720px)
-        position: absolute
-        top: 2rem
-        right: $spacing
-
       @media screen and (max-width: 500px)
         width: 100%
         margin-top: 1rem
@@ -136,28 +137,30 @@
 </style>
 
 <header>
-  <div class="logo-svg">
-    <a href="/">
-      <img src="/static/button-beta.svg" alt="logo">
-    </a>
-  </div>
-  <div class="titles">
-    <h1>{title}</h1>
-    <ActionDropdown {showPlaceholderDeployButton} {dockerImage} {deployUrl} {applicationUrl}/>
-  </div>
-
-  {#if showBlock}
-    <div class="counter">
-      <span class="title">{timerTitle}</span>
-      <span class="timer">
-        {#if failed}
-          <span class="error">{failedStatus}</span>
-        {:else if countDown}
-          <CountDown/>
-        {:else if countUp}
-          <CountUp/>
-        {/if}
-      </span>
+  <div class="header-container">
+    <div class="logo-svg">
+      <a href="/">
+        <img src="/static/button-beta.svg" alt="logo">
+      </a>
+    </div>
+    <div class="titles">
+      <h1>{title}</h1>
+      <ActionDropdown {showPlaceholderDeployButton} {dockerImage} {deployUrl} {applicationUrl}/>
     </div>
-  {/if}
+
+    {#if showBlock}
+      <div class="counter">
+        <span class="title">{timerTitle}</span>
+        <span class="timer">
+          {#if failed}
+            <span class="error">{failedStatus}</span>
+          {:else if countDown}
+            <CountDown/>
+          {:else if countUp}
+            <CountUp/>
+          {/if}
+        </span>
+      </div>
+    {/if}
+  </div>
 </header>

src/routes/_error.svelte

@@ -1,30 +1,66 @@
 <script>
+  import MetaData from '../components/UI/MetaData.svelte'
+  import FixedHeader from '../components/UI/Layout/FixedHeader.svelte'
+  import Hotjar from '../components/UI/Tracking/Hotjar.svelte'
+  import GoogleAnalytics from '../components/UI/Tracking/GoogleAnalytics.svelte'
   import { isDevelopment } from '../Consts'
 
   export let status
   export let error
 
   const dev = isDevelopment
+  const title = `Oeps, that's a ${status}`
+  const message = status === 404 ? 'Looks like the page you where looking for is no longer here.' : error.message
 </script>
 
 <style lang="sass">
   @import './assets/style/theme'
 
+  @keyframes rotate
+    0%
+      transform: rotate(0)
+
+    30%
+      transform: rotate(130deg)
+
+    60%
+      transform: rotate(70deg)
+
+    80%
+      transform: rotate(100deg)
+
+    100%
+      transform: rotate(90deg)
+
+  \:global(.logo-svg)
+    animation: rotate 0.75s 1s both
+
+  \:global(body)
+    font-family: $font-family
+    line-height: 1.5
+    font-size: 1.6rem
+
   h1, p
     margin: 0 auto
 
   h1
     font-size: 2.8rem
     font-weight: 700
     margin: 0 0 .5rem 0
+    text-align: center
 
   p
     margin: 1rem auto
+    text-align: center
 
 
   @media (min-width: 480px)
     h1
       font-size: 4rem
+      padding-top: $spacing-double
+
+      &:before
+        content: '#'
 
   pre
     background-color: $gray-medium
@@ -38,13 +74,14 @@
     word-wrap: break-word
 </style>
 
-<svelte:head>
-  <title>{status}</title>
-</svelte:head>
+<GoogleAnalytics />
+<Hotjar />
 
-<h1>{status}</h1>
+<MetaData {title}/>
+<FixedHeader/>
 
-<p>{error.message}</p>
+<h1>{title}</h1>
+<p>{message}</p>
 
 {#if dev && error.stack}
   <pre>{error.stack}</pre>