feat(logo): added logo by @ffd8

_includes/aside-left.html

@@ -1,5 +1,5 @@
 <aside>
-  <div class="logo"></div>
+  <div class="logo" id="logo"></div>
   <div class="nav-o-meter"></div>
   <nav class="main-menu">
       <ul>

_layouts/default.html

@@ -17,6 +17,8 @@
     <script src="/assets/js/tweets.js" type="text/javascript" async></script>
     <script src="/assets/js/highlight.js" type="text/javascript"></script>
     <script src="/assets/js/basiljs.js" type="text/javascript"></script>
+    <script src="/assets/js/p5.min.js" type="text/javascript"></script>
+    <script src="/assets/js/sketch.js" type="text/javascript"></script>
   </head>
   <!--
     the filtering of the titles for a body class is a little cumbersome.
@@ -37,5 +39,10 @@ <h1>{{page.title}}</h1>
     </div>
     <div class="guidelines"></div>
     {% include footer.html %}
+    <script type="text/javascript">
+      window.onblur = function() { noLoop(); }
+      window.onfocus = function() { loop(); }
+    </script>
+
   </body>
 </html>

assets/css/styles.sass

@@ -40,7 +40,7 @@ body
         margin-top: 0px
     @include clearfix
     .logo
-        background-color: #ccc
+        background-color: white
         height: 130px
         width: 200px
         margin-bottom: 30px

assets/basiljslogo/sketch.js → assets/js/sketch.js

@@ -14,23 +14,24 @@ var typoOff = 75;
 var canvas;
 
 function setup() {
-  canvas = createCanvas(180, 130); 
+  canvas = createCanvas(180, 130);
+  canvas.parent('#logo');
   background(255);
   frameRate(15);
   smooth();
-  
+
   for (var n=2; n < numLines; n++) {
     myNoise.push(n);
-    myNoiseLetter.push(n)
-  
+    myNoiseLetter.push(n);
+
     var mapN = floor(map(n, 0, numLines-numLines/3, 0, pX.length));
     mapN = constrain(mapN, 0, pX.length);
     myNoiseLetter[n] = mapN;
- 
-    if(n > numLines-numLines/3){
-    mapN = floor(map(n, numLines-numLines/3, numLines, pX.length-pX.length/3, pX.length/6));
-    mapN = constrain(mapN, 0, pX.length);
-    myNoiseLetter[n] = mapN;  
+
+    if (n > numLines-numLines/3){
+      mapN = floor(map(n, numLines-numLines/3, numLines, pX.length-pX.length/3, pX.length/6));
+      mapN = constrain(mapN, 0, pX.length);
+      myNoiseLetter[n] = mapN;
     }
   }
 }
@@ -50,8 +51,7 @@ function draw() {
 
     if (myNoiseLetter[n] < letterFill) {
       myNoiseLetter[n] = letterFill;
-    }
-    else if (myNoiseLetter[n] > pX.length-letterFill) {
+    } else if (myNoiseLetter[n] > pX.length-letterFill) {
       myNoiseLetter[n] = pX.length-letterFill;
     }
 
@@ -60,8 +60,8 @@ function draw() {
     //var randDrop = random(100);
 
     //if (randDrop>99)continue;
-    if(n > 4 && n < myNoise.length-2){
-        line(pX[myNoiseLetter[n]]-typoOff, pY[myNoiseLetter[n]]-typoOff, myX[myNoise[n]]*leafGrow, myY[myNoise[n]]*leafGrow);
+    if (n > 4 && n < myNoise.length-2){
+      line(pX[myNoiseLetter[n]]-typoOff, pY[myNoiseLetter[n]]-typoOff, myX[myNoise[n]]*leafGrow, myY[myNoise[n]]*leafGrow);
     }
     stroke(0);
     fill(255);
@@ -70,11 +70,10 @@ function draw() {
       beginShape();
       stroke(0);
       for (var j= int(-letterFill/2); j < int(letterFill/2)-1; j++) {
-    
+
         if (abs((pX[myNoiseLetter[n]+j-1]-typoOff)-(pX[myNoiseLetter[n]+j]-typoOff)) < 3 && abs((pY[myNoiseLetter[n]+j-1]-typoOff)-(pY[myNoiseLetter[n]+j]-typoOff)) < 3) {
           vertex(pX[myNoiseLetter[n]+j-1]-typoOff, pY[myNoiseLetter[n]+j-1]-typoOff);
-        }
-        else {
+        } else {
           endShape();
           beginShape();
         }
@@ -85,6 +84,6 @@ function draw() {
     strokeWeight(.75);
 
     //if (randDrop>90)continue;
-      line(myX[myNoise[n]]*leafGrow, myY[myNoise[n]]*leafGrow, myX[myNoise[n+1]]*leafGrow, myY[myNoise[n+1]]*leafGrow);    
-    }
+    line(myX[myNoise[n]]*leafGrow, myY[myNoise[n]]*leafGrow, myX[myNoise[n+1]]*leafGrow, myY[myNoise[n+1]]*leafGrow);
+  }
 }