Refactor footer icon with animation (theme-next#195)

* Replace footer icon with beating heart

* Add enable option in footer icon animation

* Refactor footer icon

* Rename the Animate class

* Update _config.yml

* Change `Animate` to lowercase.

* Change `Animate` to lowercase.

Author: Alex LEE

_config.yml

@@ -63,7 +63,14 @@ footer:
   #since: 2015
 
   # Icon between year and copyright info.
-  icon: user
+  icon: 
+    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
+    # `heart` is recommended with animation in red (#ff0000).
+    name: user
+    # If you want to animate the icon, set it to true.
+    animated: false
+    # Change the color of icon, using Hex Code.
+    color: "#808080"
 
   # If not defined, will be used `author` from Hexo main config.
   copyright:

layout/_partials/footer.swig

@@ -2,8 +2,8 @@
 #}{% set current = date(Date.now(), "YYYY") %}{#
 #}© {% if theme.footer.since and theme.footer.since != current %}{{ theme.footer.since }} — {% endif %}{#
 #}<span itemprop="copyrightYear">{{ current }}</span>
-  <span class="with-love">
-    <i class="fa fa-{{ theme.footer.icon }}"></i>
+  <span class="with-love" id="animate"> 
+    <i class="fa fa-{{ theme.footer.icon.name }}"></i>
   </span>
   <span class="author" itemprop="copyrightHolder">{{ theme.footer.copyright || config.author }}</span>
 

source/css/_common/components/footer/footer.styl

@@ -7,9 +7,23 @@
 
 .footer-inner { text-align: center; }
 
+@keyframes iconAnimate {
+    0%,100%{transform:scale(1);}
+    10%,30%{transform:scale(0.9);}
+    20%,40%,60%,80%{transform:scale(1.1);}
+    50%,70%{transform:scale(1.1);}
+}
+
+if hexo-config('footer.icon.animated') {
+	#animate {
+    animation: iconAnimate 1.33s ease-in-out infinite;
+	}
+}
+
 .with-love {
   display: inline-block;
   margin: 0 5px;
+  color: unquote(hexo-config('footer.icon.color'));
 }
 
 .powered-by,