From 7f48f4f81d1acf3b75de8ca9e5dc9fac8a00e73b Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Mon, 26 Nov 2018 20:56:37 +1100
Subject: svg logo + animation

---
 scss/_header.scss | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

(limited to 'scss')

diff --git a/scss/_header.scss b/scss/_header.scss
index 5613829..6e2da1f 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -9,8 +9,9 @@ header {
   h1 {
     display: flex;
     justify-content: space-around;
-    align-items: baseline;
+    align-items: center;
     margin: 0;
+    height: 5rem;
 
     font-size: 4rem;
     font-weight: 200;
@@ -22,19 +23,35 @@ header {
     .bold {
       font-weight: 400;
     }
-  }
 
-  .sun {
-    font-style: normal;
-    font-weight: 800;
-    font-size: 0.7em;
-    vertical-align: -0.04em;
+    .sun {
+      height: 100%;
+      stroke: currentColor;
+      fill: currentColor;
+
+      .out {
+        animation: spin 2s;
+        animation-iteration-count: 1;
+      }
 
-    transform: perspective(100rem) rotateY(0deg);
-    transition: transform 100ms;
+      .in {
+        animation: size 2s;
+        animation-iteration-count: 1;
+      }
 
-    body.loading & {
-      transform: perspective(100rem) rotateY(90deg);
+      &.spin circle {
+        animation: none;
+      }
     }
   }
 }
+
+@keyframes spin {
+  0% { transform: perspective(100rem) rotate3d(0.5, 1, 0, 0turn); }
+  100% { transform: perspective(100rem) rotate3d(0.5, 1, 0, 1turn); }
+}
+
+@keyframes size {
+  0%, 100% { transform: scale(1); }
+  40%, 60% { transform: scale(1.8); }
+}
-- 
cgit v1.2.3