canvas funk

_includes/canvasfunk.html

@@ -0,0 +1,90 @@
+<script type="text/javascript">
+    
+  //////////////////////////////////////////////////////////////////////////////////
+  // A demonstration of a Canvas nebula effect
+  // (c) 2010 by R Cecco. <http://www.professorcloud.com>
+  // MIT License
+  //
+  // Please retain this copyright header in all versions of the software if
+  // using significant parts of it
+  //////////////////////////////////////////////////////////////////////////////////
+  $(document).ready(function(){
+      // shim layer with setTimeout fallback
+      window.requestAnimFrame = (function(){
+        return  window.requestAnimationFrame       ||
+                window.webkitRequestAnimationFrame ||
+                window.mozRequestAnimationFrame    ||
+                function( callback ){
+                  window.setTimeout(callback, 1000 / 60);
+                };
+      })();
+      (function ($) {
+              // The canvas element we are drawing into.
+              var $canvas = $('#canvas');
+              var $canvas2 = $('#canvas2');
+              var $canvas3 = $('#canvas3');
+              var ctx2 = $canvas2[0].getContext('2d');
+              var ctx = $canvas[0].getContext('2d');
+              var w = $canvas[0].width, h = $canvas[0].height;
+              var w = window.innerWidth, h = window.innerHeight;
+              var img = new Image();
+  
+              // A puff.
+              var Puff = function(p) {
+                  // var amtX = (window.innerWidth / 2);
+                  // var amtY = (window.innerHeight / 2);
+                  var opacity,
+                      sy = (Math.random()*285)>>0,
+                      sx = (Math.random()*285)>>0;
+  
+                  this.p = p;
+  
+                  this.move = function(timeFac) {
+                      p = this.p + 0.3 * timeFac;
+                      opacity = (Math.sin(p*0.05)*0.5);
+                      if(opacity <0) {
+                          p = opacity = 0;
+                          sy = (Math.random()*285)>>0;
+                          sx = (Math.random()*285)>>0;
+                      }
+                      this.p = p;
+                      ctx.globalAlpha = opacity;
+                      ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);
+                  };
+              };
+  
+              var puffs = [];
+              var sortPuff = function(p1,p2) { return p1.p-p2.p; };
+              puffs.push( new Puff(0) );
+              puffs.push( new Puff(20) );
+              puffs.push( new Puff(40) );
+  
+              var newTime, oldTime = 0, timeFac;
+  
+              var loop = function() {
+                  newTime = new Date().getTime();
+                  if(oldTime === 0 ) {
+                      oldTime=newTime;
+                  }
+                  timeFac = (newTime-oldTime) * 0.1;
+                  if(timeFac>3) {timeFac=3;}
+                  oldTime = newTime;
+                  puffs.sort(sortPuff);
+  
+                  for(var i=0;i<puffs.length;i++)
+                  {
+                      puffs[i].move(timeFac/7.5);
+                  }
+                  ctx2.drawImage( $canvas[0] ,0,0, 570,570);
+                  requestAnimFrame(loop);
+              };
+              // Turns out Chrome is much faster doing bitmap work if the bitmap is in an existing canvas rather
+              // than an IMG, VIDEO etc. So draw the big nebula image into canvas3
+              var $canvas3 = $('#canvas3');
+              var ctx3 = $canvas3[0].getContext('2d');
+              $(img).bind('load',null, function() {  ctx3.drawImage(img, 0,0, 570,570);  loop(); });
+              img.src = '{{ site.baseurl }}/assets/img/nebula.jpg';
+  
+      })(jQuery);
+  });
+  </script>

_includes/header.html

@@ -1,5 +1,8 @@
 <!-- BEGIN header.html -->
 <div id="header">
+  <canvas style="display:none" id="canvas" width="285" height="285"></canvas>
+  <canvas style="display:none" id="canvas3" width="570" height="570"></canvas>
+  <canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>
   <div class="hero">
     <a href="/">
       <h1>{{ site.title }}</h1>

_includes/hero.html

@@ -1,17 +1,25 @@
 <!-- BEGIN hero.html -->
 <div id="banner">
-
+  <canvas style="display:none" id="canvas" width="285" height="285"></canvas>
+  <canvas style="display:none" id="canvas3" width="570" height="570"></canvas>
+  <canvas id="canvas2" width="570" height="570">*** THIS BROWSER DOES NOT SUPPORT THE CANVAS ELEMENT ***</canvas>
   <div class="hero">
-    <div id="poster" class="column">
-      {% for event in events limit: 1 %}
-      <img src="{{ event.image }}" />
-      <h2>{{ event.title }}</h2>
-      <h3>{{ event.start_date }} till {{ event.end_date }}</h3>
-      <p>{{ event.description }}</p>
-      <p>{{ event.category }}</p>
-    {% endfor %}
-    </div>
     <h1>{{ site.title }}</h1>
+    <div id="poster" class="column">
+
+      {% for event in site.events limit: 1 %}
+      <div>
+        <img src="{{ event.image }}" />
+      </div>
+      <div>
+        <h2>{{ event.title }}</h2>
+        <h3>{{ event.start_date }} till {{ event.end_date }}</h3>
+        <p>{{ event.description }}</p>
+        <p>{{ event.category }}</p>
+      </div>
+      {% endfor %}
+    </div>
+
   </div>
 </div>
 <!-- END hero.html -->

_includes/metahead.html

@@ -2,6 +2,7 @@
 <title>{{ page.title }} | {{ site.title }}</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 <link rel="stylesheet" href="/assets/css/style.css" type="text/css" />
+<link rel="stylesheet" href="/assets/css/fonts.css" type="text/css" />
 <link rel="shortcut icon" href="{{ site.url }}{{ site.logo }}" type="image/png" />
 <link rel="alternate" type="application/rss+xml" href="{{ site.url }}/rss.xml" />
 <!-- Standard SEO -->
@@ -55,3 +56,5 @@
 <!-- Domain verification -->
 <!-- Identity -->
 <!-- END metahead.html -->
+<script src="/assets/js/jquery-3.3.1.min.js"></script>
+{% include canvasfunk.html %}