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">
+    <h1>{{ site.title }}</h1>
     <div id="poster" class="column">
-      {% for event in events limit: 1 %}
+
+      {% 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>
-    <h1>{{ site.title }}</h1>
+
   </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 %}

_sass/fonts.scss

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: avant;
+  src: url('../fonts/free_avantgarde.woff');
+}
+@font-face {
+  font-family: avantB;
+  src: url('../fonts/free_avantgardeBOLD.woff');
+}
+@font-face {
+  font-family: oldlondon;
+  src: url('../fonts/OldLondon.ttf');
+}

_sass/mycv.scss

@@ -1,13 +1,6 @@
 /*! sakrecoer sheet */
 
-@font-face {
-  font-family: avant;
-  src: url('../fonts/free_avantgarde.woff');
-}
-@font-face {
-  font-family: avantB;
-  src: url('../fonts/free_avantgardeBOLD.woff');
-}
+
 html,
 body {
   width: 100%;
@@ -93,8 +86,7 @@ a:active {
   display: flex;
   width: 100%;
   height: 100vh;
-  background: linear-gradient(0deg, rgba(31, 31, 31, 0.5), rgba(224, 224, 224, 0.5));
-  background-size: 800% 800%;
+  background: transparent;
   
   -webkit-animation: AnimationName 29s ease infinite;
   -moz-animation: AnimationName 29s ease infinite;
@@ -186,6 +178,7 @@ a:active {
   display: flex;
   flex-wrap: wrap;
   overflow-x: hidden;
+  background-color: #fff;
 }
 .column {
   flex: 1 1 300px;

_sass/poster.scss

@@ -3,12 +3,38 @@
 /////////
 #poster {
   width: 90vw;
-  margin-right: auto !important; }
+  margin-right: auto !important; 
+  display: flex;
+  flex-wrap: wrap;
+  div {
+    flex: 1 1 300px;
+  }  
+  h1, h2, h3, h4 {
+    font-family: oldlondon, Helvetica, Arial, sans-serif;
+    text-transform: lowercase;
+  }
+}
 
 #poster img {
   margin-top: 5px;
-  border-radius: 3px;
+  border-radius: 5px;
+  -moz-border-radius-topright: 9px;
+  -moz-border-radius-bottomright: 9px;
+   -webkit-border-top-right-radius: 9px;
+   -webkit-border-bottom-right-radius: 9px;
   float: left;
   padding-right: 5px;
-  width: 50vw;
+  width: 100%;
+  min-width: 200px;
+
+}
+
+canvas {
+  overflow-x: hidden;
+  position: fixed;
+  top:0;
+  left:0;
+  height:100%;
+  width:100%;
+  z-index: -1;
 }