fix svg anim in firefox

1 files changed, 44 insertions, 35 deletions

diff --git a/scss/_header.scss b/scss/_header.scss
index 6e2da1f..726d89e 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -1,54 +1,63 @@
 header {
-  font-family: 'Source Sans Pro', sans-serif;
-  padding: 1rem 2rem;
-  text-align: right;
+  > div {
+    font-family: 'Source Sans Pro', sans-serif;
+    padding: 1rem 2rem;
+    text-align: right;
 
-  color: $gray-bright;
-  background: $gray-dark;
+    color: $gray-bright;
+    background: $gray-dark;
 
-  h1 {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    margin: 0;
-    height: 5rem;
+    h1 {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      margin: 0;
+      height: 5rem;
 
-    font-size: 4rem;
-    font-weight: 200;
+      font-size: 4rem;
+      font-weight: 200;
 
-    > b {
-      flex: 1;
-    }
+      > b {
+        flex: 1;
+      }
 
-    .bold {
-      font-weight: 400;
-    }
+      .bold {
+        font-weight: 400;
+      }
 
-    .sun {
-      height: 100%;
-      stroke: currentColor;
-      fill: currentColor;
+      .sun {
+        height: 100%;
+        stroke: currentColor;
+        fill: currentColor;
 
-      .out {
-        animation: spin 2s;
-        animation-iteration-count: 1;
-      }
+        .out, .in {
+          animation: spin 2s;
+          animation-iteration-count: 1;
+          transform: scale(1);
+        }
 
-      .in {
-        animation: size 2s;
-        animation-iteration-count: 1;
-      }
+        .in {
+          animation: size 2s;
+        }
 
-      &.spin circle {
-        animation: none;
+        &.spin .circle {
+          animation: none;
+        }
       }
     }
   }
+
+  aside {
+    margin: 0;
+    padding: 1em 2rem;
+    color: $gray-bright;
+    background: $gray-darker;
+  }
 }
 
 @keyframes spin {
-  0% { transform: perspective(100rem) rotate3d(0.5, 1, 0, 0turn); }
-  100% { transform: perspective(100rem) rotate3d(0.5, 1, 0, 1turn); }
+  0% { transform: rotate3d(0.5, 1, 0, 0turn); }
+  100% { transform: rotate3d(0.5, 1, 0, 1turn); }
 }
 
 @keyframes size {