From 08baf20b3e9a8ba19ed314992f9e1d643ae0fd0c Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 24 Sep 2016 10:35:20 +0100
Subject: [PATCH] Add logo svg animation

---
 docs/_includes/head.html          |  2 +-
 docs/_includes/svg/bulma-icon.svg | 12 ++---
 docs/blog.html                    |  4 +-
 docs/bulma-docs.sass              | 66 ++++++++++++++++++++++-
 docs/css/bulma-docs.css           | 88 ++++++++++++++++++++++++++++++-
 docs/index.html                   |  1 +
 6 files changed, 160 insertions(+), 13 deletions(-)

diff --git a/docs/_includes/head.html b/docs/_includes/head.html
index 2f53487f..f86225d2 100644
--- a/docs/_includes/head.html
+++ b/docs/_includes/head.html
@@ -6,7 +6,7 @@
 
   <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
+  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
   <link rel="stylesheet" href="{{ site.baseurl }}/css/bulma-docs.css">
 
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
diff --git a/docs/_includes/svg/bulma-icon.svg b/docs/_includes/svg/bulma-icon.svg
index 34ea9e6d..a5600d4e 100644
--- a/docs/_includes/svg/bulma-icon.svg
+++ b/docs/_includes/svg/bulma-icon.svg
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="480px" height="480px" viewBox="0 0 480 480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 40 (33762) - http://www.bohemiancoding.com/sketch -->
-    <title>bulma-icon</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="bulma-icon" fill="#11E4C4">
-            <polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
-        </g>
+    <g stroke="none" stroke-width="1" fill="#11E4C4" fill-rule="evenodd">
+      <polygon id="Path" points="136 296 156 156 236 76 336 176 276 236 356 316 236 396"></polygon>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/docs/blog.html b/docs/blog.html
index e822e8ce..7cdb1959 100644
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -9,7 +9,7 @@ route: blog
   <section class="section">
     <div class="container">
       <div class="columns">
-        <div class="column is-8">
+        <div class="column is-4">
           <p class="subtitle4">
             {{ post.date | date_to_string }}
           </p>
@@ -18,6 +18,8 @@ route: blog
               {{ post.title }}
             </a>
           </h2>
+        </div>
+        <div class="column is-8">
           <div class="content">
             {{ post.content }}
           </div>
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index db1cb750..739267b6 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -77,18 +77,82 @@ $twitter: #55acee
     border-color: $twitter
     color: $white
 
+@keyframes floatUp
+  from
+    box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
+    transform: scale(0.86)
+  to
+    box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+    transform: scale(1)
+
+@keyframes strokePath
+  from
+    stroke-dashoffset: 880
+  to
+    stroke-dashoffset: 0
+
+@keyframes fadeIn
+  from
+    opacity: 0
+    transform: scale(0.86)
+  to
+    opacity: 1
+    transform: scale(1)
+
+@keyframes fadeOut
+  0%
+    opacity: 1
+    transform: scale(0.86)
+  67%
+    opacity: 1
+    transform: scale(0.86)
+  100%
+    opacity: 0
+    transform: scale(1)
+
+$curve: cubic-bezier(0, 0.71, 0.29, 1)
+
 #b
+  animation-delay: 1s
+  animation-duration: 1s
+  animation-fill-mode: both
+  animation-name: floatUp
+  animation-timing-function: $curve
   border-radius: 20px
-  box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
   display: inline-block
   height: 240px
   margin-bottom: 40px
+  position: relative
   vertical-align: top
   width: 240px
   svg
+    +overlay
     display: block
     height: 240px
     width: 240px
+    &:first-child
+      animation-duration: 1.5s
+      animation-fill-mode: both
+      animation-name: fadeOut
+      animation-timing-function: $curve
+      g
+        animation-duration: 1s
+        animation-fill-mode: both
+        animation-name: strokePath
+        animation-timing-function: $curve
+        fill: none
+        stroke: $turquoise
+        stroke-dasharray: 880
+        stroke-width: 2px
+    &:last-child
+      animation-delay: 1s
+      animation-duration: 1s
+      animation-fill-mode: both
+      animation-name: fadeIn
+      animation-timing-function: $curve
+      g
+        fill: $turquoise
+
   +mobile
     border-radius: 10px
     height: 120px
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 8bcff189..013990b6 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -6310,22 +6310,108 @@ body.page-grid .column > .notification {
   color: white;
 }
 
+@keyframes floatUp {
+  from {
+    box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0);
+    transform: scale(0.86);
+  }
+  to {
+    box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
+    transform: scale(1);
+  }
+}
+
+@keyframes strokePath {
+  from {
+    stroke-dashoffset: 880;
+  }
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.86);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeOut {
+  0% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  67% {
+    opacity: 1;
+    transform: scale(0.86);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+
 #b {
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: floatUp;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
   border-radius: 20px;
-  box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
   display: inline-block;
   height: 240px;
   margin-bottom: 40px;
+  position: relative;
   vertical-align: top;
   width: 240px;
 }
 
 #b svg {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
   display: block;
   height: 240px;
   width: 240px;
 }
 
+#b svg:first-child {
+  animation-duration: 1.5s;
+  animation-fill-mode: both;
+  animation-name: fadeOut;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:first-child g {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: strokePath;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+  fill: none;
+  stroke: #11e4c4;
+  stroke-dasharray: 880;
+  stroke-width: 2px;
+}
+
+#b svg:last-child {
+  animation-delay: 1s;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
+}
+
+#b svg:last-child g {
+  fill: #11e4c4;
+}
+
 @media screen and (max-width: 768px) {
   #b {
     border-radius: 10px;
diff --git a/docs/index.html b/docs/index.html
index 9794e9f0..abe964fe 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -14,6 +14,7 @@ route: index
     <div class="container">
       <p id="b">
         {% include svg/bulma-icon.svg %}
+        {% include svg/bulma-icon.svg %}
       </p>
       <h1 class="title">
         Bulma