From d0c6f879f2e007dc1323a0ba0af4b8507b4fdbb9 Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 23 Nov 2018 18:35:29 +1100
Subject: loading animations

---
 scss/_browser.scss | 15 +++++++++------
 scss/_header.scss  |  7 +++++++
 2 files changed, 16 insertions(+), 6 deletions(-)

(limited to 'scss')

diff --git a/scss/_browser.scss b/scss/_browser.scss
index ab6be14..58ce465 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -51,12 +51,6 @@
       justify-content: space-between;
       background: $gray-bright;
 
-      /*
-      > * {
-        flex: 0 0 auto;
-      }
-      */
-
       > span:first-of-type {
         flex: 1 0 auto;
       }
@@ -72,4 +66,13 @@
       padding: 1em 2em;
     }
   }
+
+  .content, .path {
+    opacity: 1;
+    transition: opacity 150ms;
+
+    body.loading & {
+      opacity: 0;
+    }
+  }
 }
diff --git a/scss/_header.scss b/scss/_header.scss
index b3a6898..5613829 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -29,5 +29,12 @@ header {
     font-weight: 800;
     font-size: 0.7em;
     vertical-align: -0.04em;
+
+    transform: perspective(100rem) rotateY(0deg);
+    transition: transform 100ms;
+
+    body.loading & {
+      transform: perspective(100rem) rotateY(90deg);
+    }
   }
 }
-- 
cgit v1.2.3