fix svg anim in firefox

3 files changed, 63 insertions, 49 deletions

diff --git a/build/layout.moon b/build/layout.moon
index 5548281..8ef7fd4 100644
--- a/build/layout.moon
+++ b/build/layout.moon
@@ -1,4 +1,4 @@
-import header, footer, div, svg, g, circle, h1, span, b, a, img from require 'mmm.dom'
+import header, aside, footer, div, svg, g, circle, h1, span, b, a, img from require 'mmm.dom'
 
 pick = (...) ->
   num = select '#', ...
@@ -23,24 +23,29 @@ logo = svg {
   g {
     transform: 'translate(0 .18)'
 
-    circle class: 'out', r: '.6', fill: 'none', 'stroke-width': '.12'
-    circle class:  'in', r: '.2', stroke: 'none'
+    g { class: 'circle out', circle r: '.6', fill: 'none', 'stroke-width': '.12' }
+    g { class: 'circle  in', circle r: '.2', stroke: 'none' }
   }
 }
 
 {
   header: header {
-    h1 {
-      logo
-      b!
-      span 'mmm', class: 'bold'
-      '.s-ol.nu'
+    div {
+      h1 {
+        logo
+        b!
+        span 'mmm', class: 'bold'
+        '.s-ol.nu'
+      }
+      span "fun stuff with code and wires"
+    --        pick 'fun', 'cool', 'weird', 'interesting', 'new'
+    --        pick 'stuff', 'things', 'projects', 'experiments', 'news'
+    --        "with"
+    --        pick 'mostly code', 'code and wires', 'silicon', 'electronics'
     }
-    span "fun stuff with code and wires"
-  --        pick 'fun', 'cool', 'weird', 'interesting', 'new'
-  --        pick 'stuff', 'things', 'projects', 'experiments', 'news'
-  --        "with"
-  --        pick 'mostly code', 'code and wires', 'silicon', 'electronics'
+--    aside {
+--      a 'message me', href: '#'
+--    }
   }
   footer: footer {
     span {
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index 8e58d8b..5771166 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -33,7 +33,7 @@ class Browser
 
     -- update URL bar
     if MODE == 'CLIENT'
-      logo = document\querySelector 'header > h1 > svg'
+      logo = document\querySelector 'header h1 > svg'
       spin = ->
         logo.classList\add 'spin'
         logo.parentElement.offsetWidth
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 {