svg logo + animation

3 files changed, 52 insertions, 13 deletions

diff --git a/build/layout.moon b/build/layout.moon
index 6ff6feb..c188db9 100644
--- a/build/layout.moon
+++ b/build/layout.moon
@@ -1,4 +1,4 @@
-import header, footer, div, h1, span, b, a, img from require 'mmm.dom'
+import header, footer, div, svg, g, circle, h1, span, b, a, img from require 'mmm.dom'
 
 pick = (...) ->
   num = select '#', ...
@@ -13,10 +13,25 @@ iconlink = (href, src, alt, style) -> a {
   img :src, :alt, :style
 }
 
+logo = svg {
+  class: 'sun'
+  viewBox: '-0.75 -1 1.5 2'
+  xmlns: 'http://www.w3.org/2000/svg'
+  baseProfile: 'full'
+  version: '1.1'
+
+  g {
+    transform: 'translate(0 .18)'
+
+    circle class: 'out', r: '.6', fill: 'none', 'stroke-width': '.12'
+    circle class:  'in', r: '.2', stroke: 'none'
+  }
+}
+
 {
   header: header {
     h1 {
-      span '\xe2\x98\x89', class: 'sun'
+      logo
       b!
       span 'mmm', class: 'bold'
       '.s-ol.nu'
diff --git a/mmm/mmmfs/browser.moon b/mmm/mmmfs/browser.moon
index ef5544b..8e58d8b 100644
--- a/mmm/mmmfs/browser.moon
+++ b/mmm/mmmfs/browser.moon
@@ -33,8 +33,15 @@ class Browser
 
     -- update URL bar
     if MODE == 'CLIENT'
+      logo = document\querySelector 'header > h1 > svg'
+      spin = ->
+        logo.classList\add 'spin'
+        logo.parentElement.offsetWidth
+        logo.classList\remove 'spin'
       @path\subscribe (path) ->
         document.body.classList\add 'loading'
+        spin!
+
         return if @skip
         vis_path = path .. (if '/' == path\sub -1 then '' else '/')
         window.history\pushState path, '', vis_path
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); }
+}