added flowtype for readability of text in html pages

css/flowtype.css

@@ -0,0 +1,27 @@
+/* standard CSS values for flowtype
+   overridden by custom.css
+   see https://github.com/simplefocus/FlowType.JS
+
+   Tweaks for good readability of text
+*/
+
+body {
+   font-size: 18px;
+   font-smooth: always;
+   -webkit-font-smoothing: antialiased;
+}
+
+p,blockquote {
+    letter-spacing: 0.01rem;
+}
+
+h1,h2,h3,h4,h5,h6,p {
+   line-height: 1.45;
+}
+
+h1 { font-size: 4em;   }
+h2 { font-size: 3em;   }
+h3 { font-size: 2.8em; }
+h4 { font-size: 2.5em; }
+h5 { font-size: 2.3em; }
+h6 { font-size: 2.0em; }

js/flowtype.js

@@ -0,0 +1,48 @@
+/*
+* FlowType.JS v1.1
+* Copyright 2013-2014, Simple Focus http://simplefocus.com/
+*
+* FlowType.JS by Simple Focus (http://simplefocus.com/)
+* is licensed under the MIT License. Read a copy of the
+* license in the LICENSE.txt file or at
+* http://choosealicense.com/licenses/mit
+*
+* Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
+*/
+
+(function($) {
+   $.fn.flowtype = function(options) {
+
+// Establish default settings/variables
+// ====================================
+      var settings = $.extend({
+         maximum   : 9999,
+         minimum   : 1,
+         maxFont   : 9999,
+         minFont   : 1,
+         fontRatio : 35
+      }, options),
+
+// Do the magic math
+// =================
+      changes = function(el) {
+         var $el = $(el),
+            elw = $el.width(),
+            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
+            fontBase = width / settings.fontRatio,
+            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
+         $el.css('font-size', fontSize + 'px');
+      };
+
+// Make the magic visible
+// ======================
+      return this.each(function() {
+      // Context for resize callback
+         var that = this;
+      // Make changes upon resize
+         $(window).resize(function(){changes(that);});
+      // Set changes on load
+         changes(this);
+      });
+   };
+}(jQuery));

render

@@ -50,6 +50,9 @@ INDEX_PREFIX=""
 # thumbnail size
 THUMB_SIZE=256
 
+# font ratio
+FONT_RATIO=30
+
 source config.zsh
 ####################################
 
@@ -108,8 +111,8 @@ render_header() {
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="${baseurl}/css/bootstrap.min.css" rel="stylesheet" />
     <link href="${baseurl}/css/bootstrap-responsive.min.css" rel="stylesheet" />
-
 EOF
+
     { test -r "$DIR"/views/css/custom.css } && {
 	cat <<EOF
     <link href="${baseurl}/css/custom.css" rel="stylesheet" />
@@ -160,6 +163,65 @@ EOF
     # if test mode then render the test footer
     { test "$CMD" = "test" } && { render_test_footer }
 
+    # if there is flowtype.js then use it
+    { test -r "$destination"/js/flowtype.js } && {
+
+        cat <<EOF
+<script type="text/javascript">
+\$('p').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $FONT_RATIO
+});
+\$('blockquote').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO + 3 ))
+});
+\$('h1').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO - 20 ))
+});
+\$('h2').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO - 15 ))
+});
+\$('h3').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO - 10 ))
+});
+\$('h4').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO - 5 ))
+});
+\$('h5').flowtype({
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : $(( $FONT_RATIO - 3 ))
+});
+
+</script>
+EOF
+    }
+
 cat <<EOF
   </body>
 </html>
@@ -214,6 +276,9 @@ render_html() {
 
     cat $tmp
 
+# extra js for html pages
+    includejs+=(flowtype.js)
+
 # clean up from temporary files
     rm -f tmp.*
 
@@ -310,6 +375,8 @@ for src in $htmls; do
 
     dst=`calc_dest "$src"`
 
+    includecss+=(flowtype.css)
+
     render_header > $dst
 
     # close <head> as nothing else is needed
@@ -391,7 +458,8 @@ idxs+=(`find views -type f -name '*.index'`)
 act -n "publishing all $B views $r ... "
 rsync -a -W --ignore-existing "$DIR/views/" "${destination}/"
 # make sure that new css styles are updates
-cp -f "$DIR/views/css/custom.css" "${destination}/css/"
+{ test -r "$DIR/views/css/custom.css" } && {
+    cp -f "$DIR/views/css/custom.css" "${destination}/css/" }
 print "done"
 
 # if the whole website is a "slideshow" (set in config.zsh) then we start with