init commit

assets/css/main.scss

@@ -0,0 +1,54 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+@charset "utf-8";
+
+
+
+// Our variables
+$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$base-font-size:   16px;
+$base-font-weight: 400;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: 1.5;
+
+$spacing-unit:     30px;
+
+$text-color:       #111;
+$background-color: #fdfdfd;
+$brand-color:      #2a7ae2;
+
+$grey-color:       #828282;
+$grey-color-light: lighten($grey-color, 40%);
+$grey-color-dark:  darken($grey-color, 25%);
+
+// Width of the content area
+$content-width:    800px;
+
+$on-palm:          600px;
+$on-laptop:        800px;
+
+
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+//     .wrapper {
+//         padding-right: $spacing-unit / 2;
+//         padding-left: $spacing-unit / 2;
+//     }
+// }
+@mixin media-query($device) {
+    @media screen and (max-width: $device) {
+        @content;
+    }
+}
+
+
+
+// Import partials from `sass_dir` (defaults to `_sass`)
+@import
+        "base",
+        "layout",
+        "syntax-highlighting",
+        "pagination"
+;

assets/js/responsive_waterfall.js

@@ -0,0 +1 @@
+!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():t.Waterfall=e()}(this,function(){"use strict";var t=function(t){var e;Object.defineProperty(this,"minBoxWidth",{get:function(){return e},set:function(t){100>t&&(t=100),t>1e3&&(t=1e3),e=t}}),t=t||{};var n=t.containerSelector||".wf-container",i=t.boxSelector||".wf-box";this.minBoxWidth=t.minBoxWidth||250,this.columns=[],this.container=document.querySelector(n),this.boxes=this.container?Array.prototype.slice.call(this.container.querySelectorAll(i)):[],this.compose();for(var o,s=this.container.querySelectorAll("img"),r=this,c=0;c<s.length;c++){var h=s[c];h.onload=function(){o&&clearTimeout(o),o=setTimeout(function(){r.compose(!0)},500)}}window.addEventListener("resize",function(){r.compose()})};return t.prototype.computeNumberOfColumns=function(){var t=Math.floor(this.container.clientWidth/this.minBoxWidth);return t=t||1},t.prototype.initColumns=function(t){if(t>0){this.columns=[];for(var e=100/t+"%";t--;){var n=document.createElement("div");n.className="wf-column",n.style.width=e,this.columns.push(n),this.container.appendChild(n)}}},t.prototype.getMinHeightIndex=function(){if(this.columns&&this.columns.length>0){for(var t=this.columns[0].clientHeight,e=0,n=1;n<this.columns.length;n++){var i=this.columns[n];i.clientHeight<t&&(t=i.clientHeight,e=n)}return e}return-1},t.prototype.getHighestIndex=function(){if(this.columns&&this.columns.length>0){for(var t=this.columns[0].clientHeight,e=0,n=1;n<this.columns.length;n++){var i=this.columns[n];i.clientHeight>t&&(t=i.clientHeight,e=n)}return e}return-1},t.prototype.compose=function(t){var e=this.computeNumberOfColumns(),n=this.columns.length;if(t||e!=n){for(var i=0;i<this.columns.length;i++){var o=this.columns[i];o.remove()}this.initColumns(e);for(var i=0,s=this.boxes.length;s>i;i++){var r=this.boxes[i];this.addBox(r)}}},t.prototype.addBox=function(t){this.boxes.indexOf(t)<0&&this.boxes.push(t);var e=this.getMinHeightIndex();if(e>-1){var n=this.columns[e];n.appendChild(t)}},t});