Theming improved, definitely drastically incomplete.

Supports issue #1

data/static/scripts/crunch.js

@@ -0,0 +1,15 @@
+function changeImg(e) {
+    if (e.getAttribute('load') == 'lazy') {
+        path = '/photos/'+e.getAttribute('slug');
+        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
+            console.log('Loading retina version of '+e.getAttribute('slug'));
+            e.setAttribute('load', 'loaded');
+            e.src = path+'/'+e.getAttribute('size')+'2x.'+e.getAttribute('ext');
+        }
+        else {
+            console.log('Loading non-retina version of '+e.getAttribute('slug'));
+            e.setAttribute('load', 'loaded');
+            e.src = path+'/'+e.getAttribute('size')+'.'+e.getAttribute('ext');
+        }
+    }
+}

data/static/stylesheets/style.css

@@ -0,0 +1,13 @@
+@media (min-width: 768px) {
+    div.nav-title-block {
+        height:240px;
+        bottom:20px;
+        position:fixed;
+    }
+}
+
+@media (max-width: 768px) {
+    div.nav-title-block img.img-responsive {
+        max-width: 200px;
+    }
+}

genPhotos.js

@@ -1,6 +1,9 @@
 var fs = require('fs');
 var gm = require('gm');
 var mkdirp = require('mkdirp');
+var markdown = require( "markdown" ).markdown;
+var jade = require('jade');
+
 
 var config = require('./config.js').config;
 var db = require('./db.js');
@@ -12,7 +15,7 @@ var generatePhotoSizesById = function generatePhotoSizesById(id, cb) {
         var shortDate = helper.epochToShortDateString(photo.photoDate);
         var failure = false;
 
-        var folder = config.genDir+'/images/'+photo.slug;
+        var folder = config.genDir+'/photos/'+photo.slug;
 
         mkdirp(folder, function(err) {
             if (err) console.log(err);
@@ -21,6 +24,7 @@ var generatePhotoSizesById = function generatePhotoSizesById(id, cb) {
 
                 var file = folder + '/'+size+'.'+photo.extension;
 
+                (function(size){
                     gm(photo.path)
                     .autoOrient()
                     .resize(config.imageSizes[size], config.imageSizes[size])
@@ -31,10 +35,11 @@ var generatePhotoSizesById = function generatePhotoSizesById(id, cb) {
                                 failure = true;
                             }
                             else {
-                            console.log(photo.slug+' resized.');
+                                console.log(photo.slug+' '+size+' generated.');
                             }
                         }
                     );
+                })(size);
 
             }
 
@@ -45,3 +50,43 @@ var generatePhotoSizesById = function generatePhotoSizesById(id, cb) {
 }
 
 exports.generatePhotoSizesById = generatePhotoSizesById;
+
+var generatePhotoPage = function (id, cb) {
+    db.getPhotoById(id, function(photo) {
+        console.log('Fetching photo id: '+id);
+        var description = markdown.toHTML(photo.description);
+        var photoDate = helper.epochToShortDateString(photo.photoDate);
+        var url = '/photos/'+photo.slug+'/';
+        var filepath = config.genDir+url;
+        var filename = filepath+'index.html';
+        var options = {
+            pretty: false,
+            title: photo.title,
+            description: description,
+            slug: photo.slug,
+            url: url,
+            extension: photo.extension,
+            postDate: photo.photoDate
+        };
+
+        console.log('Rendering photo: '+photo.title);
+        var jadeOut = jade.renderFile('views/render-photo.jade', options);
+
+        console.log('Creating directory: '+filepath);
+        mkdirp(filepath, function(err) {
+            if (err) {
+                console.log(err);
+            }
+            else {
+                console.log('Writing to file: '+filename);
+
+                fs.writeFile(filename, jadeOut, 'utf-8', function(err) {
+                    if (err) console.log(err);
+                    cb(err);
+                });
+            }
+        });
+    });
+}
+
+exports.generatePhotoPage = generatePhotoPage;

views/render-footer.jade

@@ -0,0 +1 @@
+script(type="text/javascript", src="/static/scripts/crunch.js")

views/render-layout.jade

@@ -9,9 +9,15 @@ html
     link(rel='stylesheet', href='/static/stylesheets/style.css')
     block head-addition
   body(role="document")
-    div(class="container-fluid", role="main")
-        div(class="row")
-            div(class="col-sm-3")
-                img(class="img-responsive", src="/static/images/logo.png")
-            div(class="col-sm-8 col-sm-offset-4")
+    div(role="main").container-fluid
+        div.col-sm-3
+            div.title-block
+                img(src="/static/images/logo.png").img-responsive
+        div.col-sm-8.col-sm-offset-4
             block content
+        div.col-sm-3.title-block-nav
+            ul.nav.nav-pills.nav-justified
+                li: a(href="/") Home
+                li: a(href="/blog") Blog
+                li: a(href="/photos") Photos
+

views/render-photo.jade

@@ -1,7 +1,13 @@
 extends render-layout
 
+block head-addition
+    script(type="text/javascript", src="/static/scripts/crunch.js")
+
 block content
-    div: img(src="#{medURL}")
+    div: img(slug='#{slug}', size='md',
+        src="/static/images/loading.gif", ext='#{extension}', load='lazy',
+        onload='changeImg(this);')
 
     h3: a(href="#{url}") #{title}
     div !{content}
+

views/render-post.jade

@@ -1,8 +1,6 @@
 extends render-layout
 
 block content
-    div(class="col-sm-8 col-sm-offset-2")
-        div(class="col-sm-10 col-sm-offset-1")
     h3: a(href="#{url}") #{title}
     p #{postDate}
     div !{content}