refactor modal code - improve resizing - move hero out of sections

layouts/index.html

@@ -5,10 +5,10 @@
 {{ if ne .Site.Params.navbar.hidden true }}
   {{ partial "navbar.html" . }}
 {{ end }}
-<main id="page">
 {{ if ne .Site.Params.hero.custom_hero true }}
 {{ partial "hero.html" . }}
 {{ end }}
+<main class="sections">
 {{ partial "sections.html" . }}
 {{ partial "modals.html" . }}
 </main>

layouts/partials/head/meta.html

@@ -1,6 +1,7 @@
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description" content="">
     <meta name="author" content="">
+    <meta http-equiv="Cache-Control" content="max-age= {{ .Params.cache_timeout | default "3600"}}" />
     <base href="{{ .Site.BaseURL }}">

static/css/base.css

@@ -19,7 +19,7 @@ body {
   font-family: 'Roboto', sans-serif;
   font-size: 1.4rem;
   flex-direction: column;
-  width: 100%;
+  width: 100vw;
   /* 14px default before jquery scalling */
 }
 
@@ -29,6 +29,7 @@ body {
   padding-bottom: 1em;
   align-items: center;
   flex-direction: column;
+  width: 100vw;
 }
 
 /* mobile first column */

static/css/navbar.css

@@ -7,7 +7,7 @@
   top: 0;
   left: 0;
   z-index: 10000;
-  width: 100%;
+  width: 100vw;
   color: black;
   background-color: white;
   border-bottom: 1px solid grey;

static/css/page.css

@@ -85,7 +85,7 @@
 /* modal */
 
 .section--modal {
-  display: flex;
+  display: none;
   color: white;
   justify-content: center;
   position: fixed;
@@ -131,7 +131,7 @@
   overflow-y: auto;
   position: relative;
   align-items: flex-start;
-  font-size: .9em;
+  font-size: 0.9em;
   padding: 1em;
 }
 
@@ -144,6 +144,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 100vw;
 }
 
 #hero .section-content--hero {

static/js/docready.js

@@ -1,23 +1,22 @@
-// requires jquery
-$(document).ready(function () {
-
-  // initialize
+(function initialze() {
   navbarSpacer();
-  // $('#page').css("width", $(window).width());
   heroResize();
   itemResize('iframe');
   typeResize(); // for section content
   hljs.initHighlightingOnLoad();
   $('.section__content--modal').perfectScrollbar();
+})();
 
-  // resize elements on change
-  $(window).resize(function () {
-    // $('#page').css("width", $(window).width());
-    navbarSpacer();
-    heroResize();
-    itemResize('iframe');
-    typeResize();
-    $('.section__content--modal').perfectScrollbar('update');
-  });
+// requires jquery
+$(document).ready(function () {
 
-});;
+});
+
+// resize elements on change
+$(window).resize(function () {
+  navbarSpacer();
+  heroResize();
+  itemResize('iframe');
+  typeResize();
+  $('.section__content--modal').perfectScrollbar('update');
+});

static/js/flowType.js

@@ -3,7 +3,6 @@
  * Copyright 2013-2014, Simple Focus http://simplefocus.com/
  *
  */
-
 $.fn.flowtype = function (options) {
 
   // Establish default settings/variables

static/js/page.js

@@ -36,7 +36,7 @@ function navbarSpacer() {
 }
 
 // hero resizer
-function heroResize(bfr = 15) {
+function heroResize(bfr = 30) {
   var h = $(window).height() - $(".nav-bar__header").outerHeight(true),
     w = $(window).width(),
     fr = bfr * h / w
@@ -44,7 +44,7 @@ function heroResize(bfr = 15) {
     // minimum base font ratio
   fr = (fr > bfr) ? bfr : fr
     // adjust for short viewport height
-  fr = (w / h > 1 && h < 600) ? 15 * w / h : fr
+  fr = (w / h > 1 && h < 700) ? 30 * w / h : fr
     //console.log('fr after', fr)
 
   $('#hero').css({
@@ -52,14 +52,17 @@ function heroResize(bfr = 15) {
     height: h / w > 1.5 ? w * 1.5 : h,
   });
 
+  var mf = w / h > 1 ? 0 : 12
+
   $('#hero').flowtype({
-    maxFont: 50,
-    minFont: 18,
+    maxFont: 30,
+    minFont: mf,
     fontRatio: fr
   });
 }
 
 // child item resize based on parent container (i.e. flexbox)
+// Especially good for iframes
 function itemResize(item, maxWidth = 450, widthPadding = 30) {
   let windowWidth = $(window).width()
   let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@@ -73,12 +76,12 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
   })
 }
 
-function typeResize() {
-  $('.section').flowtype({
+function typeResize(fr = 20) {
+  $('main:not(#hero)').flowtype({
     // maximum: 1000,
     minFont: 12,
     maxFont: 25,
-    fontRatio: 20
+    fontRatio: fr
   })
 }
 
@@ -107,39 +110,67 @@ function lightgallery(id) {
 
 }
 
-// Modal
-// hide all the modals before displaying
-$('.section--modal').each(function () {
-  $(this).hide();
-});
+// Modal tool.  Must use modal template for content
+(function ($) {
 
-// all but inside the modal box
-$(document).on('click', function (event) {
-  var container = $(".section__container--modal");
-  if (!container.is(event.target) && // If the target of the click isn't the container...
-    container.has(event.target).length === 0) // ... nor a descendant of the container
-  {
-    $('.section--modal.current').hide().removeClass("current");
+  // extend jquery so remove handlers can be added and removed at the right time in a group
+  $.fn.modalHandlers = function (state = 'on') {
+
+    if (state === 'on') {
+      $(document).on('click', modalClickOutside);
+      $(document).keypress(modalEsc);
+      this.find('a[modal-close]').on('click', modalClickCloser);
+      return this
+    }
+
+    if (state === 'off') {
+      $(document).off('click', modalClickOutside);
+      $(document).off('keypress', modalEsc);
+      this.find('a[modal-close]').off('click', modalClickCloser);
+      return this
+    }
+
+    return false;
+
+  };
+
+  // modal event handlers - add more if you want - add them to extension above
+  function modalEsc(event) {
+    if (event.key === "Escape") { modalHide() }
   }
-});
 
-$('.section__container--modal').click(function () {
-  $('.section--modal.current').hide().removeClass("current");
-  $('a[modal-close]').remove();
-});
+  function modalClickOutside(event) {
+    var container = $(".section__container--modal");
+    if (!container.is(event.target) && // If the target of the click isn't the container...
+      container.has(event.target).length === 0) // ... nor a descendant of the container
+    { modalHide(); }
+  }
 
-// register click for modal link
-$("a[modal]").click(function () {
-  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
-    var target = this.hash;
-    $(target).addClass("current").show()
-    target = target + " > .section__container > .section__headline"
+  function modalClickCloser(event) {
+    modalHide();
+  }
+
+  // modal show and hide
+  function modalShow(modal_hash) {
     var closer = "<a modal-close class='fa-stack fa-2x' ><i class='fa fa-circle-thin fa-stack-2x'></i><i class='fa fa-close fa-stack-1x'></i></a>"
-    $(target).append(closer);
-  } else {
-    var target = this;
+    $(modal_hash).find('.section__headline').append(closer).end().modalHandlers().addClass("current").css('display', 'flex');
   }
-  // alert(`I clicked on modal link ${target}`);
-  return false;
-});
+
+  function modalHide() {
+    $('.section--modal.current').hide().modalHandlers("off").removeClass("current").find('a[modal-close]').remove;
+  }
+
+  // Register click event for all modal links on page
+  $("a[modal]").click(function () {
+    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+      var target = this.hash;
+      modalShow(target);
+    } else {
+      alert(`modal display of off page content not supported`);
+    }
+    return false;
+  });
+
+}(jQuery));
+
 // end modal