feat: implemented a "fade in" animation on every page

pages/_includes/layout.njk

@@ -23,21 +23,28 @@ username: Laureηt
     {{ content | safe }}
 
     <footer>
-        &copy; {% year %} {{ username }}
+      &copy; {% year %}
+      {{ username }}
     </footer>
 
     <script>
       var elm_mouseover = document.querySelectorAll('[data-chaffle]');
       var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
 
-        Array.prototype.forEach.call(elm_mouseover, function (el) {
+      Array
+        .prototype
+        .forEach
+        .call(elm_mouseover, function (el) {
           var chaffle = new Chaffle(el)
           el.addEventListener('mouseover', function () {
             chaffle.init();
           });
         });
 
-        Array.prototype.forEach.call(elm_onload, function (el) {
+      Array
+        .prototype
+        .forEach
+        .call(elm_onload, function (el) {
           var chaffle = new Chaffle(el)
           chaffle.init();
           setInterval(function () {

pages/_includes/layout_eportfolio.njk

@@ -30,21 +30,28 @@ username: Laureηt
     </div>
 
     <footer>
-        &copy; {% year %} {{ username }}
+        &copy; {% year %}
+      {{ username }}
     </footer>
 
     <script>
       var elm_mouseover = document.querySelectorAll('[data-chaffle]');
       var elm_onload = document.querySelectorAll('[data-chaffle-onLoad]');
 
-        Array.prototype.forEach.call(elm_mouseover, function (el) {
+      Array
+        .prototype
+        .forEach
+        .call(elm_mouseover, function (el) {
           var chaffle = new Chaffle(el)
           el.addEventListener('mouseover', function () {
             chaffle.init();
           });
         });
 
-        Array.prototype.forEach.call(elm_onload, function (el) {
+      Array
+        .prototype
+        .forEach
+        .call(elm_onload, function (el) {
           var chaffle = new Chaffle(el)
           chaffle.init();
           setInterval(function () {

pages/css/main.css

@@ -14,6 +14,8 @@ body {
   max-width: 40em;
   margin: 0 auto;
   padding: 1em;
+  animation: intro .3s both;
+  animation-delay: .15s;
 }
 
 body,
@@ -89,6 +91,7 @@ footer {
   body {
     font-size: 17px;
   }
+
   ol,
   ul {
     padding-left: 17px;
@@ -112,3 +115,14 @@ header>ul>li {
   display: inline;
   margin-right: .5em;
 }
+
+
+@keyframes intro {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}