Merge pull request barryclark#70 from johnotander/optional-animation

Add optional animation to the config.
vavrusa · Sep 12, 2014 · 895da3b · 895da3b
2 parents 9cc1ff1 + 79bf3dc
commit 895da3b
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 4 deletions.
diff --git a/_config.yml b/_config.yml
@@ -5,7 +5,8 @@ author: John Otander
 description: "A simple, beautiful theme for Jekyll that emphasizes content rather than aesthetic fluff."
 baseurl: ""
 url: "http://pixyll.com"
-google_analytics: 
+google_analytics:
+animated: false
 
 # Build settings
 markdown: kramdown

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 {% include head.html %}
-<body>
+<body class="{% if site.animated %}animated fade-in-down{% endif %}">
   <div class="site-wrap">
     {% include header.html %}
 
@@ -14,4 +14,4 @@
 
   {% include footer.html %}
 </body>
-</html>
+</html>
diff --git a/css/pixyll.css b/css/pixyll.css
@@ -398,3 +398,64 @@ footer:after {
   content: "";
   display: block;
 }
+
+@charset "UTF-8";
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/
+
+.animated {
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+
+.animated.infinite {
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+}
+
+@-webkit-keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    transform: none;
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3d(0, -100%, 0);
+    -ms-transform: translate3d(0, -100%, 0);
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: none;
+    -ms-transform: none;
+    transform: none;
+  }
+}
+
+.fade-in-down {
+  -webkit-animation-name: fadeInDown;
+  animation-name: fadeInDown;
+}
diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
 
   <div class="posts">
     {% for post in paginator.posts %}
-      <div class="post">
+      <div class="post {% if site.animated %}animated fade-in-down{% endif %}">
         <a href="{{ post.url | prepend: site.baseurl }}" class="post-link">
           <p class="post-meta">{{ post.date | date: "%b %-d, %Y" }}</p>
           <h3 class="h2 post-title">{{ post.title }}</h3>